Using Additional Web Page Presets with Yahoo Grid CSS - Working with primary and secondary blocks of a web page
(Page 2 of 4 )
As you'll recall from the preceding article of the series, I introduced the concept of "presets" within the Yahoo Grid CSS framework. This excellent feature allows you to build basic web page layout with minor problems. Speaking more specifically, you already learned how to use at least the first preset included with this CSS library, because I developed a practical example where this preset, called "yui-t1," was implemented inside the structure of a primitive web document.
However, in case you don't remember how this example looked, here is its corresponding source code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Grid CSS - Template t1 (secondary block is placed 160px on left)</title>
<!-- Source File -->
<link rel="stylesheet" type="text/css" href="yui/build/grids/grids-min.css"/>
</head>
<body>
<div id="doc" class="yui-t1">
<div id="hd">
<!-- header -->
<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">
<!-- body -->
<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">
<!-- footer -->
<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 you can see, the above (X)HTML file assigns a "yui-t1" class attribute to its main wrapper DIV, in this way implementing the first present that I mentioned a few lines earlier. You should notice that the previous web document has been split into two main sections called main and secondary blocks, which have been identified as "yui-main" and "yui-b" via their respective class attributes.
Having explained how to use the first preset bundled with this CSS package, let me show you another example. This one utilizes the second preset, not surprisingly named "yui-t2." The corresponding source code for this example is listed below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Grid CSS - Template t2 (secondary block is placed
180px on left)</title>
<!-- Source File -->
<link rel="stylesheet" type="text/css"href="yui/build/grids/grids-min.css" />
</head>
<body>
<div id="doc" class="yui-t2">
<div id="hd">
<!-- header -->
<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">
<!-- body -->
<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">
<!-- footer -->
<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 illustrated previously, the same sample (X)HTML file that was defined earlier uses a new Yahoo preset, named "yui-t2." It displays a basic web page whose secondary block is placed 180px on the left. Since you may want to see how this web document looks, I included a screen shot that shows how the different blocks of this basic web page have been laid out:
Without a doubt, after studying the previous image, you'll realize how easy it is to use the different presets provided by the Yahoo Grid CSS framework to build basic web pages that present a simple layout of its different blocks. However, as I said before, the framework comes with seven presets, so in the next section I'll show you a few additional examples of how to use them.
To see how these brand new examples will be developed, please click on the link below and keep reading.
Next: Extending the usage of web page presets >>
More Style Sheets Articles
More By Alejandro Gervasio
