Obviously you do tend to repeat certain pieces of code over and over in a project, but a framework? Behind a word like that usually stands a complex set of predefined elements. Though solid and reliable, these are often not very flexible and not easily modifiable. And the last two features seem to be crucial for projects that involve html and css.

Deciding to Use a Grid System

It all started with the plan to redesign the ThinkSentient website. I whipped up a new, more elegant design. It wasn’t done using a grid or any vertical rhythm (other than going for the “feels good” approach). This lead to the idea of updating the look of the ThinkRobot blog, considering that both websites are intentionally very similar with only a different colour scheme.

The problems started when I was adding the extra pages for blog specific stuff. Unfortunately I have not realized that in Fireworks (CS4) when you move guides on one page they do not affect guides on another, while state changes do. And I found out only after ending up with over 7 pages with guides all over the place. Sigh.

I had no choice, I would need to reorder most of these pages, as one of the side effects of wondering guide lines was a sidebar of different widths. So I said to myself, might as well give that grid thing a try if I have to do all this work over again.

Choosing the Grid System

Personally I decided to go with the 960 Grid System – the 12 column variation. Due to the recent decision of finally ditching designing for 800×600 I wanted a framework that was suited for the 1024×768 resolution, and the wider the better. 960 is a good, easily divisible number, just as the official website claims.

Secondly I preferred something lightweight and easy to tweak, with not too many defaults. 960 combined with Eric Meyer’s CSS Reset Reloaded was the ideal solution for me.

Grid vs Non-Grid

Design Without Grid

[caption class="img2" id="attachment_23" align="alignleft" width="300" caption="Design With Grid"][/caption]

The comparison above should show the slight differences. On the left is the design without a grid and vertical rhythm, while on the right there is the updated version based on 960 grid system and 18px lines. Some parts of the preview might vary, as the grid screenshot is closer to the finished design, however you can definitely see the difference a grid, and especially the introduction of vertical rhythm can make.