Main Content
rasterfari.scss is a Sass/SCSS based grid system, which will help you to build grid layouts of any scale and complexity. See Demo!
The key features are:.is-pulled-by-{n} or .is-pushed-by-{n}display: inline-blocknpm install --save-dev rasterfari-grid@import "path/to/rasterfari.scss";
/* some styles */
$rasterfari__cols: 12; /* Choose your prefered number of columns (default: 12) */
$rasterfari__gutter: 20px; /* the width of the gutter between the columns (default: 20px) */
$rasterfari__namespace: ''; /* Prefix for the rasterfari classes (default: '') */
$rasterfari__breakpoints: ( /* Breakpoints */
'medium': '(min-width: 40em)', /* Use the names of the breakpoints as class-suffix in your markup */
'large': '(min-width: 64em)' /* Add a new breakpoint if you need to */
) !default;
/* some more styles */
Every container which contains columns gets the class .grid
Every column gets the base class .grid__col, which translates to 100% of the available width.
By giving .grid__col a .grid__col--${number} modifier, you can decide how many columns you would like to span. ${number} can be every number starting from 1 up to $rasterfari__cols which is defined in the default settings.
By giving each .grid__col a suffixed modifier like .grid__col--${number}@${breakpoint} you can control at which breakpoint the span should take action. The name of the suffix ${breakpoint} is defined in the default settings.
Within every .grid__col can live another .grid which defines its own columns with its own modifiers. So, technically, the possibility to nest grids into each other is infinite.
Main Content
Let's say, that the aside column is on the left side on large screens, so it comes first in visual terms. Although, in your markup and on small screens you would like to present the main content first. This is where these state classes come into play.
With the .is-pushed-by-${numberOfCols} and .is-pulled-by-${numberOfCols} states you are able to choreograph your visual layout independently from your markup. You might also use the @${breakpoint} suffix here to add a little more control over pushing and pulling at a certain viewport size.
Add the .has-no-gutter state to .grid to remove the gutter between the columns.
Add the .is-middle state to .grid to middle-align the columns
Add the .is-bottom state to .grid to bottom-align the columns