YUI CSS Framework Tutorial

Accidentally,  I discovered iGoogle is using YUI CSS framework, being curiosity I've been digging around it, found that YUI CSS framework is very powerful, It's a very useful because has a lot of possibilities of grids and it also has a online grid generator to help fast start.

The CSS Frameworks are not for CSS starters (newbies)! They are for people who know CSS but want more organized approach.



Positive/negative aspects of the CSS frameworks
Positive:

1. - They usually have multi - browser support.
2. - If the CSS Frameworks are public and have community support a lot of bugs and problems are fixed. Also you have a lot of code examples.
3. - They usually have 80% of all the CSS code that you will ever need.
4. - You can learn a lot from the CSS Frameworks .

Negative:

1. - There will be some CSS code from the framework that you will never use.
2. - You need time to learn how the CSS framework works.
3. - Bug fixing is not always simple (first you have to learn how the framework works)
4. - It’s not so “semantic” (class=”menu-left” – semantic v.s class=”div-xyz” not so semantic)

Here I'd like to introduce this tutorial to you. Done by Mike Sweeney, who is a web developer from Las Vegas, in the following tutorial, Mike shows us how to utilize the YUI CSS Framework to cut down on the time and stress it takes to produce a good layout.

What is YUI?

The Yahoo User Interface library is comprised mostly of Javascript utilities and controls to help front-end developers create a rich user interface. It also comes with a great CSS framework to make developing websites a lot faster. This CSS framework is what we’ll be focusing on today. It’s lightweight (less than 6KB when minified), easy to use, and most importantly, it works with all major A-grade browsers.

Why use it?

Any good UX designer will tell you that one of the keys to making your website easy to use is consistency. Your goal should be to not make users use more than the necessary brain power it takes to understand the point you’re trying to get across. People are used to seeing sites designed in certain ways and the YUI CSS Framework covers these basic design patterns without having to make you think too hard as well. Everybody wins.

This doesn’t mean that Yahoo is trying to make everyone design the way they say, however. They leave plenty of room for customization for the “wild at heart” amongst us that want to dish out the newest interesting custom design pattern. More on this in a bit.

Getting Started.

The first step is to get the YUI CSS Framework. I gave you the direct link for it here, but I would also recommend taking a look at the YUI Developer Site. If you head to that page, on the left menu there’s a navigation header labeled “YUI Components”. Most of those are the YUI JS utilities but if you scroll down, you’ll see that the last four sub links are for CSS. There’s a lot of great information there for you to check out including a 42 minute video that explains probably more than you’ll want to know about how the CSS Framework works (well maybe not more).

You may have noticed when you clicked the link that the name of the file is “reset-fonts-grids.css”. This is actually a combination of the three main components that make this all work all combined into one minified CSS file for your convenience. If you find yourself asking whether or not you can download them separately, the answer is yes…however they are a bit dependent upon each other, so use caution. If you’re using another reset file such as the famous Eric Meyer’s Reset CSS, you can (most likely) safely use that instead of Yahoo’s version, but why try and fix what isn’t broken? Now when it comes to the other two components, fonts and grids, grids relies on the fonts css to declare the proper width for an “em”, which grids uses for just about everything.

Reset

If you’re not already using a reset css file, I definitely recommend you seriously look into using one – even if you don’t want to use YUI. Each browser has it own set of defaults when it comes to margins, line-heights, padding, etc. that can make life tough when trying to code out your layout. What reset does is simple, yet extremely useful. It takes away all of the browser defaults and sets them to all use the same stuff. The days of using “*{margin: 0; padding: 0;}” are over. It’s time to get with the program.

Fonts

As described above, the fonts portion defines the width of the “em” for which everything is based on. It also, however, takes away all of the browser font defaults and sets every relevant html tag to use a font size of 13px, a line-height of 16px, and all but the pre and code tags to use the Arial font (pre and code use the monospace font family). What does this mean for you? It means you’re going to need to define the font sizes and/or families you’re going to want on your website yourself. Don’t look at that as a bad thing though, you’re most likely doing this already (or you should be). This, like reset, takes away the differences in the default styling of the browsers for a consistent look and feel. Yahoo provides a recommended way to define your font sizes using the percentages defined on their fonts page.

Grids

Now this is where things start to get fun. YUI makes it very easy to layout everything on your site without having to use those cumbersome tables. Let’s take a look.

Setting up the page.

YUI breaks up a page in a very familiar way to most designers. You’ve got your wrapper div, which also determines the width of your site. And within that you’ve got your header, body and footer. Pretty easy right? Here’s how it looks.

<!DOCTYPE html>
<html>
 <head>
  <title>My first YUI Layout</title>
  <link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css" />
 </head>
 <body>
  <div id="doc2"><!--Wrapper div -> doc, doc2, doc3, doc4, or doc-custom-->
   <!--These three are not required to use if you prefer something else, but they're pre-defined for you-->
   <div id="hd"></div>
   <div id="bd"></div>
   <div id="ft"></div>
  </div>
 </body>
</html>

We’ll start by focusing on the wrapper div. YUI offers you four different standard widths:

doc – 750px
doc2 – 950px
doc3 – Fluid
doc4 – 974px

And for all you “rebels” out there, you can create a custom width in your own stylesheet using the doc-custom wrapper. It’s a good thing to keep these widths in mind when designing your site. It will make your life much easier. The rest of the document is pretty self-explanatory.

Templates.

Now that we’ve got the basic layout of the page, we’re going to add content using yahoo’s predefined template classes. The concept behind the templates is extremely easy. You’ve got two main blocks of content that you want to position within your body (bd). You’re going to put all of your content within one of these two blocks. You define a block simply by giving the div a class of “yui-b”. Once you’ve done that, you need to tell YUI which block is the main block for content (i.e. the wider block) by wrapping it in a div with an id of “yui-main”. The reason you need to do this is some browsers don’t support the pseudo class of “:first-child”. And by some, of course, I mean IE.

...
<div id="bd">
 <div id="yui-main">
  <div class="yui-b">
   ...some content here...
  </div>
 </div>
 <div class="yui-b">
  ...some content here...
 </div>
</div>
...

This tells YUI which block of content is the main focus of the site. Regardless of whether the main content block is to the left or to the right of the sidebar, you can always put it above the less important code (the sidebar). This way you can keep your best content at the top of the source (helps with SEO).

Now that we have defined the blocks of content, we need to tell YUI where to display it. That’s as simple as adding a template class to the wrapper div (the doc). Yahoo has provided six different pre-defined layouts for use:

.yui-t1 – Two columns, narrow on left, 160px
.yui-t2 – Two columns, narrow on left, 180px
.yui-t3 – Two columns, narrow on left, 300px
.yui-t4 – Two columns, narrow on right, 180px
.yui-t5 – Two columns, narrow on right, 240px
.yui-t6 – Two columns, narrow on right, 300px

Yahoo has chosen these layouts as one of the most common things found in sidebars are ads and most ad networks have a consistent set of sizes for the ads they serve. Wouldn’t you know it? Most of the them match up to the template sizes YUI provides.

Let’s continue by adding the template class of “yui-t6″ to our document wrapper as it’s a fairly common layout.

<div id="doc2" class="yui-t6">

Now add some dummy text in there and look for yourself. Voila! You have a layout.

Special Grids.

Now what if you don’t want to use any of the pre-made templates? Say your design calls for 3 columns instead of two. Or maybe you want to add something with the template you created that needs to be broken up into sections? Not a problem. YUI has a grid layout system that pretty much covers any custom block layout you want without the need to use tables.

The Grid system works very similar to the templates shown above. You have your outer div (the grid), and your inner divs (called units) which work very much the same as blocks (remember .yui-b?). Let’s take a look at how to set one up.

<div class="yui-g">
 <div class="yui-u first">
  ...some content here...
 </div>
 <div class="yui-u">
  ...some content here...
 </div>
</div>

This will create a grid with two equal width blocks that will fill whatever container they are inside. The only real thing to take note of here is that whichever div you want to appear first (on the left), make sure to give that div a class of “first” along with the unit class.

Similar to templates, there are six different types of grids you can use:

.yui-g – Standard grid, 1/2 – 1/2
.yui-gb – Special grid, 1/3 – 1/3 – 1/3
.yui-gc – Special grid, 2/3 – 1/3
.yui-gd – Special grid, 1/3 – 2/3
.yui-ge – Special grid, 3/4 – 1/4
.yui-gf – Special grid, 1/4 – 3/4

Now the thing that makes this great is that you can also nest grids as much as you’d like. Want a grid that displays in quarters as opposed to halfs? Let’s check out how to do that.

<div class="yui-g">
 <div class="yui-g first">
  <div class="yui-u first">
   ...some content here...
  </div>
  <div class="yui-u">
   ...some content here...
  </div>
 </div>
 <div class="yui-g">
  <div class="yui-u first">
   ...some content here...
  </div>
  <div class="yui-u">
   ...some content here...
  </div>
 </div>
</div>

The thing to keep in mind here is that when you nest a grid within another grid, that grid also acts as a unit for it’s parent grid. There’s no need to nest it within a div with a unit class attached to it.

Conclusion

This framework really helps with cutting down on development time and making sure that the more important content is displayed before the rest within the source (great for SEO). If you keep this in mind the next time you design a website, you’ll notice a huge gain on time and quite possibly a relief of the stress of making your website look the way you want without hacking away at it.

Once again I’d like to stress taking a look at Yahoo’s site for YUI CSS, as it’s got great references on how to use this including videos, examples and a nice little cheat sheet so you don’t have to remember everything off the top of your head.

Demo Site
Demo Download