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.
Using Additional Web Page Presets with Yahoo Grid CSS - Completing the use of web page presets (Page 4 of 4 )
As I stated in the section that you just read, there are three additional web page presets that need to be analyzed. Below I coded some sample (X)HTML files which use these presets, along with the corresponding browser outputs:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>YUI Grid CSS - Template t5 (secondary block is placed 240px on right)</title> <!-- Source File --> <link rel="stylesheet" type="text/css"href="yui/build/grids/grids-min.css" /> </head> <body> <div id="doc"class="yui-t5"> <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>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>YUI Grid CSS - Template t6 (secondary block is placed 300px on right)</title> <!-- Source File --> <link rel="stylesheet" type="text/css"href="yui/build/grids/grids-min.css" /> </head> <body> <div id="doc"class="yui-t6"> <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>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>YUI Grid CSS - Template t7 (One full-width column)</title> <!-- Source File --> <link rel="stylesheet" type="text/css" href="yui/build/grids/grids-min.css"/> </head> <body> <div id="doc"class="yui-t7"> <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>
Here you have them. The three previous examples demonstrate in a nutshell how to include the remaining presets, called "yui-t5," "yui-t6" and "yui-t7" respectively, into a sample web document to build different kinds of web page layouts.
At this point I believe that I provided you with enough source code to keep you entertained for some time while acquiring more experience in using the presets bundled with the Yahoo CSS Grid framework. Happy coding!
Final thoughts
In this third part of the series, you hopefully learned how to put to work the set of web page presets packaged with the Yahoo Grid CSS framework, so at this point you should have a much clearer idea on the capacities offered by this library.
However, there are some others features that need to be properly discussed, such as the implementation of nested grids, which allow you to build complicated web page layouts.
All of these topics will be covered in the final part of the series, so you don't have any excuses 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.
Style Sheets 
Using Web Page Grids in Yahoo Grid CSS
