Grid Design with Sass

We are a little fanatical about grid-design with www.FeedMagnet.com. We spend time making sure every element of our pages lines up to the pixel with the grid. There are a number of tools that can be used for grid design in CSS, but we chose to use a couple tools that are still a little less common among designers - Sass and Compass - because of the flexibility they provide.

Intro to grid-based design

The Typographic Grid has been around since mediaeval times, and has been in heavy use by print designers since WWII. For some reason it took until 2007 for web designers to start really putting it to use on the Web. It was a combination of blog posts by Khoi Vinh and Mark Boulton and general buzz about grid design at the 2007 SXSW that fueled a newfound interest in grids among the web community.

The basic idea is that the page should be divided into an evenly spaced grid for content to line up with. In print design, this tended to be a vertical AND horizontal grid - kind of like graph paper. For the web, it doesn't really make sense to set up a vertical grid since page heights are not fixed and tend to expand and contract based on the content in them. Because of this, most web design grids are just evenly spaced columns.

You can see the grid we used for FeedMagnet to the right. The red bars are the columns. The space between them is the padding. You can set the width values for this to whatever you want. For FeedMagnet, I chose 40px for the column and 20px for the padding because I wanted to have 16 columns that added up to just under 1000px (so the site would look good on Netbooks and other computers with a 1024px resolution). Our grid of 16 columns with 20px padding on the left, right, and in-between each column adds up to a total width of 980px.

Designing with the grid

If you are going to use a grid, it is super important to establish the grid dimensions before designing anything - even in Photoshop. I actually prefer to start with a hand-drawn wireframe to establish the number of columns I want.

Once in Photoshop, the first thing I did was create a grid guide layer with my 40px columns spaced out by 20px. I made the columns bright red, the spacing solid white, and the two padding columns on left and right black, then set the layer transparency at 25% so you can still see the design below it. While designing, I just toggle it on and off as needed.

Syntactically awesome Sass

Once you've created your design and are ready to get it into HTML and CSS, there are a number of tools that can come in real handy. If you are less of a coder or are just building a simple site, the 960.gs and Blueprint frameworks are great. They basically give you a set of CSS styles ready-made to work with your grid (you put in your column/padding sizes to generate the CSS). Once you've included their .css files in your site, you can start using class names like grid_4 or grid_6 to set the width of an element.

For FeedMagnet, I wanted something a little more custom. I had been eyeing Sass for a while and wanted to try using it - not because of its ability to help with the grid, but because of how much it improved the process of writting CSS in general. Sass - or, Syntactically Awesome Style Sheets - is a replacement syntax for CSS. It actually generates CSS, so you write your styles in Sass and then have them translated into CSS before publishing to the web. It lets you do things like this:

!feedmagnet_red = #cd2027
.header
    background= !feedmagnet_red
.content
    font-size: 12px
    h2
        font-size: 18px
        margin-bottom: 10px
    a
        color: #00F
.footer
    background= !feedmagnet_red

To generate this CSS:

.header { background: #cd2027; }
.content { font-size: 12px; }
.content h2 { font-size: 18px; margin-bottom: 10px; }
.content a { color: #0000FF; }
.footer { background: #cd2027; }

Notice the variable definition for !feedmagnet_red and the nesting of tags under the .content class. If you done much work with CSS, you can see how much cleaner and more maintainable the Sass code is. It can even let you loop over an iterator and do basic if statements to add logic to your stylesheets.

Getting the grid working with Sass

Establishing a grid in Sass is easy. Our grid section in Sass looks like this:

// Grid Parameters
!col = 40px
!pad = 20px
!cols = 16

// Grid Width Calculations
!full = ((!col + !pad) * !cols) + !pad
!col1 = !col
!col2 = (!col * 2) + !pad
!col3 = (!col * 3) + (!pad * 2)
!col4 = (!col * 4) + (!pad * 3)
!col5 = (!col * 5) + (!pad * 4)
!col6 = (!col * 6) + (!pad * 5)
!col7 = (!col * 7) + (!pad * 6)
!col8 = (!col * 8) + (!pad * 7)
!col9 = (!col * 9) + (!pad * 8)
!col10 = (!col * 10) + (!pad * 9)
!col11 = (!col * 11) + (!pad * 10)
!col12 = (!col * 12) + (!pad * 11)
!col13 = (!col * 13) + (!pad * 12)
!col14 = (!col * 14) + (!pad * 13)
!col15 = (!col * 15) + (!pad * 14)
!col16 = (!col * 16) + (!pad * 15)

This lets me use any combination of variables when defining my block elements, like this:

.header, .footer
    width= !full
    margin= 0 !pad

.sidebar
    width= !col4
    margin= 0 !pad

.content
    width= !col12
    margin-right= !pad

The beauty of Sass is that you don't have to repeat yourself, making the code much more manageable and generally aligning with the Pythonic principle of DRY. If I update the !pad variable, all my !colX variables are updated as well, and the change ripples through my CSS in dozens of places.

Getting Sass working with Django

So, Sass was created as part of Haml, which does something similar for HTML files. It was created by a guy in the Ruby on Rails community. In Ruby on Rails, you just save .sass files directly into your project and when Rails renders the stylesheets they are magically converted to CSS. While the syntax could be ported to other languages, it pretty much exists in Ruby only right now.

We're using Django to power FeedMagnet. Since Django is built in Python instead of Ruby, it would seem that we couldn't use Sass in our Django project, right? Well, this is where Compass comes in. Compass is a Sass framework that essentially de-couples the Sass compiler from Ruby on Rails. It is still uses Ruby to convert the Sass to CSS, but it runs independently - and Python guys are not snobs, so it is ok that we're using a bit of Ruby on our development systems to help us build our Django web app.

Here's how it works. Our media folder looks like this:

/m
    /css
    /sass
    /img
    /js

The /img and /js folders hold our images and JavaScript. The /css folder holds standard .css files, which are generated from the .sass files in the /sass folder.

Compass makes all this possible by "watching" the .sass files in the /sass folder. When it detects a change, it automatically re-generates the CSS from that file and updates the files in the /css folder (note that we changed our Compass configuration to use /css and /sass instead of the default folder names). Once compass is installed, we just run these commands from the shell to get it started:

cd webroot/m
compass --watch

Then we leave the shell open and minimized so it can detect our .sass changes in the background, making the whole process pretty much seamless. The beauty of this is that, even though Compass requires Ruby to run, it only runs on our development systems. We don't need Ruby at all on the production server, since it just needs the final .css files. And even though we're not technically "integrated" with Django, we can use Sass and Django side by side without any issues.

CSS is fun again!

While Sass/Compass has been a big time saver for us, it has also made designing in CSS so much more enjoyable. Our stylesheet code is clean and organized, and it is super easy to find things and make global changes to our CSS. I don't think I could design another site without it!