Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kelvinbiffi/guide-book
A Design System or/and Style Guide generator based on your CSS Files
https://github.com/kelvinbiffi/guide-book
css generator hacktoberfest javascript less nodejs pattern scss styleguide stylus
Last synced: 23 days ago
JSON representation
A Design System or/and Style Guide generator based on your CSS Files
- Host: GitHub
- URL: https://github.com/kelvinbiffi/guide-book
- Owner: kelvinbiffi
- License: mit
- Created: 2021-01-16T01:17:00.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2021-05-16T16:02:42.000Z (over 3 years ago)
- Last Synced: 2024-12-13T06:04:58.378Z (29 days ago)
- Topics: css, generator, hacktoberfest, javascript, less, nodejs, pattern, scss, styleguide, stylus
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/guide-book-generator
- Size: 19.5 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Guide Book
The **Guide Book** Generator for Style Guides.
----------------------------
## How it works:
The **Guide Book** goal is to look for the predefined pattern, [showing here](#how-to-use), and use it to generate an HTML page showing the Categories, Elements, and Modules of your Style Guide.
----------------------------
## How to use
First of all on your **Source Files** (SCSS/SASS/STYLUS/LESS) use the below pattern:
```
/*GUIDE
|
*/
```
### Where
| PLACEBOLDER | Description |
|---------------------|----------------------------------------|
| `` | Category of the Example |
| `` | Sections of the example |
| `` | Some HTML Elements |
----------------------------
## How to Setup
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: ,
source: ,
output: ,
}
const guideBook = new GuideBook();
guideBook.generate(settings);
```
### Where
| PLACEBOLDER | Type | Description | Example |
|---------------------|-----------------|------------------------------------------------------------|---------------------------|
| `` | String | The built style css file | 'build/style.min.css' |
| `` | String | The Source Files (SCSS,STYLUS,LESS,...) | 'source/css' |
| `` | String | The **folder** or **file** to generate the **Guide Book** | 'guidebook/guide.html' |
----------------------------
## Examples
To see examples access this Repository [Guide-Book-Example](https://github.com/kelvinbiffi/Guide-Book-Example)
----------------------------
## Requirements Version
- Node `v12.18.1`
- NPM `6.14.5`
----------------------------
## Dependences
- [PrismJS](https://prismjs.com/)
----------------------------
## LICENCE
This project is licensed under the MIT License - see the [LICENSE.md](./LICENSE.md) file for details