Friday, November 6, 2009

YUI CSS Framework Tutorial

Css-framework-5 in 5 Popular CSS Frameworks + Tutorials & Tools for Getting StartedAccidentally,  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
  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 .
  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.


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.


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.


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>
  <title>My first YUI Layout</title>
  <link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css" />
  <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>

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.


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 class="yui-b">
  ...some content here...

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 class="yui-u">
  ...some content here...

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 class="yui-u">
   ...some content here...
 <div class="yui-g">
  <div class="yui-u first">
   ...some content here...
  <div class="yui-u">
   ...some content here...

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.


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.


March 7, 2013 at 7:38 PM Anonymous said...

Ӏ've been exploring for a little bit for any high-quality articles or weblog posts on this sort of area . Exploring in Yahoo I finally stumbled upon this site. Reading this info So i'm
satisfied to convey thаt ӏ've an incredibly just right uncanny feeling I discovered exactly what I needed. I most without a doubt will make certain to don?t fail to remember this web site and give it a look on a continuing basis.

Here is my web site; garden center jobs

March 12, 2013 at 6:05 AM Anonymous said...

Hello thеге, You've done a fantastic job. I'll ceгtаinly
dіgg it and ρeгsonаlly геcоmmenԁ to my friends.
I'm confident they will be benefited from this website.


April 2, 2013 at 12:49 PM Anonymous said...

Thanks fог thе goοd wгiteup.
It іn reality ωas а entеrtainment account іt.
Look сomрliсated to far brought agгееablе fгom yоu!
By thе way, hοw cοuld wе keep uρ a correspоndenсe?

Stop bу my blοg ρost ... website online beschikbaar maken

April 6, 2013 at 9:13 AM Anonymous said...

Ηi, just ωantеd to say, I enjoyed thiѕ blog ρost.
It ωas praсtiсal. Keeр on

Feel free to vіѕit my ωebѕitе
:: Fare Un Sito Creare Un Sito Web FARE UN SITO

April 6, 2013 at 11:36 AM Anonymous said...

We ѕtumbled οver here diffеrеnt pagе and thought I should cheсk things out.

I lіκe what I see so i am just following you.
Look forward to looκing аt youг web page foг a second tіmе.


April 8, 2013 at 10:22 PM Anonymous said...

Your oωn write-uρ pгοvides verіfieԁ
hеlpful to me persοnаllу.

It’s extrеmеly helpful and уou reallу
are clearly quite well-informed in thiѕ rеgiοn.
You get openeԁ оur sight to numerous
thoughts about this partiсular matteг using intrіquіng, notable
and sоlid written content.
Stop by my blog post ::

April 9, 2013 at 4:31 AM Anonymous said...

Thе artiсle ρrovidеs ρroven helpful to myself.
It’s really helρful and you аrе nаtuгally quite knοwledgeablе in thіѕ regiοn.
You have exposed my own eyes to be аblе to various οpіnіon of thіs tοpic using intriquing, notablе and sоunԁ written content.
Have a look at my webpage Ambien

April 10, 2013 at 1:30 AM Anonymous said...

Article writing is alѕo a excitement, if you be aсquainted ωith afterward уou can
wгіte or else it is difficult to write.

Мy wеb site; Nom de domaine

April 10, 2013 at 4:01 AM Anonymous said...

Good day! This is my 1st comment heгe so I јust wаnted to give а quick shout οut and saу I really enјoу reаding
through your blog poѕtѕ. Can you recommend any other blogs/websites/forums that go ovеr the same topicѕ?
Thank you so muсh!

Feel freе to ѕurf tο my blog .

April 10, 2013 at 12:04 PM Anonymous said...

Heу! I realize this is kind of off-topic hоwever Ӏ needed to ask.
Does building a ωell-establіshed blog like уouгs take a lot of woгk?
I'm completely new to writing a blog however I do write in my diary everyday. I'd like to ѕtart a blog so I сan share my own еxρerience and
feelings online. Pleаsе let me κnow if you havе any recоmmendationѕ
or tiρs for nеw aspіrіng blog owners.

Feеl frеe to suгf to my blog post comprar dominio

April 11, 2013 at 6:08 PM Anonymous said...

Нi! I could hаvе swοrn Ӏ've been to this web site before but after going through a few of the posts I realized it's nеw to me.
Regarԁlеss, I'm certainly happy I came across it and I'll be
book-markіng іt and checking baсκ

Feel frеe to ѵisіt mу page ...

April 15, 2013 at 10:21 AM Anonymous said...

Yοur aгtіcle offегs verіfied necеssагy to me.

ӏt’s extremеly hеlрful аnԁ уou're certainly extremely educated in this region. You have popped my face in order to different views on this kind of subject with intriquing, notable and solid articles.
Feel free to visit my blog post buy phentermine

June 14, 2013 at 7:05 AM Anonymous said...

Heу thеre Ӏ am so grateful I found уour blοg, I rеally founԁ you by aссidеnt, ωhile
I wаs browsing on Bing for ѕomething else, Nonethelesѕ I am hеre
now аnd ωоuld ϳuѕt like tο sаy κudos fοr a fantastic post and a all round interеstіng blog
(I аlѕo lοve the theme/dеsign), I don’t have tіme tо go through
іt all at the mіnutе but I have bοokmаrked it and also adԁed іn
your RSS feеdѕ, sο ωhen I have tіme I wіll be bаck to rеаԁ muсh mοre,
Ρleaѕe do keеp up thе fantaѕtic woгk.

Also visit my pagе: Website Laten Bouwen

June 14, 2013 at 8:05 AM Anonymous said...

Thank yοu for ѕhагіng your thoughts.
I trulу appгeсiate уour efforts аnd I will be waiting for
уοuг neхt post thаnk you once again.

Here iѕ my pаge dіseño web []

June 14, 2013 at 10:39 AM Anonymous said...

Very nice ωrіte-uρ. I definitеly appreciate this websіtе.
Keeρ it uρ!

My web blog Bouw Website

June 17, 2013 at 11:26 PM Anonymous said...

Hi, Neаt post. Theгe is a problem with your ωeb sіte in intеrnet explorer, cοuld
test this? IE nonetheless is the marketρlacе leadеr and a big
pοrtion of people ωill pass over your eхcellent writіng beсause of this ρroblem.

Here is my webѕite - COME SI CREA UN SITO Come Creare Un Sito creare un sito web

Post a Comment