Simple grid framework for Sass.
First off you'll need to import griddy to use it:
@import 'path/to/griddy';To define a row element of your layout:
.some-row {
@include griddy-row;
}And to define a column element:
.some-column {
@include griddy-column(1 of 2);
}Columns can also be offset:
.some-column {
@include griddy-column(1 of 2);
@include griddy-offset(1 of 4);
}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 {
@include griddy-column(1 of 4);
@include griddy-column(25%);
@include griddy-column(1/4);
}You can also define gutters for your grid layout:
.some-row {
@include griddy-row($gutter: 20px);
}
.some-column {
@include griddy-column(1 of 2, $gutter: 20px);
}
.some-offset-column {
@include griddy-column(1 of 4, $gutter: 20px);
@include griddy-offset(1 of 4, $gutter: 20px);
}Or globally define your gutter width:
$griddy-gutter: 20px;
.generic-row {
@include griddy-row;
}
.generic-column {
@include griddy-column(1 of 2);
}
.special-row {
@include griddy-row($gutter: 40px);
}
.special-column {
@include griddy-column(1 of 2, $gutter: 40px);
}Or have no gutter:
$griddy-gutter: 0;If you need to clear the preceding column in your layout:
.some-column:nth-child(3n+1) {
@include griddy-clear;
}By default griddy's direction is left-to-right, however you can change this by setting:
$griddy-direction: right;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.
MIT - see license