Introduction to the Yahoo User Interface Library

The Yahoo User Interface library is a set of mix and match JavaScript components and formatting style sheets for simplifying the front end of web development: the code that gets downloaded into a visitor's browser that arguably makes the biggest difference in the richness of the user experience. These are the same user interface libraries Yahoo has standardized on internally and used to redesign the Yahoo home page and create new properties such as Yahoo Pipes and Yahoo Mash. The YUI was released under a simple BSD open source license in February 2006, and Yahoo continues to refine and expand it.

The examples shown here are adapted from those at the Yahoo Developer Network website, and the developers there have done all the really hard work. But that's kind of the point! By including these JavaScript and Cascading Style Sheets (CSS) libraries, you can create fancy Web 2.0 effects fairly quickly. In addition to providing source code, Yahoo allows other websites to tap into its data center and content distribution infrastructure by serving the YUI JavaScript and CSS files from its servers rather than their own.

A YUI Drop-Down Menu

The page you are looking at now was created around YUI components for animating, organizing, and navigating content. If you hover your mouse over "Ziff Davis Enterprise " on the menu at the top of this page, you should see a drop down list of links, thanks to the YUI menu component. For another example, try this button to see YUI animation in action:

Dazzle Me

At a more basic level, Yahoo has created a series of CSS files that normalize the treatement of fonts and margins, leveling the playing field between browsers. Similarly, Yahoo's JavaScript libraries attempt to factor out the differences in how different browsers process JavaScript.

While this is not intended as an in-depth coder's tutorial, we'll give you and overview of how the YUI works and where you might want to use it. And although this is only one of several such libraries available to web developers, Yahoo's versions have the advantage of having been tested at a very large scale, across a wide variety of browsers and browser versions.

Before diving into our tour, we've got a quick refresher course on the next page on JavaScript and how it interacts with the HTML document object model and CSS. If that's too basic for you, feel free to skip ahead.

Topics

Introduction
Background: HTML, CSS, and JavaScript
Connection (AJAX)
Navigation Menu
Tabs
Animation
More Animation
Drag & Drop
Form Controls
Slider
Dialog
More