Web Development optimize

Moving to CSS-based layouts with the YUI Library

Find out why Tony Patton thinks the YUI Grids CSS portion of the free YUI Library is an excellent resource for building Web interfaces that use Web standards.

While initiating a recent project to make substantial changes to an existing Web application, it was decided to dump the table-based layout used in its original design in favor of CSS. We opted to use the Yahoo! User Interface (YUI) Library after evaluating different approaches. The YUI Library provides core CSS resources that have been developed by a professional team of developers and extensively tested by the Web community.

This tutorial walks you through the steps of how to move from a table-based design to a CSS-based layout with the help of the YUI Library.

The layout

It is worth considering the division of screen real estate in the application to understand how it is coded using both tables and CSS. The overall page is divided into two horizontal sections: a header and a body.

The header portion can be further divided into three horizontal strips. The first strip contains a strip of color at the top. The middle row contains text and a logo on a white background. The final row has its own background color along with a breadcrumb.

The body portion of the page is divided into two columns. The first column is a navigation area featuring a list of navigation links. The second column is divided into two rows with a small footer row at the bottom, and the rest is devoted to page content.

The site design does not change from the original product developed with Dreamweaver and HTML tables. The introduction of CSS will deliver cleaner code with a smaller footprint and simplified maintenance.

Table-based layout

The original design used six HTML tables to divide the page and deliver the solution. It used CSS to style text on the page, but CSS usage stopped at that point. The following listing includes the HTML source. Background colors are assigned to each table (via the bgcolor attribute) to provide a visual cue of the layout.

<html>

<head><title>Table-based page layout</title></head>

<body>

<table bgcolor="yellow" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">

<tbody>

<tr><td colspan="3" width="100%"></td></tr>
<tr><td colspan="3">

<table bgcolor="red" border="0" width="100%" cellspacing="0">

<tr>

<td width="85%" valign="middle">Header Text</td>

<td width="15%"><img src="logo.jpg" mce_src="logo.jpg" /></td>

</tr></table></td></tr>

<tr>

<td width="16%" height="20" nowrap>Breadcrumb</td>

<td width="40%" height="20" align="right" nowrap></td>

</tr>

<tr>

<td width="10%" rowspan="2" valign="top">

<table bgcolor="green" width="101%" height="100%" border="0" cellpadding="0"

cellspacing="0">

<tr>

<td height="167" valign="top">

<table bgcolor="light blue" width="100%" border="0" cellspacing="0">

<tr><td colspan="3">Menu</td></tr>

<tr>

<td width="8"> </td>

<td>Nav Link</td>

<td width="4"> </td>

</tr></table></td></tr></table></td>

<td height="100%" colspan="2" valign="top">

<table bgcolor="brown" width="100%" height="100%" cellpadding="0" cellspacing="0">

<tr><td valign="top">

<table bgcolor="silver" width="96%" height="220" border="0" cellpadding="10">

<tbody><tr>

<td valign=top align=left width="100%">

<p>Content goes here</p>

</td></tr></tbody></table></td></tr><tr>

<td height="40" valign="middle">

Footer

</td></tr>

</table></td></tr></table></body></html>

The table-based layout solution delivers the desired results, but it can be confusing to make layout changes. A quick perusal of the code demonstrates the confusing nature of using tables for layout.

It takes time to make layout changes and to convert a table-based solution to a CSS alternative, so selling such a change to a client can be daunting. In our case, the client was technically savvy and easily convinced when we showed the simplified approach offered by CSS.

YUI Grids CSS

The use of the YUI Grids CSS feature of the YUI Library added another level of acceptance via a tested solution. YUI Grids CSS provides a CSS solution for delivering page layouts that divide the page into areas.

A great aspect of the YUI Grids CSS feature is its A-level browser support, which provides the highest support level in terms of browsers. This means you don't have to worry about the quirks in different browsers when using CSS for layout.

CSS layout

YUI Grids CSS offers preset page widths and templates, along with the ability to nest and stack layouts to generate what you need. Yahoo boasts the capability to deliver more than 1,000 layout combinations with it. YUI Grids CSS is part of the YUI Library download.

We used the following features of the YUI Grids CSS feature:

  • The 100% page width is employed via the doc3 id attribute assigned to the overall <DIV> container.
  • The entire page is divided into three rows using three <DIV> elements. The YUI Grids CSS standard id attributes for header (hd), body (bd), and footer (ft) are used.
  • The header has three rows using two <P> elements and a <DIV> element. The <DIV> includes another <DIV> that uses YUI Grids CSS features. This includes the 100% page width (doc3 attribute), as well as a preset template that has two columns with the narrower column on the left with a width of 180 pixels. The narrower column is assigned the class id of yui-b with the larger column assigned the yui-main attribute. The two columns are used to ensure the breadcrumb appears above the content area of the page.
  • The middle or body row of the whole page layout is divided into two columns with a left column width of 180 pixels. This is accomplished with a predefined template employed by assigning the yui-t2 class to the body's <DIV> container. The smaller left column is designated with the yui-b class assignment, and the main area is designated with the yui-main class assignment.
  • The footer row uses the same approach as the body with two columns -- a left column of 180 pixels.
  • The smaller left column of the body row of the page contains a navigation menu. The menu is created with an HTML unordered list and styled via CSS.
  • The YUI Grids CSS is contained in one CSS file available in the YUI Library download. The file is called grids.css and has a small footprint of 4KB.

Here is the source of the reworked page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>

<title>Reworked with YUI Grids CSS</title>     

<link rel="stylesheet" type="text/css" href="grids.css" mce_href="grids.css">

</head>

<body>

<div id="doc3">

<div id="hd">

<p class="header1"></p>

<p class="header3">

<span>Text</span>

<span class="logo"></span>

</p>

<div>

<div id="doc3" class="yui-t2">

<div class="yui-b"></div>  

<div id="yui-main">

<div class="yui-b">Breadcrumb</div>

</div>

</div>

</div>

</div>

<div id="bd">

<div id="doc3" class="yui-t2">

<div class="yui-b">

<ul class="nav">

<li class="main">Menu</li>

<li class="sub">Nav Link</li>

</ul>

</div>  

<div id="yui-main">

<div class="yui-b">

Content goes here

</div>

</div>

</div>

</div>

<div id="ft">

<div id="doc3" class="yui-t2">

<div class="yui-b">

</div>  

<div id="yui-main">

<div class="yui-b">
Footer
</div>
</div>
</div>
</div>
</div>
</body></html>

You may cringe at the sight of so many <DIV> elements, but this is much easier to follow compared to its table counterpart. Also, the CSS approach allows you to easily modify the layout by editing the CSS or changing what YUI Grids CSS features are used.

For example, we could easily modify the layout to use a layout with a left column of 160 pixels by changing the class assigned to the <DIV> elements from yui-t2 to yui-t1. In order to use this approach, you need to be familiar with using YUI Grids CSS.

There's a caveat to working with the free CSS elements of the YUI Library: It's tricky to alter the source CSS. The code contains many so-called hacks in order to work with all browsers that you may not be fully aware of all of them when you're editing the CSS. For me, I avoid working directly with the source and work within the confines of the YUI Library.

Making the switch

CSS has matured to the point where using it for layout is now acceptable. However, this approach does have pitfalls, which include browser quirks. For this reason, I find the freely available YUI Grids CSS portion of the YUI Library to be an excellent resource for building Web interfaces that use Web standards.

Are you embracing CSS for Web page layout? Do you use any aspect of the YUI Library in your applications? Share your experiences with the Web Developer community.

Additional TechRepublic resources about the YUI Library

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

---------------------------------------------------------------------------------------

Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Developer newsletter, delivered each Tuesday. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

13 comments
Lightsabre
Lightsabre

Using CSS for layout (tableless) is requirement in the gov't space. We follow the Grade A approach as well. The YUI library is very robust and is a great start especially when wireframing designs in the concept stage. Coupling CSS layout with XHTML semantic markup renders your content regardless of device (text only, CSS disabled, etc).

scott.damery
scott.damery

I have created a base WordPress theme template using the YUI library and think it is a great resource for exactly the reason you did. It has a team of developers who have already tested it in various environments for me. I can come up with my own Css layout but then I always seem to run into some sort of browser quirk that can be very very frustrating. The Yui layout is awesome and I am very thankful!

mike
mike

I admire the people who write for these pages. Whatever insight you try to share with the masses gets autopsied and ridiculed. You're a brave bunch. Nice job, Tony.

Kevin Quillen
Kevin Quillen

I'd rather write my own css and markup. Plus I think the YUI is quite bloated. This really isn't that difficult. With some time and exercise you can spit layouts out faster than any generator can give you. Eventually you can look at design comps and see the building blocks, markup, divisions.. it'll come to you.

Justin James
Justin James

I am not quite sure I see what YUI adds, other that pre-defining the CSS for me. Is it basically a pre-made collection of CSS definitions that have been pre-tested in major browsers? Or is there more to it than that? Thanks! J.Ja

Kevin Quillen
Kevin Quillen

Boring read. Websites should display uniform in major browsers, period.

ndavies
ndavies

There are many developers re-inventing perfectly working well rounded wheels. However, I agree with the previous post. Moving from tables to CSS is not hard. I'm not sure why anyone who had used tables would find seeing divs scary. I'm also not sure that all the divs used in the example are necessary. the same effect can be achieved with a lot less work. That said, I have download the YUI library and intend to take a proper look when time allows. This article made it sound as if CSS was a new technology, it's not, it's been around for years, getting better with every incarnation. the big break through for easy layout will be when IE8 is widely accepted. Like other major browsers it will support CSS tables - a fantastic solution to this problem and one that uses a lot less mark-up.

Jaqui
Jaqui

a requirement for javascript in the website. Yahoo has a love affair with using javascript for everything, despite the critical security issue of using clientide scripting. the entire YUI library is a collection of javascripts.

scott.damery
scott.damery

No, that is it! But that is a BIG it! pre-tested is huge if you deal with a Large audience on various environments.

scott.damery
scott.damery

Sure layout is easy in Css and has been around in various forms for quite a while, but you should know that when you get more complex layouts used by a wide variety of users environments then standards go out the door quickly and odd things start happening to your seemingly simple layouts. This library somewhat levels the playing ground. Nothing is perfect. If you think you have the perfect css layout style them you probably haven't been testing it well. Yui offers high QA!

Justin James
Justin James

Thanks for the clarification! Personally, pre-tested doesn't matter; the layouts I prefer to use have simple needs and the minor browser differences on the CSS are barely noticeable. I am sure that if I was trying to put together something with a lot of menus, things that pop up and out, etc. that something like YUI might make some sense (preferably without the JavaScript requirement) to me, but my current needs don't justify it. J.Ja

Kevin Quillen
Kevin Quillen

I test layouts in IE6/7, Opera, Firefox and occasionally Safari and for the most part they are uniform. Sometimes I have to do a workaround or two, but in all major browsers I can accomplish any design our GDs throw at me.