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.
See it in action
- 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
Set it up to run within your project
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"
},