https://github.com/scheibome/kss-scheibo
KSS-Scheibo - a template for the KSS-node styleguide
https://github.com/scheibome/kss-scheibo
css html kss kss-node livingstyleguide scss styleguide template theme
Last synced: 2 months ago
JSON representation
KSS-Scheibo - a template for the KSS-node styleguide
- Host: GitHub
- URL: https://github.com/scheibome/kss-scheibo
- Owner: scheibome
- License: mit
- Created: 2018-05-14T05:15:30.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-04T19:10:44.000Z (8 months ago)
- Last Synced: 2025-04-02T05:32:07.544Z (3 months ago)
- Topics: css, html, kss, kss-node, livingstyleguide, scss, styleguide, template, theme
- Language: JavaScript
- Homepage: https://kss-scheibo.scheibitz.com/
- Size: 1.62 MB
- Stars: 7
- Watchers: 1
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# KSS-Scheibo - a template for the KSS-node styleguide
[](https://npmjs.org/package/kss-scheibo)
[]( https://github.com/scheibome/kss-scheibo/issues) 
## Install
``npm install kss-scheibo --save-dev``
## Setup
Create a ``kss-homepage.md`` and add your styles like [style-documentation](https://github.com/kss-node/kss/blob/spec/SPEC.md#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](https://github.com/kss-node/kss-node#using-the-command-line-tool)
```
{
"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
```js
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 ````.
The digits after the ``-`` are the specified classes, starting at 0
Here is an [example](https://kss-scheibo.scheibitz.com/section-2.html#kssref-2-2):
```
Markup:
2.1-0
2.1-0
2.1-0
1.2-0
```
#### 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:
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang).
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"
}
```