{"id":24956453,"url":"https://github.com/scheibome/kss-scheibo","last_synced_at":"2025-10-31T05:33:16.954Z","repository":{"id":41612196,"uuid":"133308122","full_name":"scheibome/kss-scheibo","owner":"scheibome","description":"KSS-Scheibo - a template for the KSS-node styleguide","archived":false,"fork":false,"pushed_at":"2024-10-04T19:10:44.000Z","size":1696,"stargazers_count":7,"open_issues_count":4,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T05:32:07.544Z","etag":null,"topics":["css","html","kss","kss-node","livingstyleguide","scss","styleguide","template","theme"],"latest_commit_sha":null,"homepage":"https://kss-scheibo.scheibitz.com/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scheibome.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-14T05:15:30.000Z","updated_at":"2024-09-03T11:23:07.000Z","dependencies_parsed_at":"2023-02-18T06:31:08.486Z","dependency_job_id":"c84655ca-eac9-4dd9-98b0-dfd44966b5db","html_url":"https://github.com/scheibome/kss-scheibo","commit_stats":{"total_commits":233,"total_committers":6,"mean_commits":"38.833333333333336","dds":0.5579399141630901,"last_synced_commit":"f2172b0ef804d823debcab1191f7cbcd65967af9"},"previous_names":[],"tags_count":59,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scheibome%2Fkss-scheibo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scheibome%2Fkss-scheibo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scheibome%2Fkss-scheibo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scheibome%2Fkss-scheibo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scheibome","download_url":"https://codeload.github.com/scheibome/kss-scheibo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248275300,"owners_count":21076563,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","kss","kss-node","livingstyleguide","scss","styleguide","template","theme"],"created_at":"2025-02-03T06:35:25.316Z","updated_at":"2025-10-31T05:33:11.886Z","avatar_url":"https://github.com/scheibome.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# KSS-Scheibo - a template for the KSS-node styleguide\n\n[![npm version](https://badge.fury.io/js/kss-scheibo.svg?style=flat)](https://npmjs.org/package/kss-scheibo)\n[![Issues](https://img.shields.io/github/issues/scheibome/kss-scheibo.svg)]( https://github.com/scheibome/kss-scheibo/issues) ![npm](https://img.shields.io/npm/dt/kss-scheibo.svg)\n![npm](https://img.shields.io/npm/l/kss-scheibo.svg)\n\n\n## Install\n\n``npm install kss-scheibo --save-dev``\n\n## Setup\n\nCreate 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.\n\n#### Builder\n``node_modules/kss-scheibo/kss_styleguide/scheibo-template/``\n\n#### Custom\n``[\"Colors\", \"Wrapper\", \"RequireJS\", \"BodyClass\", \"HtmlLang\"]``\n\n##### Optional\nCreate a JSON file like `kss-scheibo.json` in your package.json root with the following lines.\nFor all configurations see [kss-node documentation](https://github.com/kss-node/kss-node#using-the-command-line-tool)\n\n```\n{\n  \"title\"           : \"the name of your styleguide\",\n  \"builder\"         : \"node_modules/kss-scheibo/kss_styleguide/scheibo-template/\",\n  \"custom\"          : [\"Colors\", \"Wrapper\", \"RequireJS\", \"HTMLClass\", \"BodyClass\", \"HtmlLang\"],\n  \"source\"          : \"assets/\",\n  \"destination\"     : \"../styleguide/\",\n  \"css\"             : ['URL_of_a_CSS_file_to_include_in_the_style_guide.css'],\n  \"scriptModule\"    : false,\n  \"themeColor\"      : \"#1B7AC8\",\n  \"themeTextColor\"  : \"#FFFFFF\"\n}\n```\n\n## Generate\n\nGenerate your styleguide with the following line:\n\n``node node_modules/kss/bin/kss --config [yourconfigname].json``\n\nor\n\n``node node_modules/kss/bin/kss --source \"assets/\" --destination \"../styleguide/\" --builder \"node_modules/kss-scheibo/kss_styleguide/scheibo-template/\" --custom \"['Colors', 'Wrapper', 'RequireJS']\" `` etc.\n\n## Using kss-scheibo\n\n```js\nconst fs = require('fs-extra');\nconst { build, watch } = require('kss-scheibo');\n\nconst config = fs.readJsonSync('kss-scheibo.json');\n\nconst buildStyleguide = async () =\u003e {\n  await build(config);\n};\n\n// build styleguide initially\nbuild({ kssOptions });\n\n// rebuild styleguide on every change to the css files\nwatch('path/to/css/files/**/*.css', buildStyleguide);\n```\n\n## Modifications\n\n#### Insert section into another\n\nYou can include another section in a section.\nThis is possible with ``\u003cinsert-markup\u003e``.\nThe digits after the ``-`` are the specified classes, starting at 0\n\nHere is an [example](https://kss-scheibo.scheibitz.com/section-2.html#kssref-2-2):\n\n```\nMarkup:\n  \u003cform action=\"#\" method=\"get\" class=\"form {{modifier_class}}\"\u003e\n    \u003cinsert-markup\u003e2.1-0\u003c/insert-markup\u003e\n    \u003cinsert-markup\u003e2.1-0\u003c/insert-markup\u003e\n    \u003cinsert-markup\u003e2.1-0\u003c/insert-markup\u003e\n    \u003cinsert-markup\u003e1.2-0\u003c/insert-markup\u003e\n  \u003c/form\u003e\n```\n\n#### Colors\n\nadd the following config in your ``kss-scheibo.json``\n\n```\n{\n  \"custom\" : [\"Colors\"]\n}\n```\n\nThe markup for the colors is specified as follows:\n\n```\n/*\nColors\n\nColors:\n$color-primary  : #FF6400 - This is the primary color\n$cloudburst     : #354052 - Font color\n$dodgerblue     : #2EA2F8\n$crimson        : #ED1C24\n$kellygreen     : #1BB934\n\nStyleguide Colors\n*/\n```\n\n#### Wrapper\n\nadd the following config in your ``kss-scheibo.json``\n\n```\n{\n  \"custom\" : [\"Wrapper\"]\n}\n```\n\nThe markup for the wrapper is specified as follows:\n\n```\n/*\nForm\n\nMarkup: templates/02_components/form.html\n\nWrapper:\n\u003cdiv style=\"background-color: grey;\"\u003e\n  \u003cwrapper-content/\u003e\n\u003c/div\u003e\n\nform-input--small - This is a large style\n\nStyleguide 2.2\n*/\n```\n\n#### RequireJS\n\n##### Global\n\nYou can add RequireJs as global option and in every single fullscreen mode.\nTo add RequireJs global, add ``\"requirejs\": [\"/javascripts/Vendor/require.js\", \"/javascripts/main\"]`` into the ``kss-scheibo.json`` as new option.\n\n##### Only in the fullscreen mode and every single element\nThe first option is the path to requireJS, the second is the path to the data-main file.\nAdd the following config in your ``kss-scheibo.json``\n\n```\n{\n  \"custom\" : [\"RequireJS\"]\n}\n```\n\nThe markup for requireJs in fullscreen mode is specified as follows:\n\n```\n/*\nForm\n\nMarkup: templates/02_components/form.html\n\nRequirejs:\n  /javascripts/Vendor/require.js : /javascripts/main\n\nStyleguide 2.2\n*/\n```\n\n#### HTMLclass\n\nThe markup for htmlclass in fullscreen mode is specified as follows:\n\n```\n/*\nForm\n\nMarkup: templates/02_components/form.html\n\nhtmlclass: demohtmlclass1 demohtmlclass2\n\nStyleguide 2.2\n*/\n```\n\n#### Bodyclass\n\n##### Global\n\nYou can add a global body class and in every single fullscreen mode.\nTo add your class global, add ``\"bodyclass\": \"yourclassname\"`` into the ``kss-scheibo.json`` as new option.\n\n##### Only in the fullscreen mode and every single element\n\nYou can add your own bodyclass for every single fullscreen mode.\nAdd the following config in your ``kss-scheibo.json``\n\n```\n{\n  \"custom\" : [\"BodyClass\"]\n}\n```\n\nThe markup for bodyclass in fullscreen mode is specified as follows:\n\n```\n/*\nForm\n\nMarkup: templates/02_components/form.html\n\nbodyclass: demobodyclass\n\nStyleguide 2.2\n*/\n```\n\n#### HTML lang attribute\n\n##### Global\n\nYou can change the global [lang attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang).\nTo change the lang attribute, add ``\"htmllang\": \"de\"`` into the ``kss-scheibo.json`` as new option.\n\n```\n{\n  \"custom\" : [\"HtmlLang\"],\n  \"htmllang\": \"de\"\n}\n```\n\n#### Hint\n\nIs the markup a file, the name must be unique.\n\n#### Theme Color\n\nYou can set your own theme colors by using these options:\n\n```\n{\n  \"themeColor\"      : \"#1B7AC8\",\n  \"themeTextColor\"  : \"#FFFFFF\"\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscheibome%2Fkss-scheibo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscheibome%2Fkss-scheibo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscheibome%2Fkss-scheibo/lists"}