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:
- Provides a living, always up to date inventory of UI Components
- Summarizes, in one place, a project's design elements and systems
- Encourages less duplication of code or design
- Flexibility of components is easily demonstrated by providing them with data
- Handy reference for project maintenance, QA and ramp-up
- A useful tool to provide co-dev clients
- Enables Designers, UI Developers, and Engineers to work in tandem while reducing risk of conflicts
Getting the Living Styleguide
The Adaptive.js generator will have a prompt for including the Living Styleguide in new projects.
Using the Living Styleguide
grunt preview or
http://localhost:4444 in a browser
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:
- Taking the completed Styleguide data context from
context.jsand using it to render out the full Styleguide template and its contents
- Setting up the Table of Contents component directory, its Pinny, and all necessary event bindings
- Setting up the Table of Content's search autocomplete functionality
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
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.