- Notifications
You must be signed in to change notification settings - Fork2
KSS-Scheibo - a template for the KSS-node styleguide
License
scheibome/kss-scheibo
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
npm install kss-scheibo --save-dev
Create akss-homepage.md and add your styles likestyle-documentation in your source folder.
node_modules/kss-scheibo/kss_styleguide/scheibo-template/
["Colors", "Wrapper", "RequireJS", "BodyClass", "HtmlLang"]
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 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.
constfs=require('fs-extra');const{ build, watch}=require('kss-scheibo');constconfig=fs.readJsonSync('kss-scheibo.json');constbuildStyleguide=async()=>{awaitbuild(config);};// build styleguide initiallybuild({ kssOptions});// rebuild styleguide on every change to the css fileswatch('path/to/css/files/**/*.css',buildStyleguide);
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"> <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>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*/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> <wrapper-content/></div>form-input--small - This is a large styleStyleguide 2.2*/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.
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*/The markup for htmlclass in fullscreen mode is specified as follows:
/*FormMarkup: templates/02_components/form.htmlhtmlclass: demohtmlclass1 demohtmlclass2Styleguide 2.2*/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.
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*/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"}Is the markup a file, the name must be unique.
You can set your own theme colors by using these options:
{ "themeColor" : "#1B7AC8", "themeTextColor" : "#FFFFFF"}About
KSS-Scheibo - a template for the KSS-node styleguide