1
0
Fork 0
A boilerplate for creating your own custom style guide
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
Brad Frost e77ec28a01
Merge pull request #31 from curtisj44/master
4 years ago
_includes Merge pull request #26 from KatieMFritz/badges 5 years ago
_layouts Broke codepen down into a user and id and put the embed HTML in the component-detail 5 years ago
_posts Release history template 5 years ago
_sass removing stray file 4 years ago
components Broke codepen down into a user and id and put the embed HTML in the component-detail 5 years ago
css Added white-space: nowrap to table cell first child of each row 5 years ago
guidelines Fixes typo in guidelines/notifications 5 years ago
js removing stray file 4 years ago
patterns Added variations for the hero. Removed old code. 5 years ago
styles Add baseurl to links 5 years ago
utilities Swap out name for Style Guide Guide 5 years ago
.gitignore Add DS_Store to gitignore 5 years ago
LICENSE Added license to style guide guide 6 years ago
README.md Testing adding the /style-guide-guide/ after base url. Added demo link back in 5 years ago
_config.yml TESTING: Tried making base url /style-guide-guide in config 5 years ago
about.html About page content 5 years ago
contribute.html Add baseurl to links 5 years ago
downloads.md Downloads page content 5 years ago
favicon.ico Update favicon 5 years ago
feed.xml Initial commit 6 years ago
gallery.html Gallery page content 5 years ago
getting-started.html Fix typo on Getting Started page 5 years ago
history.md Update layouts 5 years ago
icons.svg Initial Push Of Refactored Style Guide Guide 5 years ago
index.html Remove app gallery 4 years ago
page-templates.md Add a group 5 years ago
release-history.html Release history template 5 years ago
roadmap.md Add baseurl to links 5 years ago
support.md Add baseurl to links 5 years ago

README.md

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 http://127.0.0.1:4000/ 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!