Ultimate list of Drupal grid theme resources

Grid-based web development has evolved over the past few years from being the stuff of a few fringe enthusiasts to a fundamental concept for designing and building web sites. While grids aren’t the answer to everything, there are a number of ways they make your life a lot easier.

If you’re interested in building or using a grid Drupal theme, here is a big collection of resources in one place to get you started!

1. Grid design resources
2. Grid theming resources & tools
3. Free grid themes for Drupal
4. Grid base themes for Drupal
5. GUI grid layout with the Skinr module
6. Grid theming in Drupal with Fusion
7. Inspiration: Drupal grid-based sites
   

Grid design resources

• Downloadable 960px grid templates for Photoshop, Illustrator, Omnigraffle, Fireworks, and more. Printable sheets too!
• A great web-based grid calculator
• 6 Tips and Tricks for Designing with the 960 Grid System
• The Grid System: The ultimate resource in grid systems – yep, the name says it all
• Grid spreadsheet – if you need to create a custom grid or see what combination of columns and pixel widths works for your requirements (such as certain ad unit dimensions), this should help

 Grid theming resources & tools

• 960 Gridder module to add a grid overlay through a Drupal module
• Firefox extension for viewing grid overlays on any webpage
• Panels 960gs supplies dozens of 960px grid layouts for Panels
• Drupal theming using the 960.gs grid system – presentation slides and video by Four Kitchens
• CSS Grids in Drupal – video podcast by Mustardseed Media

 Free grid themes for Drupal

• Fusion-based themes
  • Abstract
  • Acquia Prosper
  • Acquia Marina
  • Celadon
  • Light Fantastic
• Nitobe
• Decayed
• Plain Grail / Dark Grail
• 960 Robots
• Nifty 50
• Grass
• Recycled

 Grid base themes for Drupal

Generally when building a custom Drupal theme, you start from a “base theme” or “starter theme”. Most base themes include features to make theming easier, like body classes, accessibility improvements, theme settings to assist during development, and better cross-browser support. You then create a subtheme (aka child theme) of these so your custom theme inherits all these features.

Here are some Drupal base themes that implement different grid frameworks (ordered by usage):

• Fusion
• Framework
• NineSixty
• Blueprint
• Zen NineSixty
• BlueTrip
• Omega
• Fluid Grid System
  
• YUI Grid
  

 GUI grid layout with the Skinr module

Using a grid is straightforward for experienced web designers and Drupal themers, but it’s hard to expose the power of grid layouts to end users who might not have the time or skill to do it themselves.  With the Skinr module, however, it’s now possible for a theme to make these grid classes available in the UI and let end users modify the grid and the elements in the grid through Drupal’s point-and-click interface. 

 Grid theming in Drupal with Fusion

One popular example of an advanced grid theming framework for Drupal is Fusion, which uses Skinr to expose grid classes (plus block style and helper classes) through the block administration UI, for code-less layouts and block positioning. Fusion’s design goal is to be the easiest and fastest way to create and administer a grid-based Drupal site, with its own “Easy-Grid” take on the 960.gs grid framework:

• Fixed and fluid page widths
• 12 and 16 column grids with 20px gutters included, or create a custom grid definition file
• Gutters inside column widths for grid simplicity
• 12 grid-aligned regions, each of which can contain multiple columns/rows of blocks
• Theme settings for fluid page width, sidebar widths, and sidebar positions
• Columns (regions & blocks) floated left to eliminate push/pull math (but centering, float right, drop to new row, and manual indent positioning are available through the UI)
• Auto-dimensioning so blocks get equal widths automatically (e.g., 2 blocks in a region each get 1/2 of the available width, three blocks get 1/3 each, etc.).
  
• Theme helper functions for creating custom rows (full and nested) and blocks in page.tpl.php
• RTL (right-to-left) language support

 Inspiration: grid-based Drupal sites

• Interaction Design Association - Fusion
• Status.net - Fusion
• Joshua Brauer - Fusion
• Four Kitchens - NineSixty
• Caris Life Sciences - NineSixty
• Ted Serbinski - Blueprint
• University of Bristol Students’ Union - Blueprint
• Fight Back! - Blueprint

I hope you’ve found this information and list of resources useful! I’d love to add to the list of inspiring Drupal grid design sites.  Add ‘em to the comments, along with any other grid resources you know and use!