YUI grids extension
Written at 17:45, on Tuesday 11 September 2007. Tags: webdesign .
Despite the extra required <div> tags, I regularly use the Yahoo! UI grids framework. This provides several advantages when buidling multi-column layouts with CSS. Besides speedy development and source-order independence, it gives you a lot of flexibility when creating your site. More practically, it's extensively tested in A-grade browsers which includes the ancient, but still widely used Internet Explorer 6). Lastly, they're almost completely driven by classes, which means you can add your own, semantically chosen, id's.
The default widths provided can be used for pixel-precise layouts while maintaining font-size based scaling, but there's one curious thing about the default grids that has always bothered me. For the left sidebar, they provide widths of 160px, 180px and 300px, while for the right sidebar, they provide 180px, 240px and 300px. This asymmetry has bothered me long enough, so I whipped up some code for two additional sidebar configurations: the left 240px sidebar, and the right 160px sidebar.
You should be able to add the following code to any release of the grids.css:
/* yui-t8: 240 on left */
.yui-t8 #yui-main {
float: right;
margin-left: -25em;
}
.yui-t8 .yui-b {
float: left;
width:18.4608em;
*width:18.016em;
}
.yui-t8 #yui-main .yui-b {
margin-left:19.4608em;
*margin-left:19.016em;
}
/* yui-t9: 160 on right */
.yui-t9 #yui-main {
float: left;
margin-right: -25em;
}
.yui-t9 .yui-b {
float:right;
width:12.3207em;
*width:12.0106em;
}
.yui-t9 #yui-main .yui-b {
margin-right: 13.3207em;
*margin-right:13.0106em;
}
I tested them in the major browsers and it seems to work really well (it would really surprise me if they didn't, since I used the exact same measurements as in .yui-t1 and .yui-t5).
Add comment. (5 total) | Permalink
This is great. Thanks for sharing them.
The “preset templates” we offered initially were ones determined to be used most commonly after we audited most of our (y!) sites, and other sites. But I do agree with you that the asymmetry is strange. I think I’ll probably include the rest of the permutations in the next release of YUI Grids.
Thanks again,
Nate
It would be great if these presets would be included next release, thanks!
It would also be great if Yahoo provided a way to “zero out” the margins between columns. From a visual design perspective that would be great addition to an already great framework.
Well done!
Hey,
Nice addition to YUI, I was using it initially, then decided I actually need something like 210px on left side… Could you please tell me how to do that? I mean, what calculations I need to do with ems etc.?
Post new comment