YUI is a JavaScript and CSS library developed by Yahoo for building interactive web applications. It includes core functions for DOM manipulation and events, utilities for common tasks like Ajax calls and animation, UI controls like menus and sliders, and developer tools for testing and profiling applications. The document provides details on YUI's features and components. It also gives examples of how YUI can be used and lists some well-known websites that implement YUI in their designs.

1. YUI
Yahoo! User Interface Library
A presentation by

2. contents
I. what is YUI?
II. what does it all mean?
III. what does it look like?
IV. who uses YUI?
V. want to get some?
A presentation by

3. what is YUI?
a collection of JavaScript and CSS Resources for
building richly interactive web applications
using DOM scripting and DHTML and AJAX.
developed for internal use but now available
under a BSD (Berkeley Software Distribution) license.
supported by Firefox 3, Firefox 2, IE 7, IE 6,
Opera 9.5, Safari 3.1.
A presentation by

4. what is YUI?
features of YUI
6 types of YUI components:
core
utilities
UI controls
CSS components
developer tools
build tools
A presentation by

5. what does it all mean?
features of YUI (continued)
core:
a set of tools for event management and DOM
manipulation.
YAHOO! Global Object – contains language utilities and
other infrastructure for YUI.
DOM Collection – simplifies common DOM scripting
tasks such as positioning and CSS Style Management.
Event Utility – provides developers easy & safe access
to browser events such as mouse clicks and key presses.
A presentation by

6. what does it all mean?
features of YUI (continued)
utilities:
reusable infrastructure libraries that handle things like
events, Ajax calls, animation, and drag and drop.
• animation • image loader
• browser history manager • JSON (JavaScript Object Notation)
• connection manager • resize
• data source • selector
• drag and drop • YUI loader
A presentation by

7. what does it all mean?
features of YUI (continued)
UI controls:
• auto-complete • image cropper
• button • layout manager menu
• calendar • rich text editor
• charts • slider
• color picker • tab view
• container • tree view
• data table • uploaded
A presentation by

8. what does it all mean?
features of YUI (continued)
developer tools:
logger – read or write log messages with a single line of
code!
profiler – non-visual code profiler that allows you to specify
which parts of your application to profile.
ProfileViewer – used with Profiler to provide visualizations of
profiling data in graphical and tabular format.
YUI Test – create test cases, failure detection, etc. for
browser-based JavaScript solutions.
A presentation by

9. what does it look like?
working examples:
event utility- http://developer.yahoo.com/yui/examples/event/
eventsimple.html
using custom units for an animation-http://
developer.yahoo.com/yui/examples/animation/units.html
basic drag and drop- http://developer.yahoo.com/yui/examples/
dragdrop/dd-basic.html
animated proxy re-size- http://developer.yahoo.com/yui/examples/
resize/anim_resize.html
submit form-http://developer.yahoo.com/yui/examples/button/
btn_example05.html
A presentation by

10. who uses YUI?
http://www.linkedin.com/
http://www.jetblue.com/
http://www.target.com/
http://www.smugmug.com/
http://www.southwest.com/
http://images.insuggest.com/
http://www.dataffect.com/usgs/#
http://www.tag4you.com/flickr.php
A presentation by

11. want to get some?
hello@momentumdesignlab.com
1.866.542.7124
A presentation by