Though you're documenting your styles, the tool you'll be using is DocumentJS. As long as your project is using npm, you will be able to:
Generate a living site that automatically updates as your project's design evolves
Write a style guide with inline comments in stylesheets or with individual markdown files
Include demos to display examples alongside sample markup
Organize pages into navigation groups like "Elements," "Themes," and "Components"
To see an example of this, check out this site's example Live Style Guide.
What DocumentJS Does
Skip this section if you're comfortable with magic and don't care how DocumentJS works.
DocumentJS is a static site generator. This means it scans specially formatted input files and creates a website that remains unchanged until the generator runs again. Whereas in a content management system changes happen somewhat automatically, a static site generator usually needs to be run manually and then the generated files must be uploaded.
While this may seem more complicated than a CMS, static site generation works especially well for a Live Style Guide. Since your stylesheets are also the source files for your style guide, changes to your stylesheets are also changes to your Live Style Guide.
To build your Live Style Guide, DocumentJS does the following:
Reads through files specified in its configuration
Looks in your commments for tags like @page, @group, and @parent to determine site layout
Looks in your comments for tags like @stylesheet, @styles, and @demo to create the individual parts of your style guide
To see an example of this, check out this site's example Live Style Guide.
What DocumentJS Does
Skip this section if you're comfortable with magic and don't care how DocumentJS works.
DocumentJS is a static site generator. This means it scans specially formatted input files and creates a website that remains unchanged until the generator runs again. Whereas in a content management system changes happen somewhat automatically, a static site generator usually needs to be run manually and then the generated files must be uploaded.
While this may seem more complicated than a CMS, static site generation works especially well for a Live Style Guide. Since your stylesheets are also the source files for your style guide, changes to your stylesheets are also changes to your Live Style Guide.
To build your Live Style Guide, DocumentJS does the following:
@page,@group, and@parentto determine site layout@stylesheet,@styles, and@demoto create the individual parts of your style guidehtmlfilesNext Page