KSS-Scheibo - a template for the KSS-node styleguide

Install

npm install kss-scheibo --save-dev

Setup

Create a kss-homepage.md and add your styles like style-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 like kss-scheibo.json in your package.json root with the following lines. For all configurations see kss-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 initially
build({ kssOptions });

// rebuild styleguide on every change to the css files
watch('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 an example:

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 your kss-scheibo.json

{
  "custom" : ["Colors"]
}

The markup for the colors is specified as follows:

/*
Colors

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

Styleguide Colors
*/

Wrapper

add the following config in your kss-scheibo.json

{
  "custom" : ["Wrapper"]
}

The markup for the wrapper is specified as follows:

/*
Form

Markup: templates/02_components/form.html

Wrapper:
<div style="background-color: grey;">
  <wrapper-content/>
</div>

form-input--small - This is a large style

Styleguide 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 the kss-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 your kss-scheibo.json

{
  "custom" : ["RequireJS"]
}

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

/*
Form

Markup: templates/02_components/form.html

Requirejs:
  /javascripts/Vendor/require.js : /javascripts/main

Styleguide 2.2
*/

HTMLclass

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

/*
Form

Markup: templates/02_components/form.html

htmlclass: demohtmlclass1 demohtmlclass2

Styleguide 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 the kss-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 your kss-scheibo.json

{
  "custom" : ["BodyClass"]
}

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

/*
Form

Markup: templates/02_components/form.html

bodyclass: demobodyclass

Styleguide 2.2
*/

HTML lang attribute

Global

You can change the global lang attribute. To change the lang attribute, add "htmllang": "de" into the kss-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"
}