Developer Network Home - Help

The Yahoo! User Interface Library (YUI)

YUI Theater RSS badge

Jenny Donnelly — "Hacking with YUI"

YUI engineer Jenny Donnelly provides an introduction to the use of YUI in rapid prototyping environments.

Yahoo! User Interface Blog RSS badge

YUI Forum on Yahoo! Groups RSS badge

YUI on del.icio.us RSS badge

The Yahoo! User Interface Library (YUI)

The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses. The YUI project includes the YUI Library and two build-time tools: YUI Compressor (minification) and YUI Doc (documentation engine for JavaScript code).

Download YUI version 2.7.0, including full API documentation and more than 300 functional examples from YUILibrary.com.

A preview release of YUI's next-generation 3.x codeline is also available. YUI 3.x is not production-ready, but we're looking forward to your feedback on the YUI 3 forum as we prepare this new codeline for a 2009 GA release.

The library's developers blog at the YUI Blog and the YUI Library community exchanges ideas at YDN-JavaScript on Yahoo! Groups.

Using YUI:

Searchable API Documentation:

Browse and search the complete YUI API.

The YUI Compressor:

YUI Compressor is a build-process component that helps you minify your JavaScript and CSS.

YUI Doc:

YUI Doc creates beautiful, searchable API docs for JavaScript code.

YUI Developer Tools:

YUI Core:

YUI Library Utilities:

YUI Library Controls/Widgets:

YUI Library CSS Tools:

  • CSS Reset (neutralizes browser CSS styles)
  • CSS Base (applies consistent style foundation for common elements)
  • CSS Fonts (foundation for typography and font-sizing)
  • CSS Grids (more than 1,000 CSS-driven wireframes in a 4KB file)

Getting Started

  1. Check out the examples of YUI in action. We recommend starting with the Event Utility and Dom Collection examples; Event and Dom are part of the YUI Core (along with the YAHOO Global Object) and provide an important foundation for JavaScript developers using YUI. Once you've reviewed those foundational pieces, go on to explore utilities like Drag and Drop and Animation or UI controls like Button, Calendar and TabView. If you're interested in YUI's CSS components, read through the examples for Reset, Base, Fonts, and Grids in that order.
  2. Remember that there are full user's guides for each component here on the website. If you have any questions about a component as you play with the examples, check out the component's user's guide (by following any of the links along the left side of the page) or the searchable API documentation.
  3. Articles: You may also want to check out "Writing Your First YUI Application," an article designed to help you get up and running with YUI, and "Loading YUI: Seeds, Core, and Combo-handling," an article that explores the three most common strategies for including YUI on the page.
  4. You have cheat sheets for each component available on landing pages and downloadable as a full set. These documents support the online user's guides by providing concise print documentation for YUI components.
  5. Start building. You can include YUI scripts and CSS from the YUI download (in the download's /build directory) or directly from Yahoo! servers. The YUI Loader Utility is a client-side loading package that can dynamically pull in YUI scripts as needed, whether from your servers or from ours. And the YUI Dependency Configurator is a great way to calculate an optimized list of script/css includes for your particular implementation.
  6. Become a member of the YUI community. YUI developers and implementers share thoughts and solutions and provide a helping hand in our forums. YUI developers also contribute to the YUIBlog, where you'll find in-depth articles, videos and other great content about YUI and the world of frontend engineering.

Licensing

All of the YUI Library components are provided free of charge under a liberal BSD license.

Articles

  • Graded Browser Support: This article details the browser-support philosophy we use in developing the YUI Library. Graded Browser Support provides a sane path to achieving accessibility and graceful degradation while still building richly interactive interfaces in the browser.
  • Skinning YUI: YUI components get their look and feel from a visual "skin" that you can modify or replace in your own applications.
  • Building Your Own Widget Library with YUI: This article explores the creation and extension of YUI components using core YUI tools.

Cheat Sheets

Cheat Sheets for the YUI Library provide quick references to the key methods, properties, and syntax patterns of each component. When you find yourself elbow-deep in a coding problem, sometimes it's quicker to turn to these rather than firing up a browser to review documentation and examples — and reviewing the cheat sheets can help you discover hidden gems you didn't know were there.

These one page references aren't comprehensive, but we think you'll find them valuable to have on hand.

Support & Community

The YUI Library and related topics are discussed on the on the ydn-javascript mailing list.

In addition, please visit the YUIBlog for updates and articles about the YUI Library written by the library's developers.

Filing Bugs & Feature Requests

The YUI Library's public bug tracking and feature request repositories are located on the YUILibrary.com site. Before filing new feature requests or bug reports, please review our reporting guidelines.

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings