CSS Frameworks

Lately I have been experimenting with the YUI Library CSS Tools and Blueprint. Both are an open source CSS framework, which as Blueprint so gracefully puts it "gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid and sensible typography...".

After experimenting with both, I have continued to lean towards YUI's framework. It seems to be a little more matured and well-known, so I will focus on YUI.

YUI CSS consists of four components:

1. CSS Reset which removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across common browsers.
2. Base CSS complements the other three components by applying a consistent style foundation for common HTML elements across common browsers.
3. Fonts CSS offers cross-browser typographical normalization and control. Basically your fonts will now have consistent sizing and line-height, provides appropriate cross-OS font-family degradation paths, and supports user-driven font-size adjustments for accessibility.
4. Grids CSS offers common preset page widths, templates, and stackable and nestable regions. This allows easy programming for non-table layouts that takes common features into account such as common ad dimensions specified by IAB.

So what benefit do I see from using a CSS framework?

I can now reasonably know that my code will look and feel the same across common browsers such as Internet Explorer, FireFox, Safari, Chrome, and Opera. It is always most annoying when you have something positioned perfectly in IE, but just to find that FireFox thought it should actually be 10 pixels down and 10 pixels right. Or just the opposite. Ahh!

I can now also speed up my non-table layouts using the Grids CSS. Most of my websites can use the common layouts saving me a lot of time programming CSS layout, tinkering with those darn floats, and wondering how the margins and paddings will affect the layout in each browser. And of course, I can never do something simple, so it's a good thing it's easily customizable too!

Quirks

I have run into a couple of quirks though. For example, putting a background image or color on the body tag will only expand the background vertically until your content stops instead of the entire visible page. To fix this however, move the background css property to the html element instead of the body element.

The other quirk is table formatting. It puts a border by default around each cell, but in all reallity with a table-less layout, this is probally a smart format. It's also easily modifiable in your stylesheet.

I look forward to any comments on your experiences with CSS frameworks.