Responsive grid system, built in Stylus
npm install responsive-gridA Stylus Plugin that provides a simple grid system. It's fully responsive, with modifiers available that provide full browser support.
* Installation
* Usage
* Settings
Responsive Grid is on NPM.
``
npm install -g responsive-grid stylus
Below is an example of how to utilise responsive-grid and stylus.
`
stylus -w -u responsive-grid stylus/index.styl -o css/
For more information on the many ways you can use Stylus plugins, please refer to this guide.
To gain access the responsive-grid mixins, simply add:
`
@import 'responsive-grid'
Responsive Grid provides 5 mixins for use. These mixins can be used straight away without any modification to the settings.
Full working examples of all the mixins below can be found in this codepen.
This will set up the block .grid class and the element .grid__item class.
---
This will set up width classes based on the $columns you include.
#### Examples
* grid-widths('', 1 3 6) will set up a whole class, thirds classes, and sixths classes.grid-widths('desk', 1 2 3)
* will set up a .{$namespace} class each of the width classes.
---
This will set up pull classes based on the $columns you include.
#### Examples
* grid-pull('', 1 3 6) will set up .pull-{width} classes that move the .grid__item with a whole class, thirds classes, and sixths classes.grid-pull('desk', 1 2 3)
* will set up a .{$namespace}pull-{width} class each of the pull classes.
---
This will set up push classes based on the $columns you include.
#### Examples
* grid-push('', 1 3 6) will set up .push-{width} classes that move the .grid__item with a whole class, thirds classes, and sixths classes.grid-push('desk', 1 2 3)
* will set up a .{$namespace}push-{width} class each of the push classes.
---
This will set up the gutter modifier .grid--{$namespace} class and .grid__item child selector which modify the gutter width.$namespace
Providing a is optional which allows the mixin to be used to change the base grid gutter at different breakpoints.
#### Examples
* grid-gutter-modifier('', 10px) will set up a .grid class that will provide a 10px gutter between each .grid__item.grid-gutter-modifier('em', 1em)
* will set up a .grid--{$namespace} class that will provide a 1em gutter between each .grid__item.grid-gutter-modifier('percent', 10%)
* will set up a .grid--{$namespace} class that will provide a 10% gutter between each .grid__item.grid-gutter-modifier('pixel', 20px)
* will set up a .grid--{$namespace} class that will provide a 20px gutter between each .grid__item.
---
This will set up modifier .grid--reverse class that, when applied, will visual reverse the DOM order of the .grid__item's. Providing a $namespace` is optional.
---
Variable name | Type | Default | Description
----------------------- | ------- | ------- | -----------
$grid--html-compressed | boolean | true | If HTML is compressed, the whitespace hack used will be redundant.
$grid--gutter | unit | 20px | Can be any the following unit types: em, %, px
$grid--count-names | array | one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen | Forms the first half of the class name of the grid widths
$grid--fraction-names | array | whole half third quarter fifth sixth seventh eighth ninth tenth eleventh twelfth thirteenth fourteenth fifteenth sixteenth | Forms the second half of the class name of the grid widths
$grid--width-expression | boolean | false | Changes the width in the grid widths to use expressions. Set to true for IE7 and below.
---