kss-jade-react-generator

A kss-node's generator - supporting Jade and React component

Currently lacks tests

Overview

This is mostly a direct translation of the kss-node's default Handlebars generator, but few changes are added.

In addition to Jade, React components can be used as the external markup file.

Features

• Plain HTML and Jade as inline markup
• Plain HTML, Jade and React component as external files
• Load the custom helpers which can be used within a template
• Custom properties are added to the template (see below for more details)

Custom Properties

Some custom properties are added for richer style guide creation.

These properties must be set with either following ways:

• With CLI command - Use --custom option (see the official kss-node documentation)
• With JavaScript API - Pass the option including custom property with array value during the initialization (see gulpfile.js for an example)

List of the custom properties:

• DefaultModifier - Specifies the default modifier.
• Colors - Useful for just listing colors.

See the sample CSS file for more details.

Examples

See the example directory for the usage details.

The example style guide using the directory above can be generated through a Gulp task.

$ gulp kss

Then, open the generated style guide with

$ gulp kss:open