CSS rules for skins are "namespaced" under contextual selectors based on the skin name. The default selector for YUI is "yui3-skin-sam." You can apply a skin to the full document or just to specific regions or controls.
To apply the "sam" skin (named in honor of Sam Lind, the designer who created it) to an entire page, add the "yui3-skin-sam" class value to your body element:
To apply the skin to a region or single widget, wrap just that portion of the page:
<div class="yui3-skin-sam"> <span class="yui3-button"></span> </div>
By default, YUI will load all the assets required for the "sam" skin and apply them to the elements that you've classed with 'yui3-skin-sam'.
An alternate, "night" skin, became available in YUI version 3.4.0. In order to enable the "night" skin on your page, apply the "yui3-skin-night" class value to your body element:
To apply the "night" skin to a region or single widget, wrap just that portion of the page:
<div class="yui3-skin-night"> <span class="yui3-button"></span> </div>
There two ways to load skin files, either statically through a
<link> tag or through YUI's built-in Loader infrastructure.
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:
Components break up their CSS definitions into modular files: one "core" file for functionality and structure essential to the component, and multiple "skin" files that define cosmetic aspects such as color, imagery and typography. When an AutoComplete widget is loaded on your page, the CSS is actually a concatenation (and minification) of AutoComplete's "core" CSS plus the specified "skin" CSS.
When assets are required for a particular skin, they can be found in the skin directory of the component's assets directory:
Resources shared across skins live in a shared assets directory:
Although skins are developed independently from core 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:
Skin creators should preserve the "core" CSS of each component and simply add look-and-feel CSS via "skin" CSS. YUI offers "sam" and "night" skins, two complementary visual treatments for the widgets in the library. We invite you to explore the assets directories, modify and/or extend the these skins or copy them as a starting point for entirely new skins.
This project is kindly supported by Creative Agency, Imaginaire Digital in Nottingham, UK.