YUI Skin Builder - Documentation

This is a tool for creating or modifying YUI 3 Widget skins.


Use this tool to create or modify skins for YUI Widgets, with real-time previewing. A skin is the visual presentation of something, not its features or function. Use YUI Skin Builder.

Main Parts of the Tool

There are 2 main parts to the Skin Builder UI.

Control Tabs

Toward the top of YUI Skin Builder is an area with 5 tabs

Skin Preview

At the bottom of Skin Builder is an array of real instances of each of the YUI 3 Widgets selected in the "Items" tab. Their skin/appearance is continually updated with the latest changes you make in the Control Tabs.
YUI Widgets Preview

A Typical Use Pattern

  1. During all the following steps, keep an eye on the Widget previews, evaluating the results of your changes.
  2. Open the Style tab.
  3. Edit Master Color... button and color pickerClick Edit Master Color... button. The color you select should match a very dominant color from the app these widgets will appear in. For example if these skinned widgets will go on a site that has green as a high emphasis, attention attracting color, choose that same green from this color picker. You'll notice the other colors in the palette change automatically. They change to relative colors based on relationships to the "highest/master" color. These relationships are called "schemes".
  4. Edit Page Color... button and color pickerClick the Edit Page Color... button (if your page background color isn't white). From the Color Picker that pops up, select a color that matches the background color the widgets will display on. This is commonly the page background, but may be a container object that widgets will appear in. You can also enter the color directly with a hex value if you know it.
  5. sliders for text padding, border-radius, and contrastMake any changes needed to the padding and border-radius styles. You can adjust the contrast between the text and its background. This adjustment can help maintain readability.
  6. Color scheme radio button choicesClick the Schemes tab. Try other schemes to see which works best for your site. If you choose a dark background scheme, you may need to select a different "highest/master" color from the palettes tab
  7. CSS generated codeEdit the Skin Name suffix. In the markup of your site or app where widgets are to use this skin, replace the class "yui3-skin-sam" with the matching new class name, such as, "yui3-skin-myskinnamesuffix".
  8. Select the contents of the textarea labeled "CSS for all widgets". Paste this code into the file wherever you want your CSS to be referenced from. If you don't need CSS skin code for all the YUI 3 widgets, you can pick out and use only the sections of the CSS you do need.
  9. Click the Link button shown in step 7. Save this URL somewhere so you can make future edits starting where you left off. Share it with others.


Here are a couple screenshots of using YUI Skin Builder to edit/create YUI Widget skins to match existing sites.

Yahoo! Shine and YUI Skin Builder
Yahoo! Movies and YUI Skin Builder

How Does It Work?

Successfully applying colors to objects (skinning) is a process of applying the colors that will give the objects their correct visual emphasis for their function relative to other objects. Skin Builder provides a palette of colors arranged by emphasis, and then logically maps those colors onto the backgrounds, borders, and text of each part of YUI widgets and components according to their function. It then allows you to manipulate the color palette in several ways that provide infinite variety of colors while giving instant preview feedback.

Key color

This is a user-selected color. It's the color that has the most emphasis in the skin. It will be used as the background color of visually dominant widget elements such as, primary or default buttons, or selected tabs. In the Palette, it is presented as the background color of the "highest"

Main colors

There are 6 Main Colors used in this tool. From left to right, their names are...
  1. Highest
  2. High
  3. Normal
  4. Low
  5. Lowest
  6. Page
Color palette withy 6 main color blocks

Main colors "Highest" through "Lowest" are designed to hold colors of decreasing visual emphasis. The main color "Page" is the background color of the page or container the widgets will be viewed on in the final app or web page. Each of these main colors represents a family of colors that are used to color widgets.

Color scheme

A Color Scheme is a data structure that holds information about the relationship of each main color to the Key Color. The Main color "Highest" always has the same value color value as the Key Color. The value of the main color "high" might be calculated like this: Start with the key color, and adjust its hue by 0, its saturation down by 30%, and its lightness up by 20%. The value of the main color "normal" might be calculated like this: Start with the key color, and adjust its hue by 0, its saturation down by 30%, and its lightness up by 30%. Etc. A Color Scheme data structure looks like this...
        Y.ColorSpace.schemes.monochrome = {
            container: {h:0, s:0,   l:0}, // the page or container
            highest:   {h:0, s:-30, l:60},
            high:      {h:0, s:-30, l:60},
            normal:    {h:0, s:-30, l:75},
            low:       {h:0, s:-30, l:80},
            lowest:    {h:0, s:-30, l:90}

Foreground Colors

Each main color has an associated set of named, foreground colors: Each foreground color is calculated from the background color of its parent, Main color. Their names are suggestive of how they may be used to color widget elements.

The text colors have special algorithms applied to them to keep them readable given any background color.

Hover Colors

Since many widgets have objects that require visual feedback on user interaction, we provide a set of hover colors for the hover state of elements. The hover color is calculated from each of the main colors. It's a child of its parent main color. Each hover color also has a full set of foreground colors.


The Space/palette is a nested data structure collection of all the color values available for use in a particular skin. These values include all main colors, hover colors, and foreground colors. The space/palette object literal in JSON form, contains nested key-value pairs. The values are colors in hex format that looks like this.
        Skin.PALETTE = {
            block: {
                highest: {
                    background: '#3355BA',
                    gradient: '',

                    border: {
                        low: '#0B2981',
                        high: '#6680CC'

                    text: {
                        low: '#708EE6',
                        normal: '#D9E2FF',
                        high: '#ffffff'

                    rule: {
                        low: '#223A80',
                        high: '#4A69C4'

                    hover: {     // the hover color and its foreground colors
                        background: '#1B3A95',
                        gradient: '',

                        border: {
                            low: '#041D67',
                            high: '#6680CC'

                        text: {
                            low: '#5675CF',
                            normal: '#EFF3FF',
                            high: '#fff'

                        rule: {
                            low: '#162D6F',
                            high: '#314D9F'
                // next would be the other main colors,
                // "high", "normal", "low",  "lowest", and "page"

Color Mapping

Each YUI Widget has a color map file, which defines variable names and set their value equal to a color, padding, or radius value in the skin palette.
YUI.add('skin-tabview', function (Y) {

Y.Skin.renderers.tabview = function (skin) {
    var space = skin.colorspace,
        block = skin.colorspace.block;

    return {
        paddingTab: skin.padding(0.3, 0.75),
        paddingTabSelected: skin.padding(0.4, 0.75),
        paddingPanel: skin.padding(0.25, 0.5),
        tabRadius: skin.radius(0.4),    // 40% of global radius

        tabBackground: block.high.background,
        tabGradient: block.high.gradient,
        tabText: block.high.text.normal,     // Example variable is here
        tabBorderLow: block.high.border.low,
        tabBorderHigh: block.high.border.high,

        tabHoverBackground: block.high.hover.background,
        tabHoverGradient: block.high.hover.gradient,
        tabHoverText: block.high.hover.text.normal,
        tabHoverBorderLow: block.high.hover.border.low,
        tabHoverBorderHigh: block.high.hover.border.high,
For example: The mapping file for the TabView widget is named skin-tabview.js. One of the variables you can see in the snippet above is named "tabText". Its value is equal to (mapped to) the color stored in the skin object "block.high.text.normal". This is the normal text color in the "high" main color that you can see (circled) in the palette of this tool.text.normal in 'high' main color is circled

YUI Skin Builder has CSS style code templates for each widget. At the bottom of the template snippet below, you can see where the variable "tabText" is used.

{{prefix}}{{skinName}} {{prefix}}tab-label {
    background-color: {{tabBackground}};
    border-style: solid;
    border-color: {{tabBorderHigh}} {{tabBorderLow}} {{tabBorderLow}} {{tabBorderHigh}};
    border-width: 1px 1px 0 1px;
    font-size: 85%;
    padding: {{paddingTab}};
    border-radius: {{tabRadius}} {{tabRadius}} 0 0;
    color: {{tabText}};   /****** The variable in the example is here */
When the CSS templates are processed, the variables are replaced.
.yui3-skin-mine .yui3-tab-label {
    /* omitting a lot of gradient CSS here for this example */
    background-color: #b0bcdd;
    border-style: solid;
    border-color: #d1d8eb #a6b3d9 #a6b3d9 #d1d8eb;
    border-width: 1px 1px 0 1px;
    padding: 0.29em 0.75em; /*0.3em .75em;*/
    border-radius: 4px 4px 0 0;
    color: #0e1320;    /****** The variable has been replaced */
The YUI Widgets Preview uses this CSS and it's output in the code tab of the YUI Skin Builder for your use.