KSS Living Style Guide with Brunch

This is a skeleton for building a living stylguide with Brunch and KSS (using kss-node).

The skeleton features:

• A living style guide with kss-node
• SCSS / JS support
• BrowserSync integration (live reload)
• An improved kss-node theme
• A sample type component to get you started

Installation

Clone this repo manually or run:

   brunch new -s gh:fakeller/kss-brunch-seed

Getting started

• Install (if you don't have them):
  • Node.js
  • Brunch, required plugins, and app dependencies: npm install or yarn install
• Run:
  • npm start or yarn start — watches the project with continuous rebuild and BrowserSync.
  • npm run build or yarn run build — builds minified project for production
• Learn:
  • public/ dir is fully auto-generated and served by BrowserSync.
  • app/ dir contains all SCSS / JS / assets that make up the living style guide
  • styleguide/ dir allows to customize the style guide itself
  • kss-brunch plugin can configure the generated living style guide
  • kss-node generates the living style guide and documents all available options
  • Brunch site, Getting started guide

kss-node theme

The style guide skeleton contains an improved kss-node theme with improved readability and space-usage. It also has some improved documentation features.

Hints:

Place a markdown blockquote in a KSS description and the blockquote will be rendered as a highlighted hint for additional information and context. For example:

/*
Alignment

Easily realign text to components with text alignment classes.

> # Hint:
> These controls are too fine granular. Please use a more abstract element to control text flow, if possible.

Markup:
...
*/

License

The license is public domain. Use it however you want.

---

Project created and maintained by Fabian Keller.