Styleguide

All CSS is documented using KSS—specifically, the Node implantation. This creates a reliable way to build a style guide, and a consistent method of documenting CSS within the modules themselves.

Structure

All CSS is written using the SCSS flavour of Sass, and is preprocessed automatically using Harp.

The CSS is contained within the following partials, which is based on conventions from SMACSS.

  1. Base Base styles are stored here
  2. Layout Site-wide layout styles are stored here, like main containers
  3. Module The majority of the CSS is imported here. Modules make up the majority of the site and are contained within the module/ directory.
  4. State When working with JavaScript, store all state specific classes here. These should be prefixed with .is- or .js-.
  5. Shame If you’re unsure what to do, or need to fix something quickly, store it here. Just make sure to document the reason and locations it is used thoroughly, so it can be tidied up later.
  6. Vendor Unmodified dependencies are stored here. For example, Bourbon and Normalize.css are stored here.

Generating

Once you have the project cloned locally, you can rebuild the style guide with the following commands:

npm install
npm run styleguide
harp server
# Visit http://localhost:9000/styleguide