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).
Comments closed | Permalink
