25 Apr 2007
I wanted to mention a simple little tool that has saved me hours. The Yahoo! UI CSS Foundation is actually three separate CSS files:
Reset,
Fonts, and
Grids.
Reset removes all of the default styling from the browser. Even with out add a stylesheet to you website, the browser (Internet Explorer, Firefox, Opera, Safari) has already add some default styles. This is why headers are bigger and bolder than text in a paragraph. But, amazingly enough, the default styles vary from browser to browser.
Reset CSS is great because it removes all of the default styling and let me, the developer/designer, go and set the style that I want. I can be sure that some default style won't creep in and ruin a good design.
Where
Reset removes all of the default styling, the
Fonts CSS sets a level playing field and uniform approach to font sizing. With the various ways to size fonts (px, pt, em, %), it shouldn't be any suprise that once again the various web browser handle these differently. The Fonts CSS gives you a uniform way of setting the base size of the document and adjusting all other font sizes as a percentage of the base size. It turns out that, while requiring a little bit of math, this is super easy and keeps things looking good.
While I start every project with the Reset and Fonts CSS, it is the
Grids CSS that really is the time saver. Now that using tables for layouts is so 1990's, coming up with cross-browser compatable grid layouts can be a challenge. When you combine it with the decisions of fixed-width or fluid layouts, sidebar positioning on the left or the right, semantic markup, and search engine optimization, grid layouts can make you scream and run. The Grids CSS gives you three tools in one: fixed-width or fluid layouts, sidebar size and positioning, and grids. I won't get into all the details, but you can play with the
Yahoo! Grid Builder or check out some of my
latest projects to see it in action.
To top it all off, there is one combined file that is compressed and includes all three CSS components. All you have to do is
add a link tag pointing to the latest version and you are off and running. Now you can focus on more important things, like making your application functional.
