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:

In the section that you just read, you learned how to use standard web page grids to build a three-column web page layout. As you'll certainly recall, common grids evenly split (50% each) the available space of a given web page block. Nonetheless, the Yahoo Grid CSS framework offers another type of grids. Called "special grids," these take up two-thirds of the available space in one block, in this way making it possible to build different kinds of web page layouts.

Regarding the implementation of these "special grids," below I built another sample (X)HTML file that uses them to create a three-column web document layout:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Grid CSS - Using Special Nesting Grids (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-gc">
<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.</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.</p>
</div>
</div>
</div>
</div>
<div class="yui-b">
<p>SECONDARY: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>

In this case, I defined a "special grid" which contains two units of the sample web document, while the remaining free space is taken up by a secondary block. Of course, the creation of this three-column web page layout will be better understood if you look at the following screen shot, which shows the final output generated by the previous (X)HTML file:

So far, so good, right? At this point, I believe that you know how to use these "special grids" for building more complex web page layouts. Thus, it's time to see how the same sample (X)HTML file that you learned a few lines above can be used in conjunction with different templates and special grids to display different kind of web documents.

These brand new examples will be built in the next section, thus click on the link below and keep reading. We're just about finished!

Next: Combining templates and special grids >>