Yahoo! UI Library: Understanding YUI Skins

Understanding YUI Skins

By Nate Koechley
Yahoo! Inc.
August 1, 2007

The visual presentation of YUI controls is defined with CSS. YUI version 2.3.0 includes a new, cohesive, visual look and feel, or skin. We call this skin "Sam" as a thank you to talented designer Sam Lind for creating it and working with the YUI team to see it implemented.

Using YUI Skins

There are two steps to using YUI skins. First, add the skin's class name to your document, or regions of your document. Second, link in the skin's CSS file.

CSS rules for skins are "namespaced" under contextual selectors based on the skin name, in this case "yui-skin-sam." You can apply the skin to the full document or just to specific regions or controls.

To apply the Sam Skin to an entire page, add a "yui-skin-sam" class value to your body element:

To apply the skin to a region or single control, wrap just that portion of the page:

You'll also need to link in the skin's CSS. As we'll see below, the optimized CSS file for a skin lives within the skin's shared assets folder, and within the component-specific skin folder:

/build/assets/skins/sam/button.css
/build/button/assets/skins/sam/button.css

Backward Compatibility

Even as we add new functionality and visual skins to YUI we intend to preserve compatibility—including at the presentational CSS layer—throughout the 2.x lifecycle. Because all the rules for the skin are namespaced under a class value that you explicitly add to your document, we will continue to support the pre 2.3.0 "no-skin" presentation as the default.

YUI's Two Flavors of CSS

Each skin has two CSS files per control: one for core functionality and one for visual presentation. Core CSS defines essential functionality and structure. Presentational CSS defines cosmetics such as color, imagery and typography. Without core CSS the controls stop working; without presentational CSS they simply look different.

No-skin Resources

The file structure and resource list for YUI Button's default presentation are unchanged from pre 2.3.0 versions. The script lives within the component's directory under /build/. The CSS and image files are unchanged within /assets/ under the component.

/build/button/button.js
/build/button/button-debug.js
/build/button/button-min.js
/build/button/assets/button.css
/build/button/assets/button-core.css
/build/button/assets/background.png
/build/button/assets/splitarrow.gif

Because the default no-skin is primarily core instead of presentational, and because we want to support the historic default presentation out of the box, in many cases the [component]-core.css is intentionally blank and the entire CSS for no-skin lives in [component].css. Even when empty, we've included the empty *-core.css for going-forward consistency.

Sam Skin Resources

Here is the file structure and resources list for YUI Button's Sam skin. The skinned version of a component shares script file(s) and core CSS with the no-skin version, but brings its own presentational CSS and image files. These resources live within a skin and skin-name directory within the components assets directory:

/build/button/button.js
/build/button/button-debug.js
/build/button/button-min.js
/build/button/assets/skins/sam/button.css
/build/button/assets/skins/sam/button-skin.css
/build/button/assets/skins/sam/background.png
/build/button/assets/skins/sam/splitarrow.gif

Note that in the above list button.css is the result of concatenating and minimizing /build/button/assets/skins/sam/button-skin.css and /build/buttons/assets/button-core.css.

Shared Skin Resources

Resources shared across a skin, such as the master image sprite, live in a shared directory:

/build/assets/skins/sam/sprite.png

Minimized, Concatenated Skin Resources

Though skins are developed as two CSS files during development, we concatenate and minimize them for production use. They live in this optimized form in the top-level assets folder alongside the shared image resources:

/build/assets/skins/sam/button.css
/build/assets/skins/sam/calendar.css
/build/assets/skins/sam/sprite.png

The Uber Skin File

In addition to a rolled-up CSS file for each component we provide a rolled-up CSS file for the complete library:

/build/assets/skins/sam/skin.css

Skinning Examples

Though this article provides an overview of our approach to skinning YUI and the resources involved, each component's roster of functional examples includes an example of skinning that component.

Extending and Creating Skins

Sam Lind created a beautiful and efficient skin for YUI. The color palette is small and efficiently reused. A majority of the image assets are shared across the library -- gradients, icons, and arrows, and are contained in a single, optimized, ~4k image sprite; a small set of additional images that couldn't be sprited live flat in the same build/assets/skins/sam directory.

To modify and/or extend the Sam skin, explore the assets in that shared directory. Or copy that directory and use it as a starting point for entirely new skins.

We plan to offer additional skins in the future, and we invite you to create new skins as well.

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.