View on Github

SC5 Style Guide Generator

Informative and easily navigable live style guide which can be edited directly in the browser

Try online demo
Style guide is based on KSS, spiced up with some very useful features and a nifty UI built with AngularJS. It supports SASS, LESS, PostCSS styles as well as pure CSS style sheets.
search

View and search your styles

Easily view, search and test your styles with the AngularJS powered UI.

visibility

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

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.

cached

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.

verified_user

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.

group_work

Encapsulated styles

All components are wrapped with the Shadow DOM providing full style encapsulation. User defined styles do not leak outside the component container.

format_paint

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.

lock_open

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

View on Github