Grid

We are utilising the 12 column grid that comes with Foundation, with two minor differences. The row width is 100% and you do not have the utility classes available to you.

Example

Notes:

Fortunately Foundation comes with some excellent mixin support for rolling your own layouts without littering the DOM with unmaintainable span-4's or sm-col-3.

Simply call the mixins to create grids based on your markup.

Mobile First

The BigCommerce Pattern Lab is a mobile first library of design patterns and so should your layouts be.

Example:

Notes:

An over simplified example (Don't name your classes like this) using mixins we can create a layout which progressively get's built as screen size increases.

All columns start spanning 12 columns of the grid, and start condensing as the screen increases and you can fit more content horizontally.