Skip to content
A boilerplate for creating your own custom style guide
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
content Removed aws stuff (from old project). Testing to make sure this works Jun 14, 2018
ds-components Revamp of Gatsby Syle Guide Guide Jun 10, 2018
static Remove unused assets Jan 31, 2019
.gitignore Initial commit Apr 24, 2018
.prettierrc On second thoughts, follow offical Gatsby - no semis Sep 18, 2018
LICENSE Initial commit Apr 24, 2018
gatsby-config.js Added gatsby-prism Sep 18, 2018
gatsby-node.js Removed semis Sep 18, 2018
package.json Added linting and formatting scripts Sep 18, 2018
yarn.lock Added linting and formatting scripts Sep 18, 2018

Gatsby Style Guide Guide

Style Guide Guide is a boilerplate for creating a custom style guide for your organization's design system. It provides just enough IA and hooks to get you going. As a bonus, I've provided links to helpful resources and inspiration to help you as you create your own custom style guide.

See the demo here

How it works

Gatsby Style Guide Guide is built using Gatsby, a site generator built with React.

The tool can consume and display components from anywhere, but in my own workflow we import patterns from Pattern Lab into Style Guide Guide for display. For more info, check out this blog post (coming soon for now).

Getting Started

  1. Download or clone the files from the repository on Github.
  2. In the command line, navigate to the root of the project and run the yarn command. This will download the project dependencies
  3. Run gatsby develop to run the project.

From here, obviously the point is to customize the style guide for your needs and populate it with your content and components.

Importing components and assets from Pattern Lab

Coming soon!

Feedback and Questions

If you have questions or issues with Style Guide Guide, please feel free to open an issue. If your organization is creating a design system and style guide and would like some help taking it to the next level, feel free to get in touch!

You can’t perform that action at this time.