Customize Your Grid...and Your CSS Framework

Customize Your Grid...and Your CSS Framework

Grids, long a fundamental principle in print design, is now widely accepted and used in web design. Easy implementation of grid is partly the reason CSS frameworks have been created and gained their own popularity. For this article, I’ll leave the debate of whether to use frameworks for another time, and instead focus on two issues that arose from that conversation. First, many have criticized that frameworks often become crutches for inexperienced developers. The second is that frameworks encourage boilerplate grids and can stifle creativity. I do agree with these two points, to some extent. The matter of fact is that there will always be inexperienced coders looking for a quick solution, and if they’re not using CSS frameworks they’ll just as likely turn to layout generators and the like. I feel the important task is to educate designers to understand why and how they are using frameworks, and a first step to that is to encourage them to customize the frameworks they are using.

Why Customize?

There is already plenty of creativity to be had in the standard 12-, 16-, 24-column layout using 960 pixels. Good design is not hindered but instead can thrive under these constraints, but there are plenty of situations that can benefit from the use of different widths and a different grid. Furthermore, most of the CSS frameworks I’ve come across don’t include padding in their grids. In Khoi Vinh’s classic presentation on grids he said:

What happens when type needs to be inset inside a box?…The answer is to assume some sort of inset for all elements.

Text with inset using grids with no padding vs with padding Fig 1. Text with inset using grids with no padding vs with padding. Columns are in red with the padding in blue.

It seems like a common practice these days is to inset the type, but at the same time shrink the box. The result is that type inside and outside the box don’t line up (see Fig 1, left side). That’s not necessarily bad, but what if you do want the type to line up? Of course, there are many ways to do this (including a 960 plugin I’ve written about before), but one way to implement this is to actually add padding to your grid (blue bars in Fig 1) and in this example I also decreased margins a little bit. Integrating this with your grid framework saves the trouble of writing workarounds, and for other purposes works pretty much the same as a grid framework using no padding.

Of course, there are more benefits to customizing your framework than just grids. Blueprint provides a fantastic starting point for typography, but obviously their typographic choices do not fit every single design project. Actually, no framework fits every single design project; therefore being able to customize a framework — or even better, write your own library/framework — is crucial to supporting designs that fit the users’ needs.

960 Blue, a 960+Blueprint mashup

Since I’m encouraging people to customize and modify, I’ve included a link to my own mashup of the 960 Grid System and Blueprint. I love the simplicity of 960, but I always found myself adding more spacing between columns. Furthermore, I liked the typography starting point of Blueprint, so I added the two together to create 960 Blue.

960 Blue uses SASS 3 and Compass to generate customized grids and typography. In code/_base.scss you can set site width, number of columns, column width, padding, and margin, and also line heights to generate a custom grid framework using Compass. For more information, please see the readme.

For completeness sake, I’ve also included in the comments the math used to arrive at the various grid widths. Obviously this is no substitute for actual learning, and to do that, one needs to grapple with the code and gain experience. No amount of quick fix tutorials can take the place of that, because if that were the case, I might as well point you to a list blog.

So go on, live free, and customize away.


There are no comments yet

In Association With