1.2.0 • Published 6 years ago
simple-styleguide-generator v1.2.0
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