Redbooth CSS styleguides

Here we document how we like to do CSS. Because we <3 CSS.

TODO

We ported our old style guide from ruby kss generator to node kss generator. These are things we need to do in our styleguide.

• Port all sections from old styleguide to node. Now we only have colors and a button example.
• Discuss, change and document here a better CSS file structure.
• Add more interesting doc to this homepage. For now only KSS spec.
• Add your sugerences here.

KSS Specification

We use KSS specification to document our CSS.

Unlike TomDoc, not every CSS rule should be documented. You should document a rule declaration when the rule can accurately describe a visual UI element in the styleguide. Each element should have one documentation block describing that particular UI element's various states.

KSS documentation is hierarchical in nature — any documentation blocks at any point within the styleguide hierarchy apply to the documentation blocks beneath that level. This means that documentation for 2.1 applies to documentation for 2.1.3.

Jade

For each element you must provide the templates in jade. You can find some in the styleguide/core-css/jade/ folder.

Format

The basic format for KSS documentation can be best explained in an example:

/**
 * <Section Title>
 *
 * Styleguide <Section>
 */

/**
 * <Element Title>
 *
 * <Element Description>
 *
 * <Markup: path/to/your/jade>
 *
 * <.your--class> - <modifier description>
 *
 * Styleguide <Element> - Basic
 */

Each KSS documentation block consists of three parts: a description of what the element does or looks like, a list of modifier classes or pseudo-classes and how they modify the element, and a reference to the element's position in the styleguide.