Yogi Berra once said "it's deja vu all over again", and he was right. For each HTML/CSS template I build I find myself dealing with the same issues. How do I clear everything from that floated sidebar? How do I fix the margin and padding differences between IE and Firefox?
I recently tried the Yahoo User Interface (YUI) Library's Reset, Fonts, and Grids CSS and I'm here to tell you that YUI makes many of those CSS deja vu tasks things of the past.
Yahoo! developed YUI Reset, Font, and Grids CSS to work with A-grade browsers. Yahoo! uses these style sheets on their own sites, some of the most popular in the world, so you can rest assured that they work. Here's an overview of what you get.
YUI Reset and YUI Fonts CSS
YUI Reset and Fonts CSS create "a level playing field" by zeroing out browser's built-in styles. Margin, padding, and even list styles are removed. Headings are sized to the default font-size and look no different than normal paragraph text. A YUI Reset/Fonts styled page may look odd at first, but this "zero-out" approach enables an additive development approach, just build your styles on top of the YUI CSS foundation.
You can download the YUI CSS files or call them directly from the Yahoo! site. The following link includes all YUI foundation CSS.
<!-- Source File -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.2/build/reset-fonts-grids/reset-fonts-grids.css">
Once you've linked to the the foundation style sheets, create your own style sheet to size your headings, add a margin-bottom to paragraphs, and style lists. Be prepared to be amazed at how consistent your pages look across the board in IE, Firefox, Opera, and Safari.
I was able to quickly cut an existing style sheet's size in half! No more JavaScript style style switchers and I haven't needed to use conditional comments to target IE specific hacks.
Although the YUI CSS style sheets aren't terribly large, Yahoo! provides minimized versions of the files for optimal page load times.
YUI Grids
YUI grids takes the hassle out of creating CSS-driven layouts. Grids consists of several CSS id's and classes that can be mixed and matched to create a variety of page layouts. You can create fixed or fluid-width layouts quickly and Grids also provides 7 basic page/column layouts. It was easy to customize one of the stock layouts to create just what I needed.
The Yahoo! Developer network provides step-by-step instructions, several useful examples, and handy cheat sheets to help you get started. I've already built several page templates with the YUI style sheets and will feature what I've done in upcoming posts.
Links
Source:
http://2tbsp.com/node/35