Package Exports
- sass-griddy
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (sass-griddy) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
griddy
Simple grid framework for Sass.
Getting Started
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;
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