Griddy
A Stylus plugin that makes it easy to create custom, simple, responsive grids
Examples
Plugin setup
Install:
npm install griddy
Use with command-line stylus client:
stylus src -o css -u griddy
Use as a script
var stylus = require('stylus'),
griddy = require('griddy')
function compile (src) {
return stylus(src).set('filename', path).use(griddy());
}
Simple setup
You can also just add griddy to your stylus files directory and import it
@import './griddy'
Usage
Apply the mixin grid-system
to any selector to define a grid system.
grid-system(cols = 12, gutter = 20px, child = '.col', offset = '.off', all-columns = true, separate = '-', breakpoint = 400px)
Parameters
cols
- Number of total columnsgutter
- Horizontal space between columns and vertical space between rowschild
- Child selector suffix (Or full selector, if all-columns is set to false)offset
- Offset selector suffixall-columns
- Generate selectors for all numbers of spans, using[selector][separate][spans]
conventionseparate
- String separatingchild
prefix from spans count, used whenall-columns
is set to truebreakpoint
- Max-size for responsive media query (Columns will break to full-width under specified size)
Example
Stylus
@import 'griddy'
.row
grid-system(12, 20px, '.col', '.off')
HTML
<!-- 3 columns --> <!-- 8 columns offset by 1 -->
Custom class
Stylus
@import 'griddy'
.split-3
grid-system(3, 10px, '.thirds', true, ' thirds-')
HTML
[...] [...] [...]
Licence
Copyright (c) 2014 Tancredi Trugenberger. - Released under the MIT license