Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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/)