Net Tuts Plus - Crash Course YUI Grids CSS

8/8/2019 Net Tuts Plus - Crash Course YUI Grids CSS

1/14

if (!plus_member_logged_in()) { $('#leader-board-wrap').show() }

Tutorials\HTML & CSS

Andrew Burgess on Oct 6th 2010 with 1 comment

The Yahoo User Interface Library is a rather extensive set of JavaScript tools for developers. Often leftunnoticed are a few other useful components of the library that will speed up your coding: some CSS libraries.Today, Id like to give you a tour of the YUI Grids CSS library.

Why should you even consider using the YUI Grids CSS library (hereafter referred to a YUI grids)? Whatmakes it stand out? I havent looked extensively at other grids libraries, but I find these things compelling:

YUI grids uses easy-to-remember ids and classes, and clean markup; once you learn it, you could comeback to your code in a month and know which parts are from YUI and what each piece does.

This reduces your load twice: no need to host the file on your server, as well as faster page loading ifthe client has the file cached.

Yahoo has baked in sidebar widths that correspond with the Interactive Advertising Bureaus adguidelines.

h Course: YUI Grids CSS | Nettuts+ http://net.tutsplus.com/tutorials/html-css-techniques/crash-course-

4 10/6/2010


2/14

With multiple templates and the ability to nest page regions, Yahoo claims to offer over 1000 layoutcombination . . . all in less than 5kb.

Of course, YUI grids isnt perfect. Its a bit limiting when it comes to the pre-baked sidebar widths; however,

if they suits your needs, youll save plenty of time, coding, and headaches when laying out your site.

As we begin, here are a few resources that will be of help.

The YUI Grids CSS home page : the place to go after you read this articleThe Grids Builder : a tool that lets you build your page with a few clicksgreat help in getting the thehang of YUI grids quickly!The cheat sheet : a single-page PDF with all the YUI grids conventions

Before we get into the nitty griddy, lets look at the building blocks of YUI grids. There are five differentstructures that you will work with to develop your layout; each of these structures is defined by either an id ora class (usually a class). They are as follows:

Document1.Template2.Blocks3.Grids4.Units5.


4 10/6/2010


3/14

Obviously, your whole HTML file is the document, but in our case, its also the div immediately inside thebody the div that holds it all. This is where you define the width of your site. YUI grids gives you 4 widthoptions: 750px, 950px, 100%, or 974px. These widths arent actually hardcoded pixels; theyre ems, so the

page will adjust fluidly when your user adjusts their font size. If these dont cut it, Yahoo has made defining acustom width a breeze. Heres the code to create a document 800px wide:

view plaincopy to clipboardprint?

#custom-doc1.{2.

margin:auto; /* these two values are required, as */3.text-align:left; /* they help YUI grids center the page */4.width: 61.54em; /* 800px / 13 = em-value for most browsers */5.*width: 60.00em; /* 800px / 13.333 = em-value for IE */6.min-width: 800px; /* optional, but recommended*/7.

}8.9.

To set the width, simply use id of doc, doc2, doc3, or doc4, respective to the values given above.

There are seven templates to choose from. The first six define a two column layout; each one has a different


4 10/6/2010


4/14

width or orientation for the sidebar, with the main content column taking up the rest of the width of the doc.The templates are 1) 160px on the left, 2) 180px on the left, 3) 300px on the left, 4) 180px on the right, 5)240px on the right, and 6) 300px on the right. To get the template of your desiring, simple add a class ofyui-t# to the same div that you defined your doc on (replace the # with the numbers above). As I mentionedabove, these sidebars are standard web-ad widths, so any advertising should fit comfortably inside them.

The seventh templateyui-t7isnt as well documented (oddly, its not on the cheat sheet I linked to above,but it is on this older version). It subtracts the sidebar, simply giving you one full width column (which can be

divided into columns later).

The blocks are the actual manifestation of the columns you defined in the template. Theyre simply two divswithin the doc div, both classed with yui-b. Happily, they dont have to be immediate children of the maindiv; Yahoo gives this example:


1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

11. 12. 13. 14. 15. 16. 17. 18. 19.20.


4 10/6/2010


5/14

21.

You can see from the example that you dont need to put the blocks directly inside the root div. This allowsyou to have a full-width header and footer, which is generally a nice idea. Youll notice that the main contentblock is inside a div with an id of yui-main; YUI grids does this to give you the ability to have either yoursidebar or your main column first in your code, which can be an advantage when youre considering SEO oraccessibility.

Ive grouped grids and units together because theyre really quite similar; both are divs. A grid (defined withclass yui-g) basically tells 2 children (usually units) to split its width evenly. A unit (class yui-u) should alwaysbe the child of a grid and the parent of your content.

So, whats the difference between a block and a grid?

Blocks

Are only used to define overall page columnsAre only used if you use templates 1 6Are only used once (so you should never have more than 2 divs.yui-b on one page)

GridsAre used to divide areas (such as your main block, or another grid) into columnsAre used on any templateAre nestable

Also, whenever you have multiple grids or units within a grid, its necessary to give the first one a class offirst. This is because not every browser offers the pseudo-class :first-child.

But what if you want to divide a grid unevenly? Life isnt always fair, is it? Fortunately, YUI offers a numberof alternative choices to the yui-g class. Heres a list of the others:

yui-gb : Takes 3 units and divides equallyyui-gc : Takes 2 units and divides as 2/3 and 1/3yui-gd : Takes 2 units and divides as 1/3 and 2/3yui-ge : Takes 2 units and divides as 3/4 and 1/4yui-gf: Takes 2 units and divides as 1/4 and 3/4

Thats all of them; just slap 2 or 3 units in each of the above grids, and youll have unequal columns.


4 10/6/2010


6/14

Well, now that you know the ropes, lets go over a basic example. Lets say we want the standard sitelayoutyou know, main content column with a sidebar on the rightwith a bit of a twist: well divide themain column into two smaller ones, and divide one of those further into two.

As I mentioned, Yahoo offers hosting for this framework, and its usually a good idea to take advantage ofthat. Also, Yahoo recommend the HTML 4.01 strict Doctype, so thats what Ive put in. Heres what we startwith:


2.

3. 4. A Simple YUI Grids CSS Example5.

6.

7. 8. 9. 10.11.12.

The first step is to set up our document div and blocks. We can stick with the first doc width (750px), and gowith template 6, which gives us a 300px right sidebar.


1.

www.codemyconcept.com Ads by Google


4 10/6/2010


7/14

2. 3.4.5.

For the two blocks of content, we need to add two divs.yui-b. Well make the top one the larger column, bywrapping it with div#yui-main.


1. 2. 3.

MY MAIN CONTENT DIV4. 5. 6. 7.

MY SIDEBAR DIV8. 9.

10.11.

Super! So, heres what we have so far: Ive taken the liberty of styling it a bit, so you can see whats going on.

Its not too impressive yet, but well get there. Now lets divide the larger column into two. We can achievethis by putting a div.yui-g (thats parenting two units) inside it:



4 10/6/2010


8/14

1. 2. 3. 4.

First sub-column5. 6. 7.

Second sub-column8.

9. 10. 11.12.13.

This gives us two columns on the left; not bad; lets divide the second of those columns into two. To do this,we have to change it to a grid, and put two units into it.


1.First sub-column2.

3.4. 5.

First sub-sub-column6. 7. 8.

Second sub-sub-column9. 10.11.


4 10/6/2010


9/14

This is a great example of the fact that grids and units are of equal rank and can stand side by side: they onlydiffer in usage.

This brings me to a padding gotcha (which will segue to a big benefit of YUI grids). First, look at the codeweve written so far, with some filler text:

Your good taste should notice the lack of padding around the edges of our columns. But that can be easilyfixed with some paddingsay, 0.5emon .yui-u, right?


4 10/6/2010


10/14

Yikes! YUI grids has set the widths for these divs, and because padding adds to the width of div, weve got anoverflow problem. An easy solution to this is to add the padding to the immediate children of the .yui-u.

To keep our columns in line and easily readable, well put the padding on the paragraphs within the .yui-u.But I dont have to show you an image of that for you to figure out that our narrow columns just gotnarrower. This is where we can take advantage of a strong point of YUI grids. Lets change the id on our rootdiv from doc to doc2. Heres a before and after:

By adding one character to our HTML, we can easily experiment with a wider layout; thats the beauty ofYUI grids. #doc2 is 200px wider than #doc, so now our narrow paragraphs are a comfortable width.


14 10/6/2010


11/14

Thats a pretty simple example; lets look at a more complex one . . . thats really not any harder to create.Well start with the seventh templatea single columnwith a 750px wide document (#doc) and slice itdifferently over multiple rows. Heres what we begin with:


2.

3. 4. A Complex YUI Grids CSS Example5.

6.

7. 8.

9. 10. 11.12.13.

Because we are not using templates 1 6 (which have sidebars), we dont need to have any divs.yui-b. Wecan start right in with a few divs.yui-g; well add 4:


1. 2. 3. 4. 5. 6. 7. 8. 9.10.11.

Lets divide the top grid into three parts; to achieve this, well need to change the class to .yui-gb. Then, wesimply put three divs.yui-u inside, and give the first one the first class.


1.


14 10/6/2010


12/14

2. 3. 4. 5. 6. 7.8.9.

A quick preview at what weve got so far (again, Ive applied minimal styling for clarity and thrown in somefiller text):

For the second row, we can try the .yui-gc, which gives us two columns; one will take up 2/3 and the other1/3.


1. 2. 3.

4. 5.6.7.

The minimal styling on this shows a small flaw in the system: the second row doesnt line up with the first rowperfectly; In my opinion, this is a worthwhile trade-off, since a misalignment this tiny would be relatively easyto mask.


14 10/6/2010


13/14

For grid 3, well do something a bit more advanced: four columns. This requires nesting two grids within agrid, like so:


1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

11. 12. 13.14.15.

Notice that we still follow the .first to the first rule, on both the second-level grid and the third-level units.Thats really the only rule you have to remember; even this advanced work is pretty simple. Heres whatweve got so far.

For the final grid, well do a simple split: two columns.


1. 2. 3. 4. 5.6.7.


14 10/6/2010


14/14

And thats it! For the final shot, Ill add a bit of margin between rows.

Its obvious that this isnt entirely pretty, but the potential for it should be just as obvious: I havent had towrite any layout styling. With the YUI Grids CSS framework, its easy to quickly layout your websites and beconfident that theyll be consistent across all major browsers.

Used YUI grids in a project and have an opinion about it? Prefer a different grids library? Let me know in thecomment!

This article was originally posted on the ThemeForest blog. We are currently porting over some of the

more popular articles to Nettuts+.

1.


Net Tuts Plus - Crash Course YUI Grids CSS

Documents

Transcript of Net Tuts Plus - Crash Course YUI Grids CSS