Yahoo CSS Grids
10 May 2006
Two days ago Yahoo released an update to their design patterns that features a cool way to build a buttload of layouts using what they call Grids.
What's great is that you can easily convert your HTML into one-column, two-column, four-column by just changing the classes of some of the divs. What's more, the grids and all resultant layouts are supported in all the major browsers--they're A grade supported.
I just ran the CSS validator on one of the layouts and had a few errors, so I'll be looking into this a bit more, but it looks promising. Actually, it looks like an IE hack.
From Yahoo (I especially like the 100 layouts with one 1.82KB CSS file part):
- Full A-grade browser support
- More than 100 page layouts with a single CSS file at just 1.82KB
- Flexible scaling with user font-size adjustments
- Min-width enforcement, regardless of font or viewport size (except IE; helper JS under consideration)
- Abundant DOM hooks for CSS and scripting flexibility
- Source-order independence, allowing you to place your most important body content first in your HTML document
- Self-clearing footer (no matter which column is longer, the footer stays at the bottom)
- Centering within the viewport by default
- Forward-compatibility as standard page structure evolves to claim more screen real estate
- Accommodation for IAB Advertising Units