1.2.0 • Published 6 years ago

simple-styleguide-generator v1.2.0

Weekly downloads
33
License
-
Repository
-
Last release
6 years ago

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