Working with grids using 960

2011-10-05

Using grids for creating web based design has grown immensly popular in recent years. In this session we take a brief look at what grid systems are, their historical background in architecture and print and then familiarise ourselves with the basic workings of the 960 grid system for CSS/HTML based design.

Long affair with grids

If you analyse almost any design hard enough you will probably be able to find a grid lurking about somewhere. For my own part I've been using grids ever since my first professional assignment as an interior designer in Berlin way back in 1994. In the illustration above you can discern a grid in use for the proportioning of the bookshelf. Another example from my own professional life is the logo design for Erling Airways (also in the same illustration).

Kalmar fortress

But grid systems are nothing new, they've been around as long as the concept of geometry. Way back in antiquity: Greek, Romans, Babylonians, Egyptians: in short all high cultures have used it. Known to most of us are probably the strict grid like layouts of roman army camps which later acted as role model for cities like New York and whole bunch of renaissance fortifications throughout Europe. The illustration above shows the renaissance fortress of Kalmar in south east Sweden.

The industrial age

What if we zoom in on our own field? Graphic art grew out of the ornamental elaborate styles of previous ages. But with new materials and techniques of the industrial age a new aestethic was developed founded on scope, function and materials. The first automobile was more a less a horse carriage without the horse. But once the new concept was established designers began to design the object based on it’s own criteria. A car doesn’t have to look like a horse carriage at all. It can look like: ...a car!

When iron casting was first established as a means for mass production some appalling examples first came out, a mixture of the design language for wood or plaster. But pretty soon designers started to design furniture based on the innate qualities of the new techniques and materials.

This change in asethetics and design for the industrial sector naturally also influenced graphic art.

Die Neue Typographie

Along came, among others certainly, but most prominently, Jan Tschichold with his manifest for a New Typography. His ideas were based upon functionality in typography and relied heavily upon the use of grids. In his vane followed the so called International Typographic Style Movement. A style that has come to dominate typography well into our days.

International Typographic Style Movement

The grit of the grid

”A grid at its barest, is nothing more than a series of intersecting horizontal and vertical lines spaced at regular intervals.”
Chris Brauckmuller

A grid is constructed using columns. The Columns are the smallest unit of the grid. Other than the columns the grid has something called gutter, which is the space (margins) between the columns. In the example above the columns are highlighted with red and the gutters are blue.

Fig. 2. Geschwister Scholl Gedenktag

Above you can see an example from Geschwister Scholl Gedenktag commemorative book from the 1960's. Below an example from Renaissance Architecture: Palazzo Rucellai, Florence (disegno della facciata di Leon Battisti Alberti), an example from the early renaissance period.

Fig. 2. Palazzo Rucellai, Leon Battista Alberti

In recent years the use of grid systems has become very common in web design since it offers an efficient and convenient way of transforming almost any design into HTML/CSS. Below an example from drupal.org which is using 960 grid system.

Fig. 4. Drupal.org

Griddin' it

The basic concept of using a grid is to assign the various spaces or areas of your layout a certain number of columns. In the example below, which is based on a 12 column grid, the header is divided into two areas of 8 and 4 coulumns. The main area and the right column also has 8 and 4 columns, whereas the footer is 12 columns wide.

Fig 5. Page layout in a grid. Example.

960 grid system

This article is focusing on the 960.gs (960 grid system) that was created by Nathan Smith to simplify and streamline the workflow in web development. 960 is a framework both for quick prototyping and production of live sites. A great plus with 960, which is one of the most popular frameworks out there, is that it comes complete with templates for Fireworks, Photoshop or even printable PDF:s if you wish to sketch on paper. The templates can be downloaded here http://www.960.gs.

If you are working with Drupal you can use the 960 base theme, named Ninesixty in letters instead of numbers. It as an adaption of 960 for Drupal done by Todd Nienkerk from the Drupal agency Four Kitchens.

The name 960 is derived from the width of the grid which is 960 pixels. Out of the 960 pixels 10 pixels are used on each side of the grid as margins, which means that the actual area that can be used for layout is 940 pixels.

Fig. 6 Basic 960

With 960 the layout is created through using the predefined css-classes of the grid system. These are defined in the CSS-files that are part and parcel of the "kit". As soon as the css-files of the grid system are added to your page the 960.gs is in place and can be used. The basic classes are [code]container[/code], which is used to define the entire grid (most commonly 12 or 16 columns), and and [code]grid[/code], which is used to define the number of columns a certain div should claim for itself. The [code]container[/code] class, in the default version of the grid system sets the width to 960 pixels and centers the layout in the browser window. The beauty being, that those of us who weren't born with a death wish to battle for consistency in all browsers, don't have to give a friggin' hoots about making this work. It just does. The [code]grid[/code] class which, as mentioned, can be used to define the spaces within the all encompassing container, can easily be nested allowing you to subdivide spaces ad nauseam. In practice this could mean, like in the illustration above, that a grid-8 could for instance house two grid-4. Creating a new row is just as easily done. Through the float:right property of the grid-classes they automatically start a new row as soon as the number of columns equals the sum defined by the container. In the example above you can see that grid-8 and grid-4, with a sum of 12 (from the container-12 definition), pushes grid-6 and grid-6 into a new row. The only thing to keep in mind is to always make sure that the sum of grids equals the container definition (i.e. container-12 or container-16).

As previously mentioned the grid system exists in two default variants. These are 12 columns or 16 columns. If this doesn't fit your requirements you can easily generate your own grid with and arbitrary number of columns and an arbitrary total width. This is done by using the grid generator at http://960.gs. In the 12-column grid each column equals 60 px and in the 16-column grid each column equals 40px.

.container-12 .grid-1 {
   width: 60px;
}

.container-16 .grid-1 {

   width: 40px;
}

One has to be careful when adding up columns though. You could easily forget to include the correct width of the gutters when adding columns to one another. For instance, the width of grid-4 is not simply calculated by the sum of multiplying grid-1 (which is 60px in a 12 column grid) by four. Doing that would give you 240px width of a grid-4, which in reality has a width of 300px. The reason for this is of course the gutters of 20px each. Quite simple to get, when you see it visually, but still an easy enough mistake to make for a mortal designer without a degree in Maths.

.container-12 .grid-1 {
  width: 60px;
}

.container-12 .grid-2 {
  width: 140px; /* 60+20+60=140 */
}

.container-12 .grid-3 {
  width: 220px; /* 60+20+60+20+60=220 */
}

The two default variants of the grid (12 and 16) can quite easily be combined and used together in the same layout. This is done by switching container type from 12 to 16 or vice versa.

<div class="container-12">
   <div class="grid-4"></div><div class="grid-4"></div><div class="grid-4"></div>
   <!-- // the sum of grid-classes is 12 -->
</div>
<div class="container-16">
   <div class="grid-6"></div><div class="grid-6"></div><div class="grid-4"></div>
   <!-- // the sum of grid-classes is 16 -->
</div>

Using both together

The two versions of the grid (12 or 16) overlap eachother with halves and quarters.

A simple example

This is what a simple basic 960-layout could look like.

Simple 960 example

and in code:

<div class="container-12">
   <div class="grid-3">Left column</div>
   <div class="grid-6">Main area</div>
   <div class="grid-3">Right column</div>
</div>

In order to create (empty) space in a layout you can use the predefined classes of prefix and suffix.

<div class="container-12">
   <div class="grid-3">Left column</div>
   <div class="grid-4 prefix-1 suffix-1">Main area</div>
   <div class="grid-3">Right column</div>
</div>

This is what it could look like in a layout with several rows.

prefix suffix multiple rows

<div class="container-12">
   <div class="grid-12">Page header</div>
   <div class="grid-3">Left column</div>
   <div class="grid-4 prefix-1 suffix-1">Main area</div>
   <div class="grid-3">Right column</div>
</div>

As you can see, there is no need for a new container to create a new row. As long as the sum of columns in each row is correct a new row is automatically initiated, once the previous row has been "filled".

Our buddies Alfa and Omega

As previously mentioned, nesting divs in eachother is no problem.

However, and that's a pretty big but, or a Matzah ball if you will -- since every div that has been given a grid class attribute has a default 10px margin to its' left and right, nesting will invariably break the layout.

Nesting breaks grid

For example: In the container-12 grid the grid-6 column has a a width of 460px plus 10px margins on either side. A grid-3 column in the same container-12 grid is 220px wide with a 10px margin on either side. This means that grid-3 takes up 240px when you include the margins. Hence two grid-3:s in a grid-6 takes up 480px of space when only 460 is available, thus breaking the grid. To solve this problem Nathan Smith, the creator of 960.gs, has supplied us with two great buddies. Their names are Alfa and Omega. These classes allow us to subtract, or eliminate, the margins before or after a grid-class when necessary. The Alpha-class removes 10px margin from the left of a div and the Omega-class removes 10px from the right.

Fixed by alpha and omega

<div class="container-12">
   <div class="grid-12">Page header</div>
   <div class="grid-3">Left column</div>
   <div class="grid-6">
      <div class="grid-6 alpha omega">Nested div</div>
      <div class="grid-3 alpha"></div><div class="grid-3 omega">Nested div</div>
   </div>
   <div class="grid-3">Right column</div>
</div>

Push and Pull

Sometimes you may, for semantic reasons and in order to be SEO-friendly, wish to place the main content first in your code, even though the visual output displays the content in the middle of a page. This could for instance be the case on a site that has the same identical left column navigation menu repeated on every single page, but displays different articles or other pieces of content in the main area that comes after the left column. To be able to do this (i.e. putting important or unique content before repetitious dito in the code) there are the two complimentary classes push and pull.

<div class="container-12">
   <div class="grid-12">Page header</div>

   <div class="grid-6 push-3">
      <div class="grid-6 alpha omega">Main area with unique content to this page</div>
   </div>

   <div class="grid-3 pull-6">Left column</div>
   <div class="grid-3">Right columnt</div>
</div>

In practice this means that you add the number (column width) of the "other" grid and and vice versa. In the example above we want to pull the "left" back 6 grid units to appear first in the visual output (before the grid-6 main area), likewise we want to push the main area 3 grid units forward in the visual output to appear after the grid-3 "left" column. Hence you pair the divs together by adding a pull (or push) value that corresponds to the div that should be interchanged with the one you are adding the class to. The code example above should make the priciple evident.

ns() function

In the Ninesixty Base Theme for Drupal by Todd Nienkierk there is also something called the NS function. This function let's you ask Drupal if a region (for instance a left column block) is in use (has content) or is empty. You then provide alternative layouts for when the region is being used by Drupal or when it is empty. The most common case would probably be if you want the main content area (the node/article) to fill the entire width of the layout when there is no sidebar content present. The ns() function would be used like this:

ns('grid-12', $page['sidebar_first'], 2, $page['sidebar_second'], 3);

The above code has a default of grid-12 (in a container-12 layout). If neither "sidebar_first" nor "sidebar_second" is present (i.e. has content), grid-12 will be the layout used by Drupal to display content. In other words: the full width of the page is used. However if "sidebar_first" is present the function will tell drupal to subtract 2 grid units from the layout and display that content in a grid-2 column followed by a grid-10 column for the Drupal content variable. If "sidebar_second" is also present, another 3 grid units are subtracted from the "main" column and used to display the sidebar_second content. In a typical layout with both sidebars present this would leave the main content area with a grid-7 and generate the following output:

<div class="grid-2">sidebar_first here</div>
<div class="grid-7">content</div>
<div class="grid-3">sidebar_second here</div>

Summing it up before you go-go

So what's the big deal what all of the above anyway? You tell me. It is no big deal. But it can be a really nifty and quick way of getting where you want in a hurry. Grid layout saves a lot of time for most designers. And the beauty of it is that when you have to look for those really annoying discrepancies between a nice browser that you are using for development and some other, let's say, less nice stone age browser that you might have to support you can reduce the possible areas of where the problem resides to something within the code you yourself added on top of 960, because the 960.gs provides a nigh on fool proof way of being compatible towards all common browsers. WIth 960 I find it is easy to get all the basic proportions and positioning of a layout set up in a reliable way, leaving time for all the other nitty gritty stuff you will face anyway.

So the main reasons for using 960, all according to the guruesque creators of 960.gs and Ninesixty Drupal Base Theme,Nathan Smith and Todd Nienkierk, are:

Saves time
Saves money
Reduces frustration

An added plus of course is that is gives you a solid foundation for applying modernist design and typography if you are into that.

Happy gridding!

Appendix

Using Ninesixty

Download from http://drupal.org/project/ninesixty
put in sites/all/themes
add base theme = ninesixty in your themes .info-fil
Copy page.tpl.php (and additional files that you want to use) from ninesixty folder to your theme
Start theming

.info-file