Community Profile

What is a style kit?

It's a folder with some useful CSS and HTML files for people doing CSS design on Dreamwidth styles. It helps speed up your CSS testing in two ways:

1. CSS is easier to change this way. You don't have to copy-paste CSS into the Custom CSS section of style customization, put it into an extension like Firebug or Stylish, or upload it to an external server. You just edit the CSS files that hook into the example pages and instantly refresh to see the changes--because they're local files on your computer, there's not even any network latency.
2. The Style Kit is designed to provide many test cases for your theme, like screened comments, adult content, or locked posts, and different modules. It also has a markup check page so you can check your style against a variety of standard HTML markup.

How to use a style kit

A style kit comes in a bundled download. After you download and uncompress the style kit, you'll have a folder which has more folders inside of it, with different variations of a given style.

If a style has the ability to turn off all default styling, then there will be a no_default folder of that particular variation in the style's folder. There will also be folders for each page setup option on the select style page.

The CSS files you edit are in the css folder. The general.css file is included in every single file in all the theme directories. Each variation also has its own CSS file, like no_default.css and two_column_left.css. These CSS files only hook up with files for that particular variation. This will help you sort out CSS that only belongs to one particular layout, as opposed to general style CSS.

So, edit a CSS file with a text editor to make changes to the CSS, and open up HTML pages in your browser to see what it looks like. After you save your changes in the text editor, you can refresh the HTML page in your browser to see the effects.