Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

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

License

NotificationsYou must be signed in to change notification settings

scheibome/kss-scheibo

Repository files navigation

npm versionIssuesnpmnpm

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

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);

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">    <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>  <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"}

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors3

  •  
  •  
  •  
[8]ページ先頭
©2009-2025 Movatter.jp