A boilerplate for creating your own custom style guide
HTML CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
bradfrost Remove app gallery
Doesn't really apply to all systems
Latest commit 1aa8b2e Jun 11, 2018
Failed to load latest commit information.
_includes Merge pull request #26 from KatieMFritz/badges Oct 1, 2017
_layouts Broke codepen down into a user and id and put the embed HTML in the c… Nov 8, 2017
_posts Release history template May 14, 2017
_sass Add outline for stronger focus state May 21, 2017
components Broke codepen down into a user and id and put the embed HTML in the c… Nov 8, 2017
css Added white-space: nowrap to table cell first child of each row Nov 8, 2017
guidelines Fixes typo in guidelines/notifications May 16, 2017
js Added codepen embedding. Refactored JS tabs to take codepen into cons… Nov 7, 2017
patterns Added variations for the hero. Removed old code. May 15, 2017
styles Add baseurl to links May 16, 2017
utilities Swap out name for Style Guide Guide May 14, 2017
.DS_Store Added categories back into the mix in the primary navigation and only… May 15, 2017
.gitignore Add DS_Store to gitignore May 14, 2017
LICENSE Added license to style guide guide Jun 6, 2016
README.md Testing adding the /style-guide-guide/ after base url. Added demo lin… Aug 28, 2017
_config.yml TESTING: Tried making base url /style-guide-guide in config Aug 28, 2017
about.html About page content May 14, 2017
contribute.html Add baseurl to links May 16, 2017
downloads.md Downloads page content May 14, 2017
favicon.ico Update favicon May 14, 2017
feed.xml Initial commit May 2, 2016
gallery.html Gallery page content May 14, 2017
getting-started.html Fix typo on Getting Started page May 16, 2017
history.md Update layouts May 14, 2017
icons.svg Initial Push Of Refactored Style Guide Guide May 10, 2017
index.html Remove app gallery Jun 11, 2018
page-templates.md Add a group Feb 22, 2018
release-history.html Release history template May 14, 2017
roadmap.md Add baseurl to links May 16, 2017
support.md Add baseurl to links May 16, 2017


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

Style Guide Guide is built using Jekyll, a static site generator which works quite well for managing the content of a style guide.

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 jekyll serve command. This will build the static site and watch for changes.
  3. Visit in your browser to see the style guide.

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!