Style Guide

CLI

Example of CLI usage

simple-styleguide-generator --source="./src/scss" --stylesheet="./dist/index.css" --output="./simple-style-guide"

Example Component

// Button 
// 
// Description 
// 
// markup: button.html 
// 
// default - Default button 
// :hover  - The hover state 
// :focus  - The focus state 
// 
// Styleguide components.button 
.c-button {}

Modifiers

<sg-insert>components.button--2</sg-insert>

Wrapper

Sometimes your component examples need a wrapper. For example:

• you need to show how to use
• element which works only with
  container;
• your component is not visible with white background;
• your component needs a container with a predefined height.
• You can cover such cases by adding a wrapper to a component markup. The wrapper should be defined as a custom parameter in the KSS documentation block:

// markup: 
// <li> 
//   <a class="{$modifiers}">Item</a> 
// </li> 
// 
// sg-wrapper: 
// <nav class="sg side-nav"> 
//   <ul> 
//     <sg-wrapper-content/> 
//   </ul> 
// </nav> 

TODO

• Tests
• Configure custom output for server