YUI Grids vs Blueprint (CSS Frameworks)
on March 24, 2009
CSS Frameworks have been around for a while now, and while there are many detractors, the benefits they provide make them an attractive option for speeding up development time, as well as simplifying complex layouts.
After pouring through this Top 12 list of CSS Frameworks, the two that stand out the most are Blueprint and YUI Grids. I’ve boiled it down to these two because of their wide spread popularity, and there are one or two things about each that I really like. Deciding between the two though, will be a tougher pick.
YUI
YUI has quite a few things going for it. The documentation is superb, relative to other frameworks, and they lay out their reasons for structuring their system the way they did. They combat the non-semantic argument by claiming their grid system is a microformat which attempts to define the structure.
The biggest advantage YUI offers is em based layouts. I’ve long subscribed to sizing in ems over pixels and YUI would help continue that.
Blueprint
Blueprint too, has quite a few things going for it, but the Blueprint Grid CSS Generator might be the slickest tool for setting up a flexible grid system that fits your current project. This tool will create a new version of the grid.css file that replaces the standard file downloaded with the framework. It also creates a grid.png file that can be used in Photoshop comps to help ensure everything lines up properly.
The Differences
While both have advantages, they each have shortcomings that the other just happens to overcome. I haven’t yet found a Photoshop template for use with YUI. That may be because it doesn’t use set columns for layout, but some kind of template, or directions for newbies on how best to create one would help.
Blueprint uses pixels to set sizes for layout. This makes elasticity not happening.
Conclusions?
None yet. Daily, it seems I vacillate between the two.
Do you use a CSS framework? Which one, and why?
UPDATE: After trying out both on a recent project, I’ve gone with YUI for the most part, but have swiped a couple of the css files that come with Blueprint, namely the forms.css and typography.css. These give me a nice start on forms and fonts as well as extra control.
UPDATE #2: Frustration with YUI’s stylesheets not being self hosted has made me rethink my choice. Since I’m already using some of Bluprint’s elements, I’ve decided to just use it outright.
UPDATE #3: After discovering Justin Tadlock’s Hybrid framework for WordPress, I’ve pretty much given up on grids all together. Hybrid doesn’t really replace a grid, but it turns out most of my layouts are not complex enough to warrant a grid, and it ends up adding unused elements and needless complexity.
None of the frameworks out there really worked for me, they were too static. But I did learn a lot from them all. So I just created my own framework instead that uses php to do cool stuff like grids, image replacement, math and whatnot. 🙂
It\’s similar to Blueprint in its style though.
http://github.com/anthonyshort/csscaffold/tree/master
You\’ve seen the YUI Grids Builder, right? Doesn\’t build you a custom CSS file but that\’s because you should be using the hosted version anyways. It\’s a great starting point to quickly rough out the major sections of a page.
http://developer.yahoo.com/yui/grids/builder/
@Anthony – Thanks for the link to CSScaffold. I\’m not quite sure about adding php to my css workflow, but I\’m always up for new things. I\’ve downloaded it and will check it out.
@Pat – I have seen the YUI Grids Builder, which is another reason I\’m still looking at it.
I should probably use each one in a separate project… it\’ll be more work getting to know them, but perhaps worth the effort in the long run.
I never did find a photoshop template for YUI.
This was an issue for me in some respects, but ultimately I ended up going with Blueprint for (what I perceived as) its flexibility.
For the most part, I\’ve actually given up on using grids as most of the layouts I create are not complex enough to warrant them. I\’ve updated the article to reflect both of these things.
I\’ve tried YUI and I wasn\’t really impressed with the ease of breaking the design. I\’ve been trying BluePrint for a day now and it really made things easy. This product is working for me because it\’s flexible and the layout will do what I want it to do.
This is the same reason that I ultimately dropped YUI for Blueprint as well.
I have been using a tool for forming BluePrint tempaltes called Boks.
Official statement:
\”Boks is an AIR application (so it works on Windows, Mac and Linux) that provides a User Interface for Blueprint CSS\’s framework. It\’s been designed for those who think the Grid System is good but never really took the time to give it love.\”
here is the URI:
http://toki-woki.net/p/Boks/