Raible Designs

Yahoo's Grids CSS

When I first saw Mike Stenhouse's CSS Framework, I was very impressed. It's hard to believe it's been a year since I first saw it, and only now am I integrating it into AppFuse. It figures that the week I'm implementing it, Yahoo comes up with something better: Grids CSS. Thanks to Jacob Hookom for e-mailing me the link.

The features of Grids CSS include:

• 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

This is obviously a better solution than the CSS Framework, especially since it seems to be well-documented and allows source-order independence. However, it suffers from a similar problem: there's a lack of good-looking designer-styled templates that showcase how cool this library is. There is hope though, Andreas Viklund (a well-known open source template designer) is talking about a Modular CSS Template. The question is: will he re-use Yahoo's Grids CSS or invent his own?

[Yahoo's Grids CSS] is almost exactly what I was working on - but much smaller and probably better than I would have done it. The main difference is that I added a few extra layers to the cake: Make-up (layout-wide styling for typography, forms, headers, links and so on), Colorscheme (just what it sounds like) and Backdrops (background images). Designers can add each layer separately. If you have a site based on the template and you want to change the styling - add a new Make-up. It is a matter of cutting and pasting blocks of code into the CSS, even a beginner with no CSS design skill can do that. If you want to use different colorschemes for different pages - just add more colorschemes and call it from the colorscheme class of each page. One line of code to change, and the effect is very obvious?

It's cool to see there's lots of work going on in this space. While AppFuse 1.9.2 will include the CSS Framework, there's nothing stopping us from using a different solution for 2.0. I'm leaning towards moving to Yahoo's solution, but it's likely I'll be heavily influenced by Andreas' work in this space. Of course, since Yahoo's library is open source, it might make sense for Andreas to simply contribute to this project and improve what they've already done.