Using Web Page Grids in Yahoo Grid CSS - Combining templates and special grids
(Page 4 of 4 )
As you learned in the previous section, it's possible to combine different built-in templates along with special grids to create different types of web page layouts to fit specific requirements. Therefore, below I set up two final examples where the "doc1" and "doc3" templates are used in conjunction with special grids.
The code samples are accompanied by a pair of illustrative screen shots. Here they are:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Grid CSS - Using Special Nesting Grids (3 columns)</title>
<!-- Source File -->
<link rel="stylesheet" type="text/css"href="yui/build/grids/grids-min.css" />
</head>
<body>
<div id="doc2"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">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gc">
<div class="yui-u first">
<p>MAIN: FIRST UNIT: 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.</p>
</div>
<div class="yui-u">
<p>MAIN: SECOND UNIT: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.</p>
</div>
</div>
</div>
</div>
<div class="yui-b">
<p>SECONDARY: 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>
<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 - Using Special Nesting Grids (3 columns)</title>
<!-- Source File -->
<link rel="stylesheet" type="text/css"href="yui/build/grids/grids-min.css" />
</head>
<body>
<div id="doc3"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">
<div id="yui-main">
<div class="yui-b">
<div class="yui-gc">
<div class="yui-u first">
<p>MAIN: FIRST UNIT: 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.</p>
</div>
<div class="yui-u">
<p>MAIN: SECOND UNIT: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.</p>
</div>
</div>
</div>
</div>
<div class="yui-b">
<p>SECONDARY: 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>
<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>
After analyzing in detail the two previous code samples, I'm sure you realized that building more complex web page layouts using the Yahoo Grid CSS framework is a no-brainer process that can be performed with minor effort. Maybe the whole design process isn't as intuitive as it would be when you follow your own inspiration, but this CSS framework can be quite appealing for web designers who don't mind using a third-party library.
Final thoughts
Sadly, we've come to the end of this series. Hopefully, after studying all of the hands-on examples that I provided for you here, you'll have a clearer idea of how to take advantage of the numerous and useful features packaged with the Yahoo Grid CSS framework. If you're a designer who is tied to a tight deadline to create the layout of the different pages that'll comprise your next web project, this library can be an option that's worth a look.
See you in the next web development tutorial!
| 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. |
