YUI Grid Builder for custom sites

More recently I have switched to a simpler layout. YUI is very powerful and veratile, but I don't need all that sophistication.

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.



Got something to add? Send me email.





(OLDER) <- More Stuff -> (NEWER)    (NEWEST)   

Printer Friendly Version

-> -> YUI Grid Builder for custom sites


9 comments



Increase ad revenue 50-250% with Ezoic


More Articles by

Find me on Google+

© Anthony Lawrence







Sat Jan 10 22:18:47 2009: 5130   TonyLawrence

gravatar
By the way, that right sidebar is "broken" in older IE browsers. It's fine in IE8, but not before that.

I don't care.

I'm sick of adding bloat to my pages because Microsoft programmers couldn't create an unbroken browser. I'm just not doing it any more: if you are visiting here with an old IE version and it messes up for you, I DO NOT CARE. Use a better browser: Opera, Safari, Firefox.. there are plenty to choose from. Or upgrade to IE8 if you must use Microsoft.

Or put up with it. Or go somewhere else. I just do not care any more.







Wed Feb 18 22:16:50 2009: 5463   anonymous

gravatar
Why is your right sidebar broken pre IE8? The YUI Grid should work in IE7 and IE6. There is one little tweak that needs ot be more documented, and I think that may be why your sidebar isn't working. To deal with an odd rounding issue in IE7 and IE6, you need to as a 1px border to the left and right of "bd".

Could that have been why IE <8 was breaking?



Thu Feb 19 12:36:43 2009: 5464   TonyLawrence

gravatar
Could be - I appreciate the tip and will try it as soon as I get over this stupid flu I've had for two days.



Thu Feb 19 12:45:55 2009: 5465   TonyLawrence

gravatar
BTW, do you mean that "bd" needs a 1px border or that and enclosing div needs that?

If "bd" itself needs it, you'd think they would have fixed that by now?



Thu Feb 19 12:56:11 2009: 5466   TonyLawrence

gravatar


I've added a 1px border - going to test now..



Tue Apr 13 05:42:49 2010: 8409   MB

gravatar


Seriously, AP. You're right on...I'm a Photoshop / Visual Thinking kind of a guy, and to deal with CSS layout is a nightmare (especially when I need a floating right <div> that is "supposed" to work in IE6 and every other mainstream browser out there). Anyway, I want to second what you've said here, and also mention that you're coming up result #2 in Google for searches for the Yahoo Gridbuilder. Nice work, and thanks for the post.

MB



Tue Apr 13 11:32:43 2010: 8410   TonyLawrence

gravatar


Recently I've been dabbling in iPhone/iPad programming. It's all very new to me and confusing, but I remember thinking "At least I don't have to deal with IE" :-)



Fri Nov 5 04:56:21 2010: 9099   KyleGadd

gravatar


I wrote a php class to easily create a YUI Grid. You can check it out at (link)

------------------------
Kerio Samepage


Have you tried Searching this site?

Unix/Linux/Mac OS X support by phone, email or on-site: Support Rates

This is a Unix/Linux resource website. It contains technical articles about Unix, Linux and general computing related subjects, opinion, news, help files, how-to's, tutorials and more.

Contact us





Several people have told me that my inability to suffer fools gladly is one of my main weaknesses. ((Edsger W. Dijkstra)

Get your facts first, and then you can distort them as much as you please. (Mark Twain)








This post tagged: