Thinking about CSS Grid Frameworks

I’ve been playing around with a CSS grid framework as of late. The mere mention of a “grid” framework will send most “standards-compliant” web developers scurrying for the bushes. The reason why is that “grid”, as the name implies, hints of structure, control, and rigidity - no thinking outside the box. Frameworks are also guilty of divititis or the needless proliferation of divs in the code. Nevertheless, there are several popular CSS grid frameworks available, most notably, 960gs, yui grids, yaml, and blueprint, not to mention others.

These options seem to fly in the face of the spirit of CSS, to impose a structure of sorts to the development of a website layout. Those who know CSS think the concept befitting a simpleton, those who don’t, well, not so much. To those who are unfamiliar with CSS, a framework is a godsend, for all the hard work has already been done.

A grid framework is a carryover from the print side of things, where grids have been long used to nicely layout content. With a grid, content boxes line up cleanly, with minimal fuss. Indeed, a grid takes the guesswork out of lining up a complex layout - just follow the grid and you’ll be fine. The adaption to website layout is obvious.

Why use a CSS grid at all? Well, first off, most frameworks include more than just a simple layout schematic; it includes a print style sheet, as well as browser- and print-specific styles. And don’t overlook the main benefit - content boxes line up where they should, no thinking involved. A grid relieves the developer from worrying about a pixel-perfect alignment. An additional bonus for using a framework is fast development; if you know the conventions of a CSS grid framework, it doesn’t take much to whip up new layouts on the fly. Also, most CSS grid frameworks have been tested against multiple user agents (read browsers) and platforms (read operating systems) and have passed with flying colors.

Why shouldn’t you use a CSS grid framework? Well, if you aren’t familiar with CSS, it handicaps your development - you’re limited to the framework; if a client asks for something different, you’re screwed. Also, a framework can come across as conventional and safe; this is fine for large websites, but a detriment for smaller, boutique websites.

So why am I entertaining the idea of a CSS grid framework? Well, I work on a large-scale public website (3,000 plus pages) where a generic framework would come in handy; layout tweaks for special promo pages would already be included in the main CSS file. This means that you don’t have to create special “page specific” styles to embed in the head of each document. I also don’t have to worry about IE6 and whatever quirks it may throw my way, because the framework has been thoroughly tested against that browser already.

I’ve been toying with the Bluetrip CSS grid framework because it is an amalgamation of several popular approaches, combining the benefits of each. The downside is that my layout will be centered and 960px wide, with predictable divisions. The upside is that it will look more-or-less the same in almost every user-agent. This is an upside I can live with. What CSS Grid Frameworks do you prefer and why?

Posted by Jesse on 09/23 at 01:11 PM