Wednesday, August 20th, 2008

The lessons of CSS frameworks

Category: CSS

Jeremy Keith has been doing a great job blogging An Event Apart, and his writeup of The Lessons of CSS Frameworks by Eric Meyer caught my eye.

Eric took a look at the most popular CSS frameworks (960, Blueprint, Content With Style, That Standards Guy, YAML, YUI, Elements, Tripoli, WYMStyle) and talks about choosing one…

Let’s get one question out of the way, the question “which one is right for you?” Answer… none of the above. It’s like templates. There’s nothing wrong with templates but you don’t put together your client’s site based on a template, right? They can be a good starting point for ideas but you do your own designs. If you’re going to use a framework, it should be yours; one that you’ve created. You can look at existing frameworks for ideas and hack at it. But the professionals in this room are not well served by picking up a framework and using it as-is.

Eric put together a grid of features and which frameworks support those features. Every framework does reset, colours, and fonts. The fact that every framework has a reset is evidence of the frustration we all feel with the inconsistencies between browsers. The rules for colour tend to be much more minimal. Font styling, on the other hand, is more fully-featured generally. Whereas the colour might just be set for the body element, font sizes and faces are specified throughout. Usually that font face is Helvetica. Most frameworks steer away from trying to style form elements. Almost all of them do layout, usually combinations of columns. Four of the nine frameworks included print styles. Three of the nine included hacks.

After using a framework on Google Code, I can definitely say that they add a lot, and can take some of the pain of out CSS.

Posted by Dion Almaer at 10:56 am

4.1 rating from 15 votes


Comments feed TrackBack URI

They’re great for prototyping, but not so great for high traffic sites like the Google front page.

Comment by LeoHorie — August 20, 2008

I think these frameworks came out of lessons learnt from building a large site that has multiple column layouts in different section of the site.

These are probably quite useful for intranets where they can trade off some off the performance issues.

Comment by mancjew — August 20, 2008

I don’t see the performance issues being that great. If the framework is minified, compressed, and cached the added load over the wire is reasonable and isolated to the initial load. Combining this with optimized stylesheets for common landing pages for your site and delayed loading of site wide styles it is possible to hide potential usability performance issues behind a page that is completely rendered from the user’s perspective. Also with a well thought out CSS framework it is possible to reduce the number of declarations in your site styles, and this can offset the added load over the wire added by a CSS framework.

Comment by jpiperkerr — August 21, 2008

Leave a comment

You must be logged in to post a comment.