The design grid consists of 12 columns, each 60 pixels wide with a 20 pixel gutter space between them giving a total of 960px wide.

Image demonstrating grid measurements.

Columns

Image demonstrating grid columns.

Masthead - Home

Image demonstrating grid use.

Masthead - Content Pages

Image demonstrating grid use.

Correct mark up examples

A three column section

<div class="container-12"</div>

  <div class="grid-4">
    <p>...</p>
  </div>

  <div class="grid-4">
    <p>...</p>
  </div>

  <div class="grid-4">
    <p>...</p>
  </div>

</div>

A main column with sidebar

<div class="container-12"</div>

  <div class="grid-8">
    <p>...</p>
  </div>

  <div class="grid-4">
    <p>...</p>
  </div>

</div>

A smaller main column with sidebar

<div class="container-12"</div>

  <div class="grid-4 suffix-4">
    <p>...</p>
  </div>

  <div class="grid-4">
    <p>...</p>
  </div>

</div>