DocumentJS for Designers

  • page

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:

  1. Reads through files specified in its configuration
  2. Looks in your commments for tags like @page, @group, and @parent to determine site layout
  3. Looks in your comments for tags like @stylesheet, @styles, and @demo to create the individual parts of your style guide
  4. Automatically generates html files

Next Page