onidle(…)

As you know, table based layout are bad news. Well, personally, I came to this game late and never used table-based layouts. As a former prepress guy accustomed to Quark and Photoshop (GUI’s) the avalanche of <table> tags in much of the HTML I viewed in 1994 scared me off. Yikes! Fast-forward 10 years or so or so and I found myself back in school learning how to write basic HTML. Much to my surprise those damn <table> tags were still prevalent. Drat!

One of the requirements of the “Hello World” page for class was to use Cascading Style Sheets to spec fonts and colors. So I did a little googling and it turns out one can use CSS to layout the page too. Seemed like the way to go, no more deeply nested <table> tags… I was excited. That semester was an exercise in pain-management. As you might guess, bending CSS to my will was not easy. Lots of reading and lots of trial and error. And lots of requests to my instructor to use Firefox when viewing my assignments!

Over then next few years I built many pages and layouts and always battled against CSS. I had amassed a boatload of links to descriptions of how to do fluid, hybrid, and fixed layouts. Arcane information about browser incompatibilities and “hacks” littler my skull. Each time I started a project I spent an inordinate amount of time fiddling with the CSS – which structure, how to name selectors, and on. Makes me tired just thinking about it.

A few months ago I finally found the answer: Yahoo! UI Library. According to the site:

All components in the YUI Library have been released as open source under a BSD license and are free for all uses.

The library has a bunch of javascript utilities and controls. I use Ruby on Rails primarily so most of that is taken care of by Rails and it’s integration with prototype and script.aculo.us. My interest lies in their CSS tools. But, oh, the CSS!

The key ingredient for page layout is YUI Grids CSS. Pretty amazing. Simply follow the conventions describe in the code (as well as the excellent documentaiton) and you’re ready to go. They even provide a nice interactive builder page to generate the basic structure. No more trial and error, fluid, fixed, this just works. The other two sheets help with the finer points. Reset CSS provides a nice foundation for predictable cross browser rendering and Fonts CSS helps make font size look consistent.

So if you don’t don’t wear black turtlenecks and berets, take a look. If you do, well, take a look anyway. Really. While not an example of beautiful design, I was able to remove the “just scaffolded” look of the Ruby Users of Minnesota website using it. And now, if we find someone more artistically inclined maybe they can spend time making it look good and less time rasslin’ with CSS.