in CSS, User Experience

CSS Framework Comparison

In my last post, Should I Use a CSS Framework?, I presented an argument for using CSS frameworks on web site projects. In this post, I will compare three CSS frameworks by building a web page with each of the three.

I used the CSS Zen Garden content for the comparison. This document seems ideal to demonstrate how much or how little change is required to existing markup in order to implement a CSS framework. I will make one change to the document, however, and that will be to add a contact form.

Each framework was evaluated by recreating the layout. Because we are primarily concerned with the quality of the markup and the ease-of-use of the frameworks themselves, I was not concerned with images, only layout. My goal was not to make the layout pixel-perfect but to get a general idea of how easy it is to use each framework.

The Three CSS Frameworks

The Review Criteria

Each implementation took about an hour. 960 Grid System took slightly less time because I am more familiar with it, but the difference was not what I would consider statistically significant. The implementation test of each framework can be found here:

You can use the links in the section above titled Review Criteria or the numbered page links below to read the evaluation in each category.