The main advantage of using Skinr is that it provides a means of easily reusing CSS classes. How you set up those classes and the code you provide is up to you. This page is meant to inform you about your options.

### CSS classes in Skins

Classes in Skinr are typically defined in the skin options. A single class is all that is necessary, but multiple classes can easily be added.

#### Single Class

    skinr[skin_system_name][options][1][class] = foo-class

#### Multiple Classses

Multiple classes should be separated by a single space.

    skinr[skin_system_name][options][1][class] = foo-class bar-class

### External CSS & JavaScript files

CSS can be stored in external files, or the files can simply be added to your theme's existing CSS file. Personally, I like to create a separate CSS file that stores the bulk of Skinr CSS. The same can be done with JavaScript files. If your skins require CSS & Javascript that is used site wide, the best approach is to load the files normally via the theme. This will ensure your files are loaded on all pages and therefore always available.

    stylesheets[all][] = css/skinr.css
    scripts[] = js/skinr.js

#### Adding files to skins

There are cases where it makes sense to handle loading the CSS/JavaScript files in the skin itself. This can be done by by adding the following line(s) to your skin.

    skinr[skin_system_name][scripts][] = css/dropdown.js
    skinr[skin_system_name][stylesheets][all][] = css/dropdown.css

#### Adding files to skin options

This can be taken a step further by including files per option. Below is a detailed example of what a use case for this might look like:

    skinr[dropdowns][title] = Dropdown Menus
    skinr[dropdowns][type] = select
    skinr[dropdowns][description] = Select a vertical or horizontal dropdown menu.
    skinr[dropdowns][features][] = block_menu_block
    skinr[dropdowns][stylesheets][all][] = css/dropdown.css
    skinr[dropdowns][scripts][] = js/hoverIntent.js

    skinr[dropdowns][options][1][label] = Horizontal
    skinr[dropdowns][options][1][class] = dd-vertical
    skinr[dropdowns][options][1][stylesheets][all][] = css/dropdown-vertical.css
    skinr[dropdowns][options][1][scripts][] = js/dropdown-vertical.js

    skinr[dropdowns][options][2][label] = Vertical
    skinr[dropdowns][options][2][class] = dd-horizontal
    skinr[dropdowns][options][2][stylesheets][all][] = css/dropdown-horizontal.css
    skinr[dropdowns][options][2][scripts][] = js/dropdown-horizontal.js

The syntax for adding these files is the same as Drupal. See Structure of the .info file for full details.

### Defining classes in the UI

In addition to defining CSS classes in the .info file, you can also add classes directly into the UI. Under "Advanced Options" there is a text field where you can add a class or classes manually. The syntax for adding classes the same as the above examples, with multiple classes separated by a space.