A word on Sam
Completely separate from the CSS Tools, but still composed entirely of CSS, the Sam skin provides a default theme for each of the library's controls. Each control contains a skin CSS file in its assets folder and should be linked to using the standard <link> tag in the <head> of any pages on which the controls are displayed.
In order to use the skin files, as well as linking to the stylesheet used by the skin, you will also need to give the containing element (whether that is the <body> or a <div>) a special class name:
<body class="yui-skin-sam">
Or, for finer control:
<div class="yui-skin-sam">
<div id="someControl"></div>
</div>
This makes using the skin extremely easy. The Sam skin takes its name from its creator Sam Lind. At its launch, it was expected that developers would contribute further skins but that has not yet happened as each site develops the skins for the components it uses instead of a whole set for all existing controls.
When exploring the assets folder of a component we might wish to customize; however, we often find ourselves somewhat confused at the number of CSS files present. In the assets folder itself we will always find a file named after the component with a -code.css suffix. This file is the minimum the control needs to work; it has no decoration whatsoever, no colors, backgrounds, nor icons. It will allow, for example, a menu to stick to the top of the screen and a submenu to unfold from it covering the main contents, but all text will be plain, menu items won't respond to the cursor hovering on them, and no arrows will hint at further submenus. We can easily see how this would look if we omit the .yui-skin-sam class name in our pages.
The Sam skin is further down under assets/skins/sam/ where we will find, besides several image files, at least a file with a .css extension and another with the -skin.css suffix. The -skin file is the one containing all the decorations and it is the one that we would use as the basis for our own skin. The file with no suffix is the one we will usually load. It is minified, even though it lacks the -min suffix, making it completely unreadable. It is made of the -core and -skin files concatenated together in that order.
If we wanted to create our own skin we would create our own folder under assets/skins and copy the -skin.css file from the sam folder. We would then modify this file, starting with a global search and replace of .yui-skin-sam into .yui-skin-xxxx or whatever we wanted to call our style.
We can then change any style attributes we want such as fonts, colors, backgrounds, icons, or any other decoration while being careful not to disturb the layout or positioning of the elements on the page. We would then concatenate the -core and -skin files together (in that order) and minify them with the YUI Compressor. That is the one we would include in our pages.
The assets folder might contain other .css files; they are old versions kept for backward compatibility.