https://github.com/bradfrost/gatsby-style-guide-guide

A boilerplate for creating your own custom style guide
https://github.com/bradfrost/gatsby-style-guide-guide

Last synced: 2 days ago
JSON representation

A boilerplate for creating your own custom style guide

• Host: GitHub
• URL: https://github.com/bradfrost/gatsby-style-guide-guide
• Owner: bradfrost
• License: mit
• Created: 2018-04-24T13:45:08.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2019-03-10T18:19:49.000Z (almost 6 years ago)
• Last Synced: 2025-01-21T15:08:15.190Z (10 days ago)
• Language: JavaScript
• Homepage: https://bradfrost.github.io/gatsby-style-guide-guide/
• Size: 26.6 MB
• Stars: 467
• Watchers: 20
• Forks: 25
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - bradfrost/gatsby-style-guide-guide - A boilerplate for creating your own custom style guide (others)

README

        
# 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](http://bradfrost.github.io/gatsby-style-guide-guide/)

## How it works

Gatsby Style Guide Guide is built using [Gatsby](https://www.gatsbyjs.org/), a site generator built with [React](https://reactjs.org/).

The tool can consume and display components from anywhere, but in my own workflow we import patterns from [Pattern Lab](http://patternlab.io/) 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](https://github.com/bradfrost/gatsby-style-guide-guide).

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](https://github.com/bradfrost/gatsby-style-guide-guide/issues). 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!](http://bradfrost.com/contact/)