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 Technify.me 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
- File Structure
- Code Quality
- Code Examples
- Performance Impact
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.