Get a responsive, recursive grid system and lightweight framework in place in seconds. Reactive-sass helps you to set up a css grid using variables, allowing you to easily change or modify it when you please. Also includes helpful helpers allowing you to code code quicker and cleaner. Happy coding :)
Setup:
$ git clone ...
- Import or include reactiveSASS.scss into your project
- Set your row and gutter width, select your column padding and count as well as your base font size.
$row-width : 100%;
$gutter-width : 0%;
$column-paddng : 0%;
$column-count : 12;
$base-font-size: '16px';
- Start using!
To call the grid simply use the class name of row and col on your div's. Eg.
<div class="row">
<div class="w6 col">
</div>
<div class="w6 col">
</div>
</div>
To set your column width use w$
To set an offset use osb$
- hidden
- visible
- block
- display-none
- noselect
- h100
- vh100
- h-inherit
- text-bold
- text-italic
- text-no-style
- equalizer
- More helper classes
- Move to flexbox
- React integration
Everyone brings something awesome to the party so please raise any suggestions and contribute.
So...
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D