# Kickoff Snippets
> For Sublime Text, Atom & VS Code
Use these snippets if you use the [Kickoff framework](https://github.com/trykickoff/kickoff/) & [Sublime Text](http://sublimetext.com) or [Atom](https://atom.io)
* [Kickoff demos](http://trykickoff.io/demos/)
## How to install
### Sublime
With [Package Control](http://packagecontrol.io):
1. Run `Package Control: Install Package` command, find and install **Kickoff Snippets** plugin.
2. Restart ST editor (if required)
### Atom
1. Go to `Atom > Preferences...` then search for **kickoff-snippets** in Packages tab.
2. Restart Atom.
### VS Code
1. Launch VS Code Quick Open (`⌘+P`), paste the following command, and press enter
2. `ext install kickoff-snippets`
---
## Tab triggers
* **CSS**
* animation: animation TAB
* background-size: background-size TAB
* background: background TAB
* border-radius: border-radius TAB
* box-shadow: box-shadow TAB
* media-query: media TAB
* transform: transform TAB
* transition: transition TAB
* translate3d: translate3d TAB
* **HTML**
* 2 grid columns: grid TAB
* grid row: grid TAB
* grid column: grid TAB
* media object: media TAB
* button: btn TAB
* fluid video: video TAB
* checkbox: checkbox TAB
* radio: radio TAB
* select: select TAB
* file: file TAB
* form actions: actions TAB
* input: input TAB
* table: table TAB
* svg: svg TAB
* **Javascript**
* es6 module: es6 TAB
* attach.js module: attach TAB
* double-dollar: $$ TAB
* **SCSS**
* before: before TAB
* link: link TAB
* visited: visited TAB
* active: active TAB
* hover: hover TAB
* after: after TAB
* before&after: beforeafter TAB
* font-size mixin: font-size TAB
* media-query mixin: mq TAB
* hidpi mixin: hidpi TAB
* respond-min mixin: rmin TAB (deprecated)
* respond-max mixin: rmax TAB (deprecated)
* respond-minmax mixin: rminmax TAB (deprecated)
* rotate mixin: rotate TAB
* size mixin: size TAB
* square mixin: square TAB
* transition: transition TAB
* modular-scale function: modular-scale TAB
* multiply function: multiply TAB
* map-deep-get function: map-deep-get TAB
* color variables: color TAB
* default-transition variables: default-transition TAB
* font-family variables: font-family TAB
### Sublime to Atom converter
./atomizr -i "~/htdocs/trykickoff/Kickoff-snippets/SASS/*.sublime-snippet" -o snippets.cson --split
## Publishing to Atom package or packagecontrol.io
Ensure you have Atom installed, then run (we use `apm` to increment the version number:
```
apm publish major|minor|patch
# for VS Code
vsce publish
```
This bumps the version, adds a tag, publishes to Atom's package repo. Package Control watches for changes so will take a little longer.
### Convert sublime snippets to VS Code
Use http://codebeautify.org/javascript-escape-unescape to escape the body of the snippet. Manually copy the rest.