Customizing Yahoo! Grids CSS, for beginners

Overview

Yahoo! Grid CSS system is an easy way to create an HTML document with a desired page width and a secondary column which works out of the box. YUI Grid comes with four built-in page widths and six built-in template presets. This article shows you how to create a custom page width and a custom secondary column width.

Yahoo! Grid Page structure

The overall structure of a HTML document using yahoo grid is as follows:

<html>
 <head>
  <link href="http://yui.yahooapis.com/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css" rel="styleSheet" type="text/css" />
 </head>
 <body>
  <div id="doc" class="yui-t1">
    <div id=”hd”></div><!-- header -->
    <div id=”bd”></div><!-- body -->
    <div id=”ft”></div><!-- footer -->
  </div>
 </body>
</html>

Page Width

You can control the overall width of the page using the id of the outermost div (<div id=”doc”, in the above example). There are 4 pre-defined doc ids:

doc: 750px
doc2: 950px
doc3: 100%
doc4: 974px

Customizing the Page Width

To create your custom page width, say 800px, add the following in your CSS

#doc20 {
 width:61.538em; /* 800/13 */
 *width:60em; /* for I.E. 800/13.3333 */
}

Then use this as your main document wrapper:

<div id="doc20">
  <div id=”hd”></div> <!-- header -->
  ...

Secondary column width with built-in templates

You can add a secondary column by simply nesting 2 blocks, <div class=”yui-b”>, under “bd”. You need to indicate which block is the main block by wrapping it in <div id=”yui-main”>.

<div id="bd">
  <!-- main block -->
  <div id="yui-main">
    <!-- main block -->
    <div class="yui-b">
    </div>
  </div>

  <!-- secondary column -->
  <div class="yui-b">
  </div>
</div>

The secondary column width and position can be controlled by the class of the <div id=”doc” class=”template preset goes here”> tag.

There are 6 built-in template presets.

.yui-t1 - Two columns, narrow on left, 160px
.yui-t2 – Two columns, narrow on left, 180px
.yui-t3 – Two columns, narrow on left, 300px
.yui-t4 – Two columns, narrow on right, 180px
.yui-t5 – Two columns, narrow on right, 240px
.yui-t6 – Two columns, narrow on right, 300px

For example:

<div id="doc" class="yui-t1">

results in a secondary column, narrow on left, 160px.

Customizing the secondary column width

Say you want to create a new template

.yui-t20 – Two columns, narrow on right, 120px

You can achieve this by including the following in your CSS (after the YUI grids CSS).

.yui-t20 {
  margin:auto;
  text-align:left;
}
.yui-t20 .yui-b {
  float:right;
  width:9.2308em;
  *width:9em;
}
.yui-t20 #yui-main {
  float: left;
  margin-right: -25em;
}
.yui-c20 #yui-main .yui-b {
  margin-right: 10.2308em;
  *margin-right: 10em;
}

How is the calculation done?

For all browsers, width in px / 13

width:9.2308em; /* 120/13 */

For I.E. star width in px / 13.33

*width:9em; /* for I.E. 120/13.33 */

For all browsers, right margin is width + 1em

For secondary column on left, change right and left appropriately.

References

What is OpenID and how can I use it?

Vineet Manohar's blog

Archives

Java blogs

Meta