We’ve been using the YUI CSS framework for a lot of our recent work including this site as well.  The YUI CSS framework is broken down by Yahoo in four different sections Reset, Base, Fonts, and Grids.  The four sections are available in a number of different formats as either files for each section or a single file with minified versions as well.  For final production we use the minified version that includes Reset, Fonts, and Grids and it’s been recommended to use this file because it’s in it’s smallest possible form and it is available through a permalink from Yahoo.

I had looked at Google blueprintcss for a while as well as YUI CSS and both had it’s pros and cons, but continued to use my own base files that I had been used to working with for quite a long time.  So what actually switched me over to YUI CSS?  I’ve been contracting through SolutionSet for a couple of years now and Nate Koechley from Yahoo came in gave a presentation about YUI CSS and just YUI in general.  It got me thinking that this was a good idea, but was it going to replace my everyday use case files.  It wasn’t convinced until I watched Nate’s video in YUI Theater.

I decided I would try it out and see how well it worked.  I figured if it could handle most cases then it could probably be integrated into my projects.  There are a few restrictions, but I think my clients are pretty open to slight variation if it will improve unification and conformity throughout the site.  In most cases, my clients are pretty flexible and I can convince them that this is a good thing.

So how do you use it?  First you’ll want to download the cheat sheet from Yahoo by clicking the image to the right.  This will help you understand the basics when using the library.  Also it will keep everything in one place so you can easily refer to it as you are building the site. You will want to include this snippet of code in the head of your HTML document:

This is the minified document hosted by Yahoo. This source is a permalink and it’s by version number so it will always be available.

YUI CSS Reset
The way a browser styles document tags is different across browsers.  The YUI CSS Reset function attempts to eliminate those differences in the browsers which will allow you to start with a level playing field.  This is nice and for those of you that have used Reset style sheets before, it helps eliminate bugs you might not see in your development browser of choice that will probably pop up later during QA.

YUI CSS Grids
The YUI CSS Grid selectors create many common layouts in websites today.  If you watched the video, Yahoo kept in mind the standard ad sizes to fit column widths.  This is nice since a lot of the time layouts tend to follow a certain column format and normalizing things isn’t a bad thing.  If you navigate around Yahoo’s different pages you can see this integrated in quite a few sections.  There are variations on look and feel, but it is all based on the standard library.

The basic blog of code that you will start every page with will look like this:

Refer to the cheat sheet for different doc ids for different widths.  Also for customizing the width you can create a custom doc and add that to your style sheet.

Next you will just nest grids inside the grids. There are preset grid units for different sized columns. Refer to the cheat sheet or the Grid documentation on how this works.

YUI CSS Fonts
The font sheet normalizes fonts as best as possible across all browser platforms.  The base is standardized at 13px for 100% and you can use the cheat sheet to determine the font size you want to use on your page.

That’s about it.  I’ve had pretty good success so far with the library so I’ll probably continue using it as much as possible.  If you have any questions or have some experience using the platform please feel free to post a comment.