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

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

Last synced: 8 days ago
JSON representation

A boilerplate for creating your own custom style guide

• Host: GitHub
• URL: https://github.com/bradfrost/style-guide-guide
• Owner: bradfrost
• License: mit
• Created: 2016-04-27T02:24:59.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-10-04T14:36:54.000Z (about 6 years ago)
• Last Synced: 2024-10-10T16:23:22.071Z (29 days ago)
• Language: HTML
• Homepage: http://bradfrost.github.io/style-guide-guide
• Size: 469 KB
• Stars: 1,226
• Watchers: 53
• Forks: 167
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: history.md
  • License: LICENSE

Awesome Lists containing this project

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

README

        
# 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/style-guide-guide/)

## How it works

Style Guide Guide is built using [Jekyll](https://jekyllrb.com/), 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](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/style-guide-guide).

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](https://github.com/bradfrost/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/)