Rastr

Introduction

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 @import statements 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.

Simple Columns

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.

Nested Rows

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 xxs, xs, sm, md, lg, xl and 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 push-* and pull-* classes can be added to each column. Again, the suffix values must add up to @numberOfColumns.

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, cd path/to/rastr, npm install and gulp. Now you're ready to edit the less files. Changes will be detected automatically and built to rastr.css.

Options

rastr.less contains a couple of settings:

• @numberOfColumns: 12;

  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.

• @breakpointXXS: 20em;

  @breakpointXS: 30em;

  @breakpointSM: 40em;

  @breakpointMD: 50em;

  @breakpointLG: 64em;

  @breakpointXL: 80em;

  XXL indicates screens wider than @breakpointXL

  The screen widths for each breakpoint used in the column classnames: col-[breakpoint-identifier]-[column-count].

  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 @import "rastr-grid-breakpoints";.

• If you don't want to push or pull columns, comment out the lines @import "rastr-grid-push"; and @import "rastr-grid-pull";, respectively.