Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

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/)