UNPKG

kickstart-node

Version:

A front-end framework for clean HTML and fast performance

46 lines (29 loc) 1.29 kB
# Kickstart Switches ## Install in your project ### Gulp/Node.js Let's install this as a git submodule. In your project, `cd` to `lib/sass/vendor` git submodule add git://github.com/ajkochanowicz/switch.git As a submodule, this won't grow in your repository but it will allow you to keep it up to date. [Read more about submodules](http://git-scm.com/book/en/Git-Tools-Submodules) In `lib/sass/vendor/_index.sass`, add @import switch/switch In the very bottom of your theme file, instantiate the `switch()` mixin =switch($color: $primary-color) +switch-default($color) Now that you have the mixin available, you just need to assign it to some class .switch +switch To add a switch, use the following markup <div> <div class="switch"> <input id="switch-1" type="checkbox" /> <label for="switch-1"></label> </div> <span>Let me know about future updates!</span> </div> Note, the `switch-1` id is optional. Use whatever id you like. The first `div` is just to contain anything. When stacking switches, you'll want to make this div 'display: block' or use `form_group()` At any time, you can update all the submodules in your project from your project root by running git submodule update