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.

  1. this article lacks one important test: how smart is the framework to suit into different screen sizes with less or no changes in the html.

    • Are you referring to a responsive-type adjustment to screen size? If so, then yes, that was not covered in the article because responsive design is a very new design approach and is still pretty experimental. I wrote this article over a year ago. I have been considering doing an updated comparison but simply have not had the time. Sorry if you found the article disappointing.

  2. Despite jorj1’s comments, I found this article to be exactly what I was
    looking for!   After working with the 960 grid system for a long, long
    time, I feel I was ready to try something fresh.  After playing with
    some responsive design, I found this to be the 960’s Achilles Heel. 
    Mobile browsing is only getting more popular and it’s not going to be
    easy to find an excuse to have a site that doesn’t at least scale down
    percentage-wise to mobile devices.  That said, YAML is going to be my
    choice going forward.  Your article helped me get to that conclusion, so
    thank you!



    • I have built a few sites with 960gs now and there are some things I really like about it. Especially not having to worry about floats and alignment. But I’m not a big fan of the extraneous markup. I really want to try Less and Twitter’s Bootstrap but I haven’t had time yet. Like you, I want to try out some of the responsive techniques but again, no time. I may just set aside one evening per week to just tinker with new technologies.

      I do recall YAML being pretty cool in the adjustable approach. I can’t remember the details though. On my long list of things to do, is to keep adding new framework reviews in the hopes of covering just about all of them. That article has been really popular – hopefully because it is useful to developers.

  3. I’ve used YAML on a couple sites. It’s now on version 4 which is responsive. Seems pretty slick but there is a little bit of code bloat.

Comments are closed.