STYLE SHEETS

Using Web Page Grids in Yahoo Grid CSS

When you're building a web site on a tight deadline, a good CSS framework can help you get the job done quickly. Yahoo has thoughtfully provided Yahoo Grid CSS for rushed web developers everywhere. In this four-part series, we examine its features and capabilities.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 4

August 28, 2007

TABLE OF CONTENTS:

So what is a web page grid? In Yahoo jargon, "grids" are holders of "units." The standard grid holder is a div with a class of "yui-g" (g stands for grid). The contained units are divs with a "yui-u" class (u stands for unit). In all cases, except for certain situations that I'll discuss later, a grid holds two units and instructs each unit to take up half the available space. Does this sound confusing? It really isn't, if you take a look at the following graphic, which demonstrates how grids work:

As you can see in the above picture, whenever a grid is defined via a DIV with a "yui-g" class, it will hold two units, where each of them will take up half of the available space on the web page. Not so complex, right?

However, to further clarify this concept, below I coded a sample (X)HTML file. It uses a "yui-t1" preset, and then creates a two-unit grid to build a web page that has the typical three columns.

Here's the file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Grid CSS - Example of nested units (3 columns)</title>

<link rel="stylesheet" type="text/css"href="yui/build/grids/grids-min.css" />
</head>
<body>
<div id="doc" class="yui-t1">
<div id="hd">

<h2>This is the header section</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in,
rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit
amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo
tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis
sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae
mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus
lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet
diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis,
tellus. Sed eleifend.</p>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-g">
<div class="yui-u first">
<p>MAIN: FIRST UNIT:Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere
nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut
dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu,
eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat
volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor
eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus.
Curabitur egestas tempus lectus. Donec et lectus et purus dapibus
feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
</div>
<div class="yui-u">
<p>MAIN: SECOND UNIT. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere
nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut
dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu,
eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat
volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor
eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus.
Curabitur egestas tempus lectus. Donec et lectus et purus dapibus
feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
</div>
</div>
</div>
</div>
<div class="yui-b">
<p>SECONDARY:UNIT. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere
nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut
dignissim, massa sit amet dignissim cursus, quam lacus feugiat
dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu,
eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat
volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi.
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor
eget convallis ullamcorper, arcu odio egestas pede, ut ornare
urna elit vitae mauris. Aenean ullamcorper eros a lacus.
Curabitur egestas tempus lectus. Donec et lectus et purus dapibus
feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum
nec, dignissim quis, tellus. Sed eleifend.</p>
</div>
</div>
<div id="ft">

<h2>This is the footer section</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in,
rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit
amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo
tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis
sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus
vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos
hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis
ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae
mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus
lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet
diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis,
tellus. Sed eleifend.</p>
</div>
</div>
</body>
</html>

As shown in the above example, the pertinent web page is built by using the concept of "grids" that was discussed earlier. In addition, you should notice that I defined a DIV with a class of "yui-u first." This means within the context of the Yahoo framework that this specific grid must take precedence when displaying the whole web document.

Naturally, since it's rather hard to grasp immediately the logic that stands behind using grids, below I included a screen shot that should dissipate any possible doubts about how they function. Here's the image:

As you can see, the proper utilization of grids allows us to build complex web page layouts that are different from those you learned in the previous tutorials of the series. In the earlier example, I combined a built-in "yui-t1" preset along with a couple of units to create a three-column web page layout quickly.

So far, you have leanred how to work with web page grids. I'm sure you're interested in seeing more examples of how to use these elements. In the next section I'll show you how to go one step further and implement what Yahoo calls "special grids."

Want to see how these brand new web page grids will be used? Please click on the link that appears below and keep reading.

Next: Extending the use of web page grids >>