Using Yahoo Grid CSS - Building some predefined web page layouts
(Page 2 of 4 )
A good point to start demonstrating the functionality provided by the Yahoo Grid CSS framework consists of using its set of bundled templates. These come in handy for building some basic predefined web page layouts. This concept will be much easier to grasp if you look at the list below. It shows all of the templates available for this framework, along with a brief description of each one.
Having said that, here's the group of templates included with Yahoo Grid CSS:
- doc (displays a 750px width, centered web page).
- doc2 (displays a 950px width, centered web page).
- doc3 (displays a 100% fluid web page).
As you can see, the Yahoo Grid CSS framework includes three basic web page templates, identified as "doc," "doc2" and "doc3" respectively, which are actually very easy to understand. However, at this point you're probably wondering how they can be used in an example. Well, say that you want to use the first predefined template, that is the one named "doc," right? Below I coded a simple (X)HTML file which utilizes this template. It displays a 750px width, fully-centered web document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Grid CSS - 750px width, centered</title>
<!-- Source File -->
<link rel="stylesheet" type="text/css"href="yui/build/grids/grids-min.css" />
</head>
<body>
<div id="doc">
<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 -->
<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">
<!-- 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 sample web page loads an external style sheet called "grids-min.css." It is provided with the framework needed to display the pertinent web document.
Of course, to use the predefined templates you'll have to download the corresponding source CSS files from Yahoo framework's official site, located at http://developer.yahoo.com/yui/grids/. In the previous example, I decided to use only a streamlined version of the files to work with the basic grid templates, but you may want to use the full-featured ones. These include a number of additional CSS styles for resetting the body and font styles of the web document before applying a predefined template or preset.
So far, so good. Now that I have explained the minimal requirements of this CSS framework, please pay attention to the definition of the previous (X)HTML file. As you can see, on top of its structure I built a main wrapper DIV, which utilizes the first template included with this library, called "doc." Then, I defined the corresponding header, body and footer sections of the web page, identified as "hd","bd", and "ft" respectively, in order to create the basic layout of the document.
Of course, as you may have guessed, these selectors are mandatory in all cases, so you'll have to assign them to the main DIVs of any web page that uses this CSS framework. Quite simple, right?
All right, now that you learned how to use the first web page template included with the neat Yahoo Grid CSS library, it's time to see how to build a brand new (X)HTML file to utilize the second "doc2" template.
This file will be built in the section to come, so click on the link below and keep reading.
Next: Using another web page template >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 8 
