columns

Scaffolding allows for an unlimited amount of columns giving you the freedom to create any scale grid. This can be done in two ways:

Add a class directly to an element in the markup: class="column-[n]"

			
				<section class="grid">
					<article class="column-8">
						content
					</article>
					<article class="column-4">
						content
					</article>
				</section>			
		

Assign a grid width to an element in Sass with: @include grid(n)

			
				.element { @include grid(6); }			
		

flush

Flush grids are the default and columns should be encapsulated in a containing element with the .grid class.

example without gutter:

with gutters

Gutters are percentage based to maintain visual ratio. Add them by encapsulating columns using the .grid-spaced class.

example with gutter:

will… it… blend scale?!

The grid's width can be altered through one variable—in a % of the viewport—and all columns will automatically scale to match the new grid. Simple.

flush grid

spaced grid