The Living Styleguide

Learn about the Living Styleguide, how to get it, and how to use it.

There are many benefits to having, using and maintaining living styleguides. Such benefits include, but are not limited to:

Getting the Living Styleguide

The Adaptive.js generator will have a prompt for including the Living Styleguide in new projects.

Existing Adaptive.js projects that use grunt-sass (libsass) and node-sass-import-once may add the Living Styleguide using the sub-generator.

yo adaptivejs:styleguide

Using the Living Styleguide

Run grunt preview or grunt styleguide

Visit http://localhost:4444 in a browser

File Description


The browser's entry point into the Living Styleguide. This is boilerplate code that ensures that stylesheets and JS is loaded, as well as providing placeholder markup to be replaced by Styleguide markup. This file does not require any modifications.


Boilerplate dust template, it is where the overall Styleguide structure and design is maintained. This file does not require any modifications.


This dust template is where project components are showcased with their static mock data. This is the real 'meat' of the Living Styleguide: all components in a project should be included here.


This is where Styleguide-specific mock data is stored. Data files return a pre-populated JSON data context object that matches with it's designated component. A good practice is to demonstrate all variations of each component by returning a context containing arrays of data which highlight all possible visual states.


This is the Living Styleguide's view file. All data files from data/ are required in and assigned to key-value pairs based on their designated component, thus forming the Styleguide's complete data context.


This is a standard require.js config file that paths out all the Living Styleguide's dependencies so they may be required in correctly.


This file is responsible for the Living Styleguide's UI scripts and interactions, which include:


This is the dust template for the Table of Contents component directory. This is also boilerplate that won't be modified much. It is kept as a separate template because its contents are dynamically generated and rendered in ui.js.


This is the parent stylesheet for the Living Styleguide's base theme. This file should not color the project components in any way.


This is where the Living Styleguide is built into when grunt styleguide or grunt preview is run. It is ignored from git changes.

Edit in GitHub