Create your own styleguide and documentation using Eleventy static site generator.
Source to compile html files. It can be both *.md or *.njk
./src/files
├── 00-folder-0
│ └── _file-0.md
├── 01-folder-1
│ ├── _file-1.njk
│ └── _file-2.njk
├── 02-folder-2
│ ├── __file-3.njk
│ ...
├── NN-folder-N
│ └── _file-N.njk
│
...
Source of styles should have the same folder structure and file names
./src/styles
├── 00-folder-0
│ └── _file-0.scss
├── 01-folder-1
│ ├── _file-1.scss
│ └── _file-2.scss
├── 02-folder-2
│ ├── __file-3.scss
│ ...
├── NN-folder-N
│ └── _file-N.scss
│
...
Use macro to create examples
with modifiers
{% macro html(mod) %}
<button class="b-button {{ mod }}">
CTA Value
</button>
{% endmacro %}
To keep track which files are not yet included to style guide run npm run dircompare to create comparison page.