Lately, I have been taking a second look at using CSS frameworks. I’m a firm believer in the concept of choosing the right tool for the job based on the project constraints. And what better way to quickly evaluate a set of tools than a comparison chart!
As of this writing, there are exactly eight gajillion CSS frameworks available on the internet. Today, we are comparing the top three—all of which are built on the same basic foundation of features: reset, grids and basic typography.
| YUI CSS | Blue Print | 960.gs | |
|---|---|---|---|
| Fixed Page Width (in pixels) | 750, 950, 974 | 950 | 960 |
| Fluid Layout (width=100%) | yes | w/plugin | w/plugin |
| Prebaked Layouts | yes | no | no |
| Columns | fractional microformat | 24 | 12 or 16 |
| Design Templates | no | no | Printable PDF, Fireworks, Illustrator, OmniGraffle, Photoshop & Visio |
| File Size (minified) | 1.5K | ~14K | 3.5K |
| Hosted Minified Version | yes | no | no |
| License | BSD | Modified MIT | Dual GPL/MIT |
| Vertical Rhythm Styles | no | yes | w/plugin |
| Print Styles | no | yes | no |
| Source Order Independence | yes | no | no |
| IE compatibility | v6+ | v6+ (typography issues noted) | v6+ (HR spacing issue noted) |
| IE conditional style sheet | yes | no | no |
| Maintains Separation of Data and Presentation Layers | sort of | no | no |
Impressions
YUI CSS
Heavily scientific. Yahoo engineers have created a system that is based on a layout microformat which has its roots in Yahoo’s own landscape of sites. As a result, you have baked in support for standard ad widths and the evolved maturity that comes from the extensive user experience testing Yahoo has performed. Be prepared to print out some reference sheets, however. The drawback of this system is that it requires you to learn the microformat and the idiosyncrasies that come with it.
Blue Print
Typographically sound. Blue Print has a strong focus on type. So much so, that the author once publicly mused about releasing a lite version of Blue Print that removed the grid, allowing it to be used in conjunction with 960 GS. While both Yahoo and 960 GS both seem to take the same philosophy on type styles—offering it for rapid prototyping reasons but recommending against production use. Blue Print goes the opposite direction which to my mind makes it more of a prototyping tool than one for production use. It is also heavier than the others but you shouldn’t need a chart to navigate it.
960 GS
Easy going and friendly. 960 GS was created for one reason—the grid system. As a result, it is small and tight and incredibly easy to use. Perhaps its most brilliant feature is not even part of the framework itself—design templates! The trick to using a grid system is getting the designer to conform to it. 960 GS offers design templates for a wide range of software and even printable sheets making it easy for designers to adhere to the system. Brilliant.
Conclusion
At this point, I would probably say that 960 GS is suitable for most projects. If I had a project that called for flexible page widths, ad support, or was performance critical, I would lean on Yahoo. If I needed stronger type support, I would look in Blue Print’s direction.
What about making complete list of all the Frameworks? There many new CSS Frameworks I build (Emastic, Malo, The Golden Grid) , there is also the old YAML.
@Vladimir: There are many publications that provide more exhaustive coverage of the CSS framework landscape. Check out: http://www.smashingmagazine.com/
Glad to see this blog up and running. Got you in my RSS feeds now.
From design point of view, the issue I’ve had with 960.gs is that the structure they offer doesn’t give me enough margin. Even with the 16 I can work around it to some degree, but. . . and keep in mind this is from a print designer who’s made the move to doing more web work. . . it feels like a limitation.
Granted I haven’t worked with YUI CSS. Largely because the learning curve looked like the worst part of Everest, but I’ll check it out. Keeping in mind I still like sketching rough layout ideas on grid paper. . . .
I’ve found this to be a great asset for me from a design perspective. http://www.thegridsystem.org/
When I get stuck or just need to look at things from a different angle, I’ll pop in over there and see if I get inspired.