Herow
Herow, a time-saving Sass grid system.
Herow provides mixins that are simple to use and easy to customize.
It also provides atomic mixins, that are ideal to deal with responsive problematic.
Last, but not least, you can generate atomic classes to play with it directly in CSS.
Simple to use
.main .content .sidebar
Easy to customize
Grid size
You can set a grid size as a parameter of the Herow-column()
mixin.
.content
or you can set your grid size globally.
;.content
Gutter width
You can set a gutter width as a parameter of the Herow-row()
and Herow-column()
mixins.
.main .content
or you can set your gutter width globally.
;.main
See the main API documentation and the configuration documentation.
Atomic mixins
When designing responsive grid, the atomic mixins allow you to update the grid behaviour.
.main .content
See the Atomic mixins API documentation.
Atomic classes
With the Herow-class-generator()
, you can generate atomic classes, like .row
, .col
, .col-1
to .col-12
, etc.
// Generate atomic classes for a 12 columns grid with 1em of gutter
You can also play with the class prefix & suffix to genrate classes like .my-row
or .row-md
.
For example:
// Generate default atomic classes
See the Class generator API documentation.