Developer

Learn to use the YUI Skin Builder

Create custom skins to use with Pure CSS modules with minimalist styling.

In a previous series of posts, I described using the Pure CSS Modules as a way to quick-start web development projects, and one of the tools available allows you to create custom skins for the modules using the YUI Skin Builder. The YUI Skin Builder can be used to create your own custom CSS and can also be a great tool for creating your own themes using its minimalist styling; you can view the application interface by clicking the thumbnail in Figure A.

Click to enlarge.

I will review ways to create your own YUI widget skins where you can manipulate styles, schemes, and items which include autocomplete, overlay, button, panel, calendar, data table, horizontal slider, dial, and tab view. The resulting code from your settings can then be copied into your CSS files.

Style

Selections in the style tab give you controls to create your own master color settings and page color settings where changes to the master color will affect the whole palette skin, and changes to the page color will let you see how the skin will appear on top of a background color.   For demonstration, I've made a slight edit moving the master color to #4a35b6 which sets the new purple hue as the latest master style; shifting the page color to #e5e4e7 sets the fresh background page color as shown in Figure B:

Horizontal padding, vertical padding, border radius and text contrast are the slider controls that can be manipulated to affect these CSS properties. As they are adjusted, their real-time preview is displayed in the sample sections. For demonstration purposes, I've made the following edits: horizontal padding set to 70%, vertical padding set to 120%, border radius set to 140%, and text contrast set to 150; the resulting preview is displayed in Figure C:

You can also see a detailed preview of the color palette for low, normal and high text as well as for hover effects by clicking on the Preview color palette details at the top right side of the skin builder dashboard. The resulting display is shown in Figure D. The six master color settings range from the Highest/Master Color, which is displayed on the far left, High, Normal, Low, Lowest and finally, the Page or Container Colors.

Figure D

Schemes

The default setting has the skin builder at a Monochrome scheme, and the other scheme selections include Color Plus Gray, Complementary, Dark Complementary, and Dark Monochrome, or you can create your own with the Create Custom Palette. With the Create Custom Palette selected the detailed preview allows you to adjust the scheme colors across the custom palette quite similar to the same palette displayed in Figure D above, but with adjustment controls for each of the six master color settings as shown in Figure E:

Items

You can select the widgets or modules to skin and can preview your selections below the controls. By default, all the Pure Modules are checked displayed, with the exception of the Menu Nav Top which has been deprecated and by default is unchecked. You can Remove All and then select the Pure Modules that you want to edit; all widgets or modules that are selected will be added to the code generator. The YUI Widget selection area is displayed in Figure F:

Code

The selected widgets and modules along with your master color and page color styles and schemes are all rolled up into your own CSS code set, where you can change the name of your skin by adding your own custom name in the input field, which populates the new class names to all the properties defined in the file. Options including copying and pasting the code from the text area into your files / application or alternatively, you can copy the link to the custom skin URL. In this case the Demo URL created as:

http://yui.github.io/skinbuilder/index.html?opt=demo,4a35b6,e5e4e7,0.7,1.2,14,1.5&h=0,-30,60&n=0,-30,75&l=0,-30,80&b=0,-30,90
The URL will capture all your current skin settings where you can save it for later or share. A portion of the code tab for this demo as shown in the browser is displayed in Figure G:

A small snippet of the code for the skin builder active buttons is copied below:

.yui3-skin-demo .yui3-button-active,
.yui3-skin-demo .yui3-button:active {
    border: inset 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1A000000', endColorstr='#26000000', GradientType=0);
    background: background:    -moz-linear-gradient(top, rgba(252, 251, 254, 0.3) 0%, rgba(74, 53, 182, 0) 49%, rgba(74, 53, 182, 0) 51%, rgba(19, 14, 47, 0.3) 100%);
    background:  -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(252, 251, 254, 0.3)), color-stop(49%, rgba(74, 53, 182, 0)), color-stop(51%, rgba(74, 53, 182, 0)), color-stop(100%,rgba(19, 14, 47, 0.3)));
    background: -webkit-linear-gradient(top, rgba(252, 251, 254, 0.3) 0%, rgba(74, 53, 182, 0) 49%, rgba(74, 53, 182, 0) 51%, rgba(19, 14, 47, 0.3) 100%);
    background:      -o-linear-gradient(top, rgba(252, 251, 254, 0.3) 0%, rgba(74, 53, 182, 0) 49%, rgba(74, 53, 182, 0) 51%, rgba(19, 14, 47, 0.3) 100%);
    background:     -ms-linear-gradient(top, rgba(252, 251, 254, 0.3) 0%, rgba(74, 53, 182, 0) 49%, rgba(74, 53, 182, 0) 51%, rgba(19, 14, 47, 0.3) 100%);
    background:   linear-gradient(to bottom, rgba(252, 251, 254, 0.3) 0%, rgba(74, 53, 182, 0) 49%, rgba(74, 53, 182, 0) 51%, rgba(19, 14, 47, 0.3) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33ffffff', endColorstr='#1a000000',GradientType=0 );
    background-color: #4a35b6;
    color: #fcfbfe;
    -webkit-box-shadow: 0 0 1px rgba(0,0,0, 0.25) inset, 0 2px 4px rgba(0,0,0, 0.30) inset;
    -moz-box-shadow: 0 0 1px rgba(0,0,0, 0.25) inset, 0 2px 4px rgba(0,0,0, 0.30) inset;
    box-shadow: 0 0 1px rgba(0,0,0, 0.25) inset, 0 2px 4px rgba(0,0,0, 0.30) inset;
}

Documentation

The documentation for the YUI Skin Builder includes an overview of the main parts of the tool, including control tabs for style, schemes, items, and code. An in-depth step-by-step review of a typical use pattern is provided and then several examples of the YUI Skin Builder results are displayed. A How does it work? section describes the key color, main colors, color schemes, foreground colors, hover colors, space/palette, and color mapping for each YUI widget. An example of the sample usage provided in the documentation is displayed in Figure H.

Just remember to edit the class names in your web page documents to match those of the new class styles in your CSS code that gets generated from the YUI Skin Builde;, in the demo example class names such as yui3-skin-demo are created. You can change the demo portion of the class name to any name that makes sense to you for your application. You can use the YUI Skin Builder when you need to create a quick theme and color scheme for the Pure CSS Modules in your web development projects.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

Editor's Picks