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.
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.
skinr[skin_system_name][options][1][class] = foo-class
Multiple classes should be separated by a single space.
skinr[skin_system_name][options][1][class] = foo-class bar-class
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
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
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.
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.