The Yahoo! User Interface Library (YUI) is a discontinued open-source

JavaScript library A JavaScript library is a library of pre-written JavaScript code that allows for easier development of JavaScript-based applications, especially for AJAX and other web-centric technologies. Libraries With the expanded demands for JavaScript, an ea ...

for building richly interactive

web application A web application (or web app) is application software that is accessed using a web browser. Web applications are delivered on the World Wide Web to users with an active network connection. History In earlier computing models like client-serve ...

s using techniques such as

Ajax Ajax may refer to: Greek mythology and tragedy * Ajax the Great, a Greek mythological hero, son of King Telamon and Periboea * Ajax the Lesser, a Greek mythological hero, son of Oileus, the king of Locris * ''Ajax'' (play), by the ancient Greek ...

DHTML Dynamic HTML, or DHTML, is a term which was used by some browser vendors to describe the combination of HTML, style sheets and client-side scripts (JavaScript, VBScript, or any other supported scripts) that enabled the creation of interactive ...

, and

DOM Dom or DOM may refer to: People and fictional characters * Dom (given name), including fictional characters * Dom (surname) * Dom La Nena (born 1989), stage name of Brazilian-born cellist, singer and songwriter Dominique Pinto * Dom people, an et ...

scripting. YUI includes several core

CSS Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone techno ...

resources. It is available under a

BSD License BSD licenses are a family of permissive free software licenses, imposing minimal restrictions on the use and distribution of covered software. This is in contrast to copyleft licenses, which have share-alike requirements. The original BSD lic ...

. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers. In September 2009, Yahoo! released YUI 3, a new version of YUI rebuilt from the ground up to modernize the library and incorporate lessons learned from YUI 2. Among the enhancements are a

CSS selector Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone technol ...

driven engine, like

jQuery jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax. It is free, open-source software using the permissive MIT License. As of Aug 2022, jQuery is used ...

, for retrieving

elements, a greater emphasis on granularity of modules, a smaller seed file that loads other modules when necessary, and a variety of syntactic changes intended to make writing code faster and easier. The YUI Library project at Yahoo! was founded by Thomas Sha and sponsored internally by Yahoo! co-founder Jerry Yang; its principal architects have been Sha, Adam Moore, and Matt Sweeney. The library's developers maintain the YUIBlog; the YUI community discusses the library and its implementations in its community forum. On August 29, 2014, it was announced that active development of YUI by Yahoo! would end, citing the evolution of the JavaScript standards, steadily decreasing interest in large JavaScript libraries by developers, and the proliferation of server-side solutions. Future development will be limited to maintenance releases addressing issues that are "absolutely critical to Yahoo properties."

Features

The YUI Library is fully documented on its website; detailed API documentation accompanies the library download. It has six types of components: YUI core, utilities, UI controls, CSS components, developer tools, and build tools.

Core

The YUI Core is a light (31KB minified) set of tools for event management and DOM manipulation. ;YUI Global Object : The YUI Global Object contains language utilities, a script loader, and other baseline infrastructure for YUI. ;Dom Collection : Helps with common

scripting tasks, including element positioning and

style management. ;Event Utility : Provides developers with easy and safe access to browser

events Event may refer to: Gatherings of people * Ceremony, an event of ritual significance, performed on a special occasion * Convention (meeting), a gathering of individuals engaged in some common interest * Event management, the organization of ev ...

(such as mouse clicks and key presses). It also provides the Custom Event object for publishing and subscribing to custom events.

Utilities

; Animation : Helps create "effects" by animating the position, size, opacity or other characteristics of page elements. ; Browser History Manager : Helps web applications use the browser's back button and bookmarking functionality. ; Connection Manager : Helps manage

XMLHttpRequest XMLHttpRequest (XHR) is an API in the form of an object whose methods transfer data between a web browser and a web server. The object is provided by the browser's JavaScript environment. Particularly, retrieval of data from XHR for the purpos ...

transactions in a

cross-browser Cross-browser compatibility is the ability of a website or web application to function across different Web browser, browsers and Fault tolerance, degrade gracefully when browser features are absent or lacking. History Background The history ...

fashion. It has integrated support for

form Form is the shape, visual appearance, or configuration of an object. In a wider sense, the form is the way something happens. Form also refers to: *Form (document), a document (printed or electronic) with spaces in which to write or enter data ...

posts,

error handling In computing and computer programming, exception handling is the process of responding to the occurrence of ''exceptions'' – anomalous or exceptional conditions requiring special processing – during the execution of a program. In general, an ...

, callbacks and file uploading. ; Cookie : Allows you to manage

browser cookies HTTP cookies (also called web cookies, Internet cookies, browser cookies, or simply cookies) are small blocks of data created by a web server while a user is browsing a website and placed on the user's computer or other device by the user's ...

and subcookies through a simple API. ; DataSource : Provides a common configurable interface for other components to interact with different types of data, from simple JavaScript arrays to online servers over XHR. ; Drag and drop : The YUI Drag and Drop Utility makes it easy to make elements " draggable" and to create drop targets that respond to drag events. ; Element : Provides a wrapper for

HTML element An HTML element is a type of HTML (HyperText Markup Language) document component, one of several types of HTML nodes (there are also text nodes, comment nodes and others). The first used version of HTML was written by Tim Berners-Lee in 1993 ...

s in the DOM and makes simpler common tasks such as adding listeners, manipulating the DOM, and setting and getting attributes. ; Get : The Get Utility supports the asynchronous loading of data and scripts through script nodes and the dynamic loading of external CSS files. ; ImageLoader : YUI's ImageLoader allows you to defer the loading of images that are not visible in the viewport at the time the page loads. This can result in big performance boosts. ; JSON : The JSON Utility provides methods for validation of incoming

JSON JSON (JavaScript Object Notation, pronounced ; also ) is an open standard file format and data interchange format that uses human-readable text to store and transmit data objects consisting of attribute–value pairs and arrays (or other ser ...

data to verify that it is safe and methods to convert JavaScript data to a JSON-formatted string. These methods are based on Douglas Crockford's work at JSON.org. ; Resize : Allows you to make any block-level HTML element resizable. ; Selector : The YUI Selector Utility allows you to grab references to HTML elements via CSS3 selector syntax. ; YUI Loader : YUI Loader is a client-side loader engine that can dynamically load any YUI component (and dependencies) on the fly.

Controls

; AutoComplete : Provides

autocomplete Autocomplete, or word completion, is a feature in which an application predicts the rest of a word a user is typing. In Android and iOS smartphones, this is called predictive text. In graphical user interfaces, users can typically press the tab ...

feature (suggestion lists and type-ahead functionality) for user interactions involving text-entry. It supports a variety of data-source formats. It also supports server-side data-sources via XMLHttpRequest. ; Button : Enables the creation of rich, graphical buttons that function like traditional HTML form buttons. ; Calendar : A graphical, dynamic control used for date selection. ; Charts : The Charts Control retrieves data via the DataSource Utility and displays the data in a variety of common chart formats (line, bar, pie, etc.). ; Color Picker : The Color Picker Control provides a rich visual interface for color selection. ; Container : Supports a variety of DHTML windowing patterns including

Tooltip The tooltip, also known as infotip or hint, is a common graphical user interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element, such as a description of a button's f ...

, Panel, Dialog, SimpleDialog, Module and Overlay. ; DataTable : Simple yet powerful API to display screen-reader accessible tabular data on a web page. Notable features include sortable columns, pagination, scrolling, row selection, resizable columns, and inline editing. ; ImageCropper : ImageCropper provides the UI and interactive elements for a client-side image cropper. ; Layout Manager : Allows you to create cross-browser, pixel perfect layouts with little effort by providing a fixed layout containing, top, bottom, left, right and center layout units. ; Menu : Provides an easy API for creating fly-out menus, menu bars, and context menus. ; Rich Text Editor : The

YUI Rich Text Editor YUI Rich Text Editor is a project developed by Yahoo! as a part of the YUI Library for an online rich-text editor An online rich-text editor is the interface for editing rich text within web browsers, which presents the user with a "what-yo ...

is a sophisticated client-side text-processor that is modular and highly configurable, suitable for any open-ended text-entry situation. ; Slider : Provides a generic slider element that enables the user to choose within a finite range of values on one or two axes. ; TabView : Provides navigable tabbed views of content; supports dynamic loading of tab content via XMLHttpRequest. ; TreeView : Produces a content tree whose nodes can be expanded and contracted. ; Uploader : Allows for multi-file file upload with feedback on upload progress.

CSS resources

; CSS Base : Use Base after Reset to provide a consistent, cross-browser replacement for the standard browser CSS rules to which web developers are accustomed. ; CSS Grids : Seven basic page wireframes with subsection components to support over 1000 different page layouts. ; CSS Fonts : Standardized cross-browser font families and size rendering. ; CSS Reset : CSS declarations remove margins and standardize cross-browser rendering on common elements.

Developer tools

; Logger : Provides a quick and easy way to write

log Log most often refers to: * Trunk (botany), the stem and main wooden axis of a tree, called logs when cut ** Logging, cutting down trees for logs ** Firewood, logs used for fuel ** Lumber or timber, converted from wood logs * Logarithm, in mathe ...

messages to an on-screen console, the Firebug extension for

Mozilla Firefox Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements current and a ...

, or the

Safari A safari (; ) is an overland journey to observe wild animals, especially in eastern or southern Africa. The so-called "Big Five" game animals of Africa – lion, leopard, rhinoceros, elephant, and Cape buffalo – particularly form an importa ...

JavaScript console. ; Profiler : A cross-browser, non-visual code profiler for JavaScript. ; ProfilerViewer : Used in combination with Profiler to provide rich visualizations of your profiling data — both graphically (using the Charts Control) and in tabular format (using DataTable). ; YUI Test : YUI Test is a testing framework for browser-based JavaScript solutions. Using YUI Test, you can easily add unit testing to your JavaScript solutions. While not a direct port from any specific xUnit framework, YUI Test does derive some characteristics from nUnit and JUnit.

Build tools

; YUI Compressor : YUI Compressor is a tool that minifies

JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of Website, websites use JavaScript on the Client (computing), client side ...

and CSS safely. ; YUIDoc : YUIDoc is a tool written in

that generates searchable API documentation of JavaScript code. It is typically used as part of a build process. YUIDoc is comment-driven and is compatible with a variety of coding styles and programming languages.

References

External links

YUI Project Site and Issue Trackers

YUI Public Source Code Repository

Yahoo! User Interface Blog

Yahoo! Design Patterns Library

YUICoder.com - Manipulating the Yahoo! User Interface
(covers old YUI 2.x) {{DEFAULTSORT:Yahoo! Ui Library Yahoo! software JavaScript libraries Ajax (programming) CSS frameworks Software using the BSD license