CSS Grid Systems (960 gs and blueprint)

CSS Grid Systems have become the latest Web design trend. While controversial among the HTML purists because grids violate the strict separation between content and presentation through the insertion of CSS classes such as class="grid_4", designers big and small are falling in love with them. Grids certainly streamline, simplify and sometimes even inspire the design process.

While there are many grid systems available today, two have attained particular popularity:

And not much time has passed until they were picked up as base themes for our favorite CMS Drupal:

While we prefer to build our own themes from scratch, these base themes are a good starting point for anyone just starting out with grids and Drupal theming. Note, however, that the Ninesixty theme does not appear to be using the latest version of the 960.gs system files.

We are particularly focused on 960 and a couple of very useful tools have been released. The 960 Gridder bookmarklet allows you to overlay a customizable grid over existing Web sites to either study them or assist you in your own development. If you are just starting to lay out your theme, the 960 Layout System allows you to interactively build a layout by nesting different sized container within either 12 or 16 column grid. The resulting layout can then be save as both HTML and CSS for further development in either Drupal or your system of choice.

  • Share/Bookmark

One Response to “CSS Grid Systems (960 gs and blueprint)”

Leave a Reply