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

• Why use StyleDoc?
• Format basics
• Tags index

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

• CSS source: main.css
  Built from following LESS files: button.less, checkbox.less, __mixins.less, __build.less
• Showcase pages generated in different ways:
  Browser (source), NodeJS (source), NodeJS + PhantomJS (source)

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