Template Presets for the Yahoo Grid CSS - Introducing the concept of web page presets
(Page 4 of 4 )
In this section, I'm going to show you how to implement what in the context of Yahoo Grid CSS is called a "web page preset." In simple terms, the library incorporates seven predefined web page layouts, identified as "yui-t1", "yui-t2", … "yui-t7".
As you'll see, these presets allow to create common web page layouts in a snap, without having to code your own DIVs. In order to do this, you use two main blocks, called "primary" and "secondary" respectively. Yahoo assumes that the secondary block is by default placed on the left of the web document, while the primary one is located on its right.
But, I think that you understand all these concepts better if you look at the following code sample. It builds a simple web page by using the first Yahoo preset, named "yui-t1":
<!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>
Hopefully, the above code sample will be rather easy to grasp. As you can see, I assigned a "yui-t1" class to the main wrapped DIV of the pertinent web page. I then created two additional block DIVs, identified as "yui-b," where the first one was wrapped by another, called "yui-main." In this way I built the primary and secondary blocks that I mentioned before.
All of these conventions used within the Yahoo Grid CSS framework may sound rather confusing in the beginning, but as you get used to them, they'll become more intuitive and familiar.
Below I included a screen shot which shows the final web page created by the previous (X)HTML file. Have a look at it, please:
As you can see, the secondary block is placed 160px on the left, according to the specifications of the "yui-t1" preset, followed by the corresponding primary section. Things are much simpler to grasp now, right?
The previous example only demonstrates how to use the first preset included with the Yahoo Grid CSS framework. There are still six more to be reviewed. These will be covered in the next part of this series. Until then, feel free to experiment with all the code samples that I provided here, so you can acquire some practice in using this helpful CSS library.
Final thoughts
In this second installment of the series, you hopefully learned how to build custom web pages with the Yahoo Grid CSS, and how to use the first preset packaged with this library. Nonetheless, as I stated earlier, there are some topics that deserve a detailed analysis, such as the utilization of nested grids, which can be useful for creating complex web page layouts. All of these interesting things will be discussed in the next part.
Now that you've been warned, you won't want to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 5 
