STYLE SHEETS

Using Yahoo Grid CSS

Are you looking for a way to save time when building professional-looking web sites? You're in luck. Yahoo just released Yahoo Grid CSS. This series will show you how to use it to create the templates you need to make your web pages look attractive and appropriately complement your content.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 9

August 21, 2007

TABLE OF CONTENTS:

As I explained in the previous section, the Yahoo Grid CSS framework allows you to use three different web page templates for building basic layouts very quickly. Since you learned how to use the first template, named "doc," below I set up an example for the "doc2" template to build a 950px centered web page.

The signature of this brand new (X)HTML file looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Grid CSS - 950px centered</title>

<link rel="stylesheet" type="text/css"href="yui/build/grids/grids-min.css" />
</head>
<body>
<div id="doc2">
<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">

<h2>This is the body 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="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>

See how simple it is to create a basic web page layout using the templates provided by this CSS framework? As you can see, this creation process is reduced to specifying the appropriate ID for the main wrapping DIV defined on top of the web document's structure. Period.

Okay, at this stage you hopefully grasped the logic required to build two primitive web page layouts using the respective "doc" and "doc2" templates. Nonetheless, as you'll recall, the Yahoo Grid CSS provide web designers with yet another template for building full-width web documents.

Taking into account this important fact, in the last section of this tutorial I'm going to show you how to utilize this last template, completing the demonstration of the basic web page templates packaged with this CSS framework.

To see how this final template will be used in a concrete example, go ahead and read the next few lines. I'll be there, waiting for you.

Next: Completing the utilization of the predefined templates >>