View and search your styles
Easily view, search and test your styles with the AngularJS powered UI.
See related variables and styles
The enhanced KSS processing flow knows which styles and variables are related to the current component, allowing you to see all the related things in one place.
Edit on the fly
With the designer tool you can edit SASS, LESS or PostCSS variables directly via the web interface. All changes can be saved back to the original file.
Live preview styles on every device
All modifications are automatically updated and applied via web sockets on every device without reloading while you are editing. You will be notified of compilation errors too.
Use Angular directives
HTML markup sections defined in the KSS blocks are dynamically compiled thus it is possibly to use Angular directive inside the style guide.
Encapsulated styles
All components are wrapped with the Shadow DOM providing full style encapsulation. User defined styles do not leak outside the component container.
Easy to customize
If you do not like default look and feel, it is easy to customize built-in UI using SASS variables or by overriding CSS styles.
Fully open source
SC5-styleguide is fully open sourced using MIT licence.
# Try the styleguide generated
# from the styleguide itself
› npm install sc5-styleguide
› cd node_modules/sc5-styleguide
› npm run demo
# Open http://localhost:3000
Get started with using SC5 Style Guide Generator as a command line tool or as gulp/grunt plugin