How to use 960 Grid System to create quick page layouts

Ashford uses the 960 Grid System which makes it easy to create quick, clean layouts. This post will take you step by step through the process of using Nathan Smith’s engenious CSS classes to add some visual variation to your pages.

Get the 960 Gridder Bookmarklet

The first step will be to overlay the 16 column grid over the page you want to layout. I use the 960 Gridder bookmarklet. To install, just drag the 960 Gridder to your bookmark bar in FireFox.

If you use Ashford, click on the “grid on” button that appears when you are logged-in at the top left of the screen below the Admin Bar.

Browse to the page you want to layout, click on the 960 Gridder link in your bookmarks and it automagically will overlay grid over your page. It defaults to 12 column, so you will want to make sure you select 16 column.

Ashford content area is 9 columns

Before you start, you need to know the width of your content area. With the overlay, you can count the number of columns. Or if you use a FireFox plugin like FireBug, you can inspect the #content div and see what class is attached.

For most Ashford templates, the main content area is 9 columns wide (grid_9) but a full width page (grid_12 prefix_2 suffix_2).

Layout your content using classes

With 9 columns, it is pretty easy to layout three columns of equal width. Here is our example:

To create this, you would first click on the HTML tab in your WordPress text editor (rather than visual). I should warn you that your mileage may vary if you flip between Virtual and HTML tabs.

I suggest that when laying out your page — you stay in the HTML editor. I usually work in a code editor then paste code into body field instead of editing code WordPress. That way if it something goes sideways, I have a local copy and do not lose my work.

The problem comes when you or another user, comes back to this page at a later time. Fortunately, you can use revisions to restore code that goes wonky.

Here is the HTML that produced the 3 columns layout above:

1
2
3
4
5
6
7
8
9
10
11

<div class="grid_9 alpha omega">
  <div class="grid_3 alpha">
    Montes porta lectus? Elementum montes vel placerat rhoncus placerat, dapibus, in integer? Facilisis turpis magna penatibus eros penati.
  </div>
  <div class="grid_3">
    Diam pellentesque ut porta vel magnis arcu sociis, tincidunt turpis aliquet et. Sociis porttitor dis pellentesque diam pellentesque.
  </div>
  <div class="grid_3 omega">
    Nec elit nunc. Mus magna dapibus, mattis nec odio sed? Facilisis, magna ac diam, in hac! Arcu pulvinar? Nunc mid, dis integer a tempor.
  </div>
</div>

960 Grid System Explained

The classes that start with .grid_ set the width AND 10px right and left margins. The class .alpha removes the left margin and the class .omega removes the right margin. You can learn about more 960 from the  Nettuts’ tutorial and video.