Skinning using Pure CSS

You can choose a skin, essentially a color scheme with settings for other visual attributes like padding, rounded corners etc., for Pure CSS form elements. The examples in the previous sections used a skin specifically generated for this guide.

The steps required to use a Pure CSS skin are as follows:

• Use the online PureCSS skin builder to define your scheme.
• From the Code tab on that page, specify a CSS class name for your scheme and copy the the generated CSS definitions to a CSS file in an appropriate directory as described in the Directory Structure section.
• Modify your application's Controller constructor to include the stylesheet and to specify the skin's CSS class name for the appropriate sections.

As an example, to create the skin for this guide, the CSS generated by the skin builder was saved to the file pure-skin-ug.css in the public/stylesheets directory.

The following lines were added to the constructor for the UgController class.

pagevar set stylesheets {
    _woof_ug.css pure-skin-ug.css
}
pagevar set main {cssclasses {+ pure-skin-ug}}

The first command loads the common CSS definitions for this guide and the CSS skin. The second command specifies that the skin be added to the main page section.

Note two points about the use of skins.

• First, the default layout allows for different skins to be used for each page section.
• Second, since the skins are loaded via the constructor, they can be switched at run time, for example based on user preferences.