griddy
Simple grid framework for Sass.
Getting Started
First off you'll need to import griddy to use it:
;
To define a row element of your layout:
.some-row
And to define a column element:
.some-column
Columns can also be offset:
.some-column
The width parameter in griddy-column
and griddy-offset
can be a percentage (i.e. 25%
), a human readable fraction (i.e. 1 of 4
) or unitless number (i.e. 0.25
):
.some-column
You can also define gutters for your grid layout:
.some-row .some-column .some-offset-column
Or globally define your gutter width:
; .generic-row .generic-column .special-row .special-column
Or have no gutter:
;
If you need to clear the preceding column in your layout:
.some-column:nth-child(3n+1)
By default griddy's direction is left-to-right, however you can change this by setting:
;
Browser Support
Works on all modern browsers which support box-sizing
and calc()
.
If you need support Internet Explorer 8, you might want to check out version 1.0.2.
License
MIT - see license