styleguide-starter-kit

Style guide generated from the stater kit
Demo using the style guide

What is it?

It is boilerplate style guide. It includes the following:
- boilerplate pattern library in CSS (includes CSS for colors, type, buttons, cards, spinners, layouts, layers,...).
This can be edited to match your product's branding.
- postcss-style-guide for generating a style guide from the pattern library
- gulp as task runner to monitor for changes in CSS and regenerate style guide

How is the pattern library a.k.a stylesheets structured?

They are grouped in to three categories:
* Atoms - Colors, Typography, Buttons
* Molecules - Cards, Spinners, Input Controls, Tabs
* Infrastructure - Layouts, Layers

How do I use it?

- `` npm i -g styleguide-starter-kit`
- In the project directory, run: `create-styleguide`

It generates a styleguide folder in your project with the following:
- styles: includes all the pattern library CSS
- styleguide-template: template used for generating the style guide
- gulpfile: task runner
- public: includes the styleguide, a demo with the styleguide and the styleguide.min.css if you want to consume all of it in your site.

$3

- Go in to the styleguide folder and try `npm run start`
- You can now view your style guide in `http://localhost:4500`
- There is also a demo in `http://localhost:4500/demo`

$3

You can include the following in your package.json to include the style guide tasks as well:
`
"scripts": {
"start": "node ./index.js & npm run start --prefix ./styleguide"
},
``

Report Issues

Please log issues here