Design and Prototyping for Drupal

But What About All These Presentational Classes? There Must Be a Better Way!

While 960.gs offers a ton of flexibility, and can make constructing a page more efficient, it must be acknowledge that it adds a fair amount of code to your site—not only the CSS files that construct the grid, but also the presentational classes needed to set up page defaults (grid-x, push-x, etc.). For those who pride themselves on fully semantic code (organized by hierarchy, presentation well separated from content, etc.), this can be a major annoyance. What if there was another option—an option that could set up a grid for you without all those annoying extra CSS classes?

Currently, there is one option: Susy (susy.oddbird.net/). Susy is billed as a way to make “unobtrusive grids for designers.” Susy allows you to create custom grids using Compass and Sass (command-line CSS tools; see http://compass-style.org/), without any presentational classes showing up in your markup. While Susy looks very powerful, there are some caveats to its awesomeness:

• It requires knowledge of the command line. You’ll need to install a Ruby gem in order to install the Susy plugin, and you’ll also need the command line to start a new project and to compile your CSS once you’ve set your definitions.

• It requires knowledge of Compass and Sass. Compass and Sass are, as mentioned earlier, command-line CSS tools. They are similar to LessCSS, which you will read about later in this book, but instead of using Javascript to compile your ...