Install

npm install kss-scheibo --save-dev

Setup

Create akss-homepage.md and add your styles likestyle-documentation in your source folder.

Builder

node_modules/kss-scheibo/kss_styleguide/scheibo-template/

Custom

["Colors", "Wrapper", "RequireJS", "BodyClass", "HtmlLang"]

Optional

Create a JSON file likekss-scheibo.json in your package.json root with the following lines.For all configurations seekss-node documentation

{  "title"           : "the name of your styleguide",  "builder"         : "node_modules/kss-scheibo/kss_styleguide/scheibo-template/",  "custom"          : ["Colors", "Wrapper", "RequireJS", "HTMLClass", "BodyClass", "HtmlLang"],  "source"          : "assets/",  "destination"     : "../styleguide/",  "css"             : ['URL_of_a_CSS_file_to_include_in_the_style_guide.css'],  "scriptModule"    : false,  "themeColor"      : "#1B7AC8",  "themeTextColor"  : "#FFFFFF"}

Generate

Generate your styleguide with the following line:

node node_modules/kss/bin/kss --config [yourconfigname].json

or

node node_modules/kss/bin/kss --source "assets/" --destination "../styleguide/" --builder "node_modules/kss-scheibo/kss_styleguide/scheibo-template/" --custom "['Colors', 'Wrapper', 'RequireJS']" etc.

Using kss-scheibo

const fs =require('fs-extra');const { build, watch } =require('kss-scheibo');const config = fs.readJsonSync('kss-scheibo.json');const buildStyleguide =async () => {await build(config);};// build styleguide initiallybuild({ kssOptions });// rebuild styleguide on every change to the css fileswatch('path/to/css/files/**/*.css', buildStyleguide);

Modifications

Insert section into another

You can include another section in a section.This is possible with<insert-markup>.The digits after the- are the specified classes, starting at 0

Here is anexample:

Markup:  <form action="#" method="get" class="form {{modifier_class}}">    <insert-markup>2.1-0</insert-markup>    <insert-markup>2.1-0</insert-markup>    <insert-markup>2.1-0</insert-markup>    <insert-markup>1.2-0</insert-markup>  </form>

Colors

add the following config in yourkss-scheibo.json

{  "custom" : ["Colors"]}

The markup for the colors is specified as follows:

/*ColorsColors:$color-primary  : #FF6400 - This is the primary color$cloudburst     : #354052 - Font color$dodgerblue     : #2EA2F8$crimson        : #ED1C24$kellygreen     : #1BB934Styleguide Colors*/

Wrapper

add the following config in yourkss-scheibo.json

{  "custom" : ["Wrapper"]}

The markup for the wrapper is specified as follows:

/*FormMarkup: templates/02_components/form.htmlWrapper:<div style="background-color: grey;">  <wrapper-content/></div>form-input--small - This is a large styleStyleguide 2.2*/

RequireJS

Global

You can add RequireJs as global option and in every single fullscreen mode.To add RequireJs global, add"requirejs": ["/javascripts/Vendor/require.js", "/javascripts/main"] into thekss-scheibo.json as new option.

Only in the fullscreen mode and every single element

The first option is the path to requireJS, the second is the path to the data-main file.Add the following config in yourkss-scheibo.json

{  "custom" : ["RequireJS"]}

The markup for requireJs in fullscreen mode is specified as follows:

/*FormMarkup: templates/02_components/form.htmlRequirejs:  /javascripts/Vendor/require.js : /javascripts/mainStyleguide 2.2*/

HTMLclass

The markup for htmlclass in fullscreen mode is specified as follows:

/*FormMarkup: templates/02_components/form.htmlhtmlclass: demohtmlclass1 demohtmlclass2Styleguide 2.2*/

Bodyclass

Global

You can add a global body class and in every single fullscreen mode.To add your class global, add"bodyclass": "yourclassname" into thekss-scheibo.json as new option.

Only in the fullscreen mode and every single element

You can add your own bodyclass for every single fullscreen mode.Add the following config in yourkss-scheibo.json

{  "custom" : ["BodyClass"]}

The markup for bodyclass in fullscreen mode is specified as follows:

/*FormMarkup: templates/02_components/form.htmlbodyclass: demobodyclassStyleguide 2.2*/

HTML lang attribute

Global

You can change the globallang attribute.To change the lang attribute, add"htmllang": "de" into thekss-scheibo.json as new option.

{  "custom" : ["HtmlLang"],  "htmllang": "de"}

Hint

Is the markup a file, the name must be unique.

Theme Color

You can set your own theme colors by using these options:

{  "themeColor"      : "#1B7AC8",  "themeTextColor"  : "#FFFFFF"}