Create live style guides with interactive examples, that change as your design does.

Powered by DocumentJS

How it Works

Using a combination of custom tags and markdown DocumentCSS parses coments on your CSS, LESS, or SASS and autogenerates a site with your documentation.


/**
 * @styles color-palette Color Palette
 * 
 * @description
 * Variables used to define the site's color palette.
 * @iframe demos/variables/color-palette/demo.html 630
 **/
@night: #000000; 
@darkSkies: #484848; 
@thunderStorm: #706f70;  
@cloud: #999999; 
@haze: #cccccc;  
@fog: #eae9e9;
@clear: #ffffff; 
@nigthRain: #165489;
@rain: #1f54c6; 
@sunrise: #f7f8c3; 
@sunset: #d9534f;

DocumentCSS makes it easy to incorporate style documentation as part of your design workflow.