Jul. 13th, 2009

style_kit: The swirl logo with Dreamwidth under it in red. (Default)
[personal profile] style_kit

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.

style_kit: The swirl logo with Dreamwidth under it in red. (Default)
[personal profile] style_kit
This post is for Style Kit suggestions and bug reports. Is something not working quite right? Do you have a test case you think should be included? Let me know!
style_kit: The swirl logo with Dreamwidth under it in red. (Default)
[personal profile] style_kit
I've generated the first style kit for Tabula Rasa:

Tabula Rasa Style Kit, 2009-07-13

Style kits will be labeled by their style and the date of their release. Since this is the first kit for this style, glitches can be expected! Let me know if you run into any problems or need help.


The Style Kit

February 2010

1415 1617181920

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Sep. 24th, 2017 04:52 am
Powered by Dreamwidth Studios