A Design System or/and Style Guide generator based on your CSS Files
MIT License
The Guide Book Generator for Style Guides.
The Guide Book goal is to look for the predefined pattern, showing here, and use it to generate an HTML page showing the Categories, Elements, and Modules of your Style Guide.
First of all on your Source Files (SCSS/SASS/STYLUS/LESS) use the below pattern:
/*GUIDE
<CATEGORY>|<SECTION>
<HTML>
*/
PLACEBOLDER | Description |
---|---|
<CATEGORY> |
Category of the Example |
<SECTION> |
Sections of the example |
<HTML> |
Some HTML Elements |
To setup the Guide Book create a JS file at main folder of your project, using as reference the below code:
const GuideBook = require('guide-book-generator');
const settings = {
style: <BUILT_CSS_FILE>,
source: <SOURCE_FOLDER>,
output: <OUTPUT>,
}
const guideBook = new GuideBook();
guideBook.generate(settings);
PLACEBOLDER | Type | Description | Example |
---|---|---|---|
<BUILT_CSS_FILE> |
String | The built style css file | 'build/style.min.css' |
<SOURCE_FOLDER> |
String | The Source Files (SCSS,STYLUS,LESS,...) | 'source/css' |
<OUTPUT> |
String | The folder or file to generate the Guide Book | 'guidebook/guide.html' |
To see examples access this Repository Guide-Book-Example
v12.18.1
6.14.5
This project is licensed under the MIT License - see the LICENSE.md file for details