Design and Prototyping for Drupal

Chapter 6. Working with Layout Grids

We can think of grids, therefore, as a springboard for creativity. They lay a foundation through which a designer can create solutions to problems large and small, and in doing so help readers, users, and audiences find that which all humans seek: a sense of order within disorder.^[4]

As you may have noticed from the series of semi-transparent rectangles overlaying a few of the examples in this book, I use grid systems fairly often in my work. There are several different grid systems available for websites, many created for specific projects by developers who decided to give their work back to the design community. This chapter will focus on the one I’ve been using for years, 960.gs. 960 is certainly not the only option for a grid system; however, it is one that has received a lot of attention and support in the Drupal community. The 960 grid system (960.gs), developed by Nathan Smith, is incorporated into both the NineSixty (drupal.org/project/ninesixty) and Omega (drupal.org/project/omega) Drupal themes, and the 960 grid generator (grids.heroku.com/) allows you to create your own version of the 960 grid by setting a column number, width, and gutter width (Figure 6-1).

Figure 6-1. Nathan Smith’s lovely 960.gs is a good starting place for working with grids in your web design. If you want to try your hand at a custom grid, he even includes ...