Rastr is a modular CSS grid system based on the flexbox layout.
The class names are inspired by the tried and trusted Bootstrap, since they are short and concise. Some things are different though:
- Columns are built using the CSS Flexible Box Layout Module. This allows for equal height columns and avoids floats and clearfixes.
- No gutters around columns, because they suck. I used to fight them all the time and think it's better to manually add margins and paddings where appropriate.
- All breakpoint values are em-based, thus honouring the browser's font-size settings. Respect your users! Read this excellent article to learn more about that.
- The modular nature of Rastr allows you to enjoy the whole package, or to select what fits your case. Just comment out the
@importstatements of the modules you don't need in rastr.less. The compiled .css file is about 1kb (minified & gzipped) and gets considerably smaller when modules are left out.
Columns are wrapped by an element with
class="row". By default, any row can have up to 12 columns. This can be overwritten by changing
@numberOfColumns: 12 in rastr.less to your favourite number (greater than one).
The column class suffixes designate the column width in relation to the number of columns per row. E.g. if
@numberOfColumns is 12,
class="col-6" will give you a column with a width of 50%.
class="col-2" corresponds 2 of 12, that is 16.67% and so on.
The column suffixes must always add up to
@numberOfColumns, otherwise the row will not be filled completely or some columns wrap to the next line.
Columns can contain rows with more columns by nesting these elements.
Responsive Layout with Breakpoints
For those who like to use breakpoints when building responsive layouts, Rastr offers six of them called
xxl. They are included in the col-* class names, changing the column size according to the available screen width.
The screen widths assigned to each breakpoint can be adjusted in rastr.less.
Push & Pull
In order to offset columns to the left or right without having to add empty spacer columns, the
pull-* classes can be added to each column. Again, the suffix values must add up to
Settings & Build Process
Rastr is built with Less. If you want to play around, change some of the options or remove a module, clone the repository first. Then pop up a terminal,
npm install and
gulp. Now you're ready to edit the less files. Changes will be detected automatically and built to rastr.css.
rastr.less contains a couple of settings:
The number of columns per row. 12 is a reasonable choice appropriate for most use cases, but anything larger than two should work. Keep in mind that with larger numbers the size of rastr.css will grow.
XXL indicates screens wider than
The screen widths for each breakpoint used in the column classnames:
The default values reflect commonly used screen sizes - but keep in mind that these breakpoints should be considered as a rough orientation. They ignore a vast diversity of device resolutions.
If you don't need breakpoints, comment out the line
If you don't want to push or pull columns, comment out the lines
@import "rastr-grid-pull";, respectively.