onidle(…)

I wrote about the Yahoo! UI CSS components a while back. At the time I found an interesting article about vertical rhythm in Web typography. The article, Compose to a Vertical Rhythm from the 2006 24Ways list explains the how’s and why’s of nice-looking typography on the web. Turns out the Yahoo! UI Reset stylesheet is a great way to start with this technique since it basically “zeros out” all font sizes in a effort to achieve cross-browser rendering nirvana.

Fast-forward a few months… Geoffrey Grosenbach recently redesigned the PeepCode site using the same techniques for the type. Richard Rutter, author of the 24ways article, gave a talk at SXSW on the topic. What’s more, Geoffrey has published a great tool, the Baseline Rhythm Calculator, to generate the required CSS to implement Richard’s technique. Combine this with YUI Reset and you have good looking type with almost zero effort. Very nice! There are links to other relevant articles on the calculator’s page. Go check it out!

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.