Javadoc-like format to describe your styles (CSS, LESS, SASS etc.)

Format

StyleDoc format specification and essentials.

Documentor

Parser and showcase generator for documented styles.

Available for browser, npm, grunt, bower.

StyleDoc: describe you styles

Format specification for JavaDoc-like comments in CSS, LESS, SASS etc.

Inspired with concept idea of https://github.com/Joony/styledoc/

Syntax example

/**
 * Buttons
 * All different kind of buttons used on website pages
 * @base     button     Normal button
 * @modifier .large     Large button
 * @modifier :disabled  Button unable to be pressed
 * @modifier .large:disabled Large button disabled
 * @example  <button>Button text</button>
 */
button {
    /* styles here */
} 

Further reading

Documentor tool: showcase you styles

Parser and showcase generator is available for your StyleDoc'd files. Written on Javascript, available for both browser and NodeJS usage.

StyleDoc tool parses CSS file, extracting styledoc-blocks (like the one above) and creating showcase page based on them. This page contains full list of documented elements and their variations, illustrated with live preview and markup example.

Live examples

All examples sources are available in examples directory of project repository.

More info

For more details and source code, view the project on GitHub: https://github.com/thybzi/styledoc