[Web4lib] CSS: YUI Grids

[Christopher Barr]

I thought this would be good to share as a couple of people on the list are looking for CSS solutions.

On the CSS front, I've started using Yahoo's Grids Framework with the Vufind interface (http://www.vufind.org/demo/). Because I want the HTML to easily accommodate institutions that don't want to completely rewrite the CSS & HTML, I am finding it to work pretty well. Among other things you can swap the columns and change the width by changing one class in the main wrap. Also, it is source order independent, meaning I can keep my content at the top of the HTML file and the menus at the bottom, despite where they are on the screen. I also really like how the actual width is based on ems not pixels, so when you increase the font size the whole page zooms rather than just the words in the columns.

Here is what the framework supports:

"The foundational YUI Grids CSS file offers three preset page widths, seven core templates, and the ability to nest subdivided regions of one to four columns. All told, the file offers almost 200 preset layouts and an unlimited number of custom permutations that work across all A-grade browsers, all for less than 2.5kb of minimized file weight. Other features include:

* Supports fluid-width (100%) layouts.
* Supports preset fixed-width layouts at 750px and 950px.
* Supports easy customization of the width for fixed-width layouts.
* Flexible in response to user initiated font-size adjustments.
* Template columns are source-order independence, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
* Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
* Automatically centers within the viewport pages less than 100%.
* Offers full A-grade browser support."

The downside is that I find myself adding a few extra divs here and there where I might not otherwise... which makes me wonder if I am making some mistakes. There is still some cleaning to do on the VuFind site, but overall YUI Grids have made things a lot more flexible. For small sites it would be overkill, but for larger sites I think it would work great once you get your head wrapped around it.

Would love to know if anyone else has tried this out and what they think.

You can find all of the YUI Grids documentation here: http://developer.yahoo.com/yui/grids/

Cheers,
Chris

------------------------------------
http://library.villanova.edu
http://www.vufind.org