Save Yourself Hours of CSS Frustration

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.
Amtrak Acela
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.
Dual Guage Tracks
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.

blog comments powered by Disqus