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.
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.
Style Sheets 
/ 9 
Using Web Page Grids in Yahoo Grid CSS
