ESN 72870-090110-645836-43


Document Name: YUI Grid Builder for custom sites
Document Description: YUI Grid Builder for custom sites

YUI Grid Builder for custom sites


2009/01/10

OK, I know: most bloggers want nothing to do with writing HTML. Most would rather use something simple like Wordpress and concentrate on their blogging. That's fine, but..

Earlier today I visited a blog where the owner mentioned that he'd like to put something in a sidebar but it wouldn't fit and he had no idea how to fix it. Of course he could hire a Wordpress expert to help him with that if he really wanted it badly enough.

But honestly, writing your own pages isn't that hard. It probably isn't all that hard to tweak Wordpress either but for those of you us who like holding the reins, writing HTMl from scratch is a crucial skill. We can control every aspect of our site and never have to say "I'd like to, but.."

What is a little hard is CSS columns. The basics are easy enough, but when you get into wanting to do more tricky things, understanding absolute vs. relative positioning can give you a headache.

Enter Yahoo Grids and their wonderful Grid Builder Tool.

I've used The Yahoo! User Interface Library (YUI) for a while now. Recently I wanted to add a right hand column to my pages. I did it first by just adding a "div" with a "float:right" tag, which is easy and will work, but that requires you to output the html for the right hand column before putting out the main text. That means that browsers like Lynx see all that junk before your actual text. Broken browsers will have similar problems, and slow loading connections will have to wait for the sidebar to load before seeing your text. If you have Javascript in the sidebar that needs to access another site, it may hang or be delayed, further delaying your text from appearing. For all these reasons, you really want your text to come before your sidebars.

The Grid Builder makes this easy. To create this layout, I chose a body size of 974px, a left sidebar of 160px and then set the Row selector to "2 column (75/25)":

YUI grid builder tool

The resulting code is easy to understand:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd"> 
 <html> 
 <head> 
    <title>YUI Base Page</title> 
    <link rel="stylesheet"
    href="http://yui.yahooapis.com/2.5.1/build/reset-fonts-grids/reset-fonts-grids.css"
    type="text/css">
 </head> 
 <body> 
 <div id="doc4" class="yui-t1"> 
 	   <div id="hd"><h1>YUI: CSS Grid Builder</h1></div> 
 	   <div id="bd"> 
 	    <div id="yui-main"> 
 	    <div class="yui-b"><div class="yui-ge"> 
 	    <div class="yui-u first"> 
 	    <!-- YOUR DATA GOES HERE --> 
 	        </div> 
 	    <div class="yui-u"> 
 	    <!-- YOUR DATA GOES HERE --> 
 	        </div> 
 	</div> 
 	</div> 
 	    </div> 
 	    <div class="yui-b"><!-- YOUR NAVIGATION GOES HERE --></div> 
 	     
 	    </div> 
 	   <div id="ft">Footer is here.</div> 
 	</div> 
 	</body> 
 	</html>

I modified that slightly for my needs here, but that's the basic template. You just stick your stuff into the appropriate places and you have a nice three column layout where the text loads before the sidebars.


Author: Anthony Lawrence - Contact Author
Publisher: Anthony Lawrence
Licensee Name: Anthony Lawrence
Reference URL: http://aplawrence.com/Web/yui-grids.html
Copyright: All Rights Reserved
Registration Date: 1/10/2009 10:07:01 PM UTC
Views: 880



NUMLY.COM