STYLE SHEETS

Template Presets for the Yahoo Grid CSS

If you're looking for a fast way to set up a professional-looking web site, this series of articles may be just what you need. It shows you how to use Yahoo Grid CSS, a CSS library that will help you build web pages quickly.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 5

August 22, 2007

TABLE OF CONTENTS:

In the previous section, I showed you how to build a 700px width custom web page by taking advantage of the remarkable capabilities offered by the Yahoo Grid CSS framework. Now I want to walk you through the development of another concrete example to illustrate how to extend this customization process further to create a web document of 1000px width.

As you might have guessed, the procedure for building this custom web page looks very similar to the one that I demonstrated in the previous section. It can be clearly illustrated by the following (X)HTML file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Grid CSS - Custom 1000px width, centered</title>

<link rel="stylesheet" type="text/css"href="yui/build/grids/grids-min.css" />
<style>
#custom-doc{
   margin:auto;text-align:left;/* leave unchanged */
   width:76.92em;/* non-IE */
   *width:75.06em;/* IE */
   min-width:600px;/* optional but recommended */
}
</style>
</head>
<body>
<div id="custom-doc">
<div id="hd">

<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">

<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">

<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, in the above example I simply defined a "custom-doc" ID, which came in handy for building a custom 1000px width web page. As I noted in the previous section, this process doesn't require much effort from you. You only need to create these specific styles, and then calculate the appropriate width values for both non-IE and IE browsers.

So far, so good, right? At this point, after studying all of the practical examples that I coded previously, you should have a much closer idea of how to use this helpful CSS framework to create custom web pages. Still, this library has some additional features that need to be properly reviewed, like the implementation of web page presets for building basic web page layouts very quickly,

Therefore, in the last section of this tutorial I'm going to introduce you to the utilization of web document presets.

Next: Introducing the concept of web page presets >>