Yahoo Did It

If you've ever seen the "South Park" episode where Butters goes insane trying to think up an evil plot only to discover that it was already done on a "The Simpson's" eposode, you're ready to discover Yahoo UI. Almost every component from menus to tabs to DHTML windows and HTML editors with drag and drop images is there and pretty darn responsive.

Most of the components can be overlaid over core HTML for insulation from non JS environments. They are already in use by Yahoo itself, and so have been pretty fiercely experience tested.

While the emphasis is on JavaScript components, the YUI libraries also include useful CSS; they include libraries to eliminate differences between browsers (they strip away then consistently redefine the basic elements like bulleted lists) and to set a standard for font size by percent, to make user-scaled text consistent. Finally they have tableless CSS grids and a utility that creates a basic grid via a Javascript ui widget with adjustable columns, width and the choice of fixed and full page structure.

Yahoo libraries and CSS can be linked to directly from the Yahoo servers; they also aggregate multiple files into single linked file resources, which reduces HTTP request roundtrips.

Ease of UI

The documentation and example set for the widgets is immense and thorough including "cheat sheet" one page printouts for each widget and help for custom skinning the UI. The Video Lectures are especially instructive and give you a chance to "get inside the head" of the design team. I found the CSS lecture especially illuminating.

For the most part, Yahoo's UI can be used without any server side coding background; that being said, they do use some cutting edge Javascript and while complete knowledge of Javasecript is not a prerequisite, it helps to have experience in Object Oriented JS to understand the configuration and component organization. For the most part, though, the example code can be stripped into your project with a few simple "tweaks."

If you are considering using or writing a UI widget you owe it to yourself to explore the selection from Yahoo. They are easily the best component set I've seen for dynamic website development. For a chance to see them in action, check out the new interface for Yahoo Mail, or the Yahoo site's Autocomplete widget and multi-tab homepage.

And an update...

I've moved on to Dojo as my AJAX of choice -- there may be slightly more variety in the YUI components, but the underpinnings of Dojo. That being said -- I still find the Yahoo CSS libraries extremely useful.