A few weeks ago I set out to compare Blueprint and YUI Grid. I built a page with blueprint. Then built it with YUI2 Grid and then thought about it awhile.
At first I was sold on blueprints CSS. Thats cool, thats tight! It just seemed to be so clever. But when i read the following blog I realized, hey blueprint’s syntax “span-4, span-20” was putting the implementation into the markup and why is that much different than doing
which we all run in horror when someone uses a table to layout a page.
I quote from:
If it is important enough to define your grid layout in the markup, then you should be using a table. The whole point of CSS layouts is to separate the layout information from the structural semantic markup
.. yuck!! I much prefer YUI2 grid and they have a nifty generator layout generator. I like that, I want to be able to define my basic layout and get on with life! I don’t want to figure out how many “columns” this is and that. The class names for YUI are kind of non-intuitive (ie: yui-t7 and yui-g), but thats ok. They do use “hd” for head, “bd” for body, and “ft” for footer. So that is good enough for me!
You can easily assign accessibility tag of “role” to your layout too in the generator, by clicking on the regions drop downs and selecting things like banner, navigation, main, etc.
The following is a 75/25 two column layout
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
And the same converted to haml:
1 2 3 4 5 6 7 8 9 10 11 12 13
Pretty slick, huh?