STYLE SHEETS

Using Additional Web Page Presets with Yahoo Grid CSS

As you probably heard, Yahoo released a useful CSS framework called "Yahoo Grid CSS." It allows users to build, quickly and easily, basic and complex web page layouts with minor hassles. If you want to learn the most relevant features that come with this library, this series of articles shows you how to put this framework to work for you in a very short time.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

August 27, 2007

TABLE OF CONTENTS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Grid CSS - Template t3 (secondary block is placed
300px on left)</title>

<link rel="stylesheet" type="text/css" href="yui/build/grids/grids-min.css"/>
</head>
<body>
<div id="doc"class="yui-t3">
<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">
<p>Main Block</p>
</div>
</div>
<div class="yui-b">
<p>Secondary Block</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>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Grid CSS - Template t4 (secondary block is placed
180px on right)</title>

<link rel="stylesheet" type="text/css"href="yui/build/grids/grids-min.css" />
</head>
<body>
<div id="doc"class="yui-t4">
<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">
<p>Main Block</p>
</div>
</div>
<div class="yui-b">
<p>Secondary Block</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 by the two sample (X)HTML files above, creating some primitive web page layouts using the presets offered by this CSS-based framework is actually a no-brainer process. The procedure requires only assigning the name of the selected preset to the main wrapping DIV of the respective web document. Quite easy, right?

So far, I have shown you how to use four different presets included with the Yahoo Grid CSS framework, so the procedure should be quite familiar to you now. However, since the library offers seven presets, in the last section of this tutorial I'll show you how to implement the ones remaining.

Do you want to see how these three last presets will be utilized concretely? Go ahead and read the next few lines.

Next: Completing the use of web page presets >>