This page shows how to construct grids. We strongly encourage you use only the layouts that are in the darker grey. Think about your golden ratio!

Remember:

  • The grid must add up to 12
  • Add a class of .last to the last column in a row.
  • If you're putting columns inside columns the first column must have a class of "first" as well as the last class having a class of "last"

Remember to use HTML5 semantic tags for layouts! Use <article> for pages with lots of text, use <section> for structure and use <aside> for sidebars.

To add padding, add a class of "box" to an element inside a grid column. Do not add class "box" to an element with a grid_* class!

.grid_12
.grid_11
.grid_1 .last
.grid_10
.grid_2 .last
.grid_9
.grid_3 .last
.grid_8
.grid_4 .last
.grid_7
.grid_5 .last
.grid_6
.grid_6 .last
.grid_5
.grid_7 .last
.grid_4
.grid_8 .last
.grid_3
.grid_9 .last
.grid_2
.grid_10 .last
.grid_1
.grid_11 .last
.grid_4
.grid_4
.grid_4 .last
.grid_3
.grid_3
.grid_3
.grid_3 .last
.grid_6
.grid_4
.grid_2 .last

.grid_8

.grid_4 .first
.grid_4 .last
.grid_2 .first
.grid_2
.grid_2
.grid_2 .last
.grid_4 .last
.grid_2 .first
.grid_2 .last