This is a lightweight boilerplate static site for documenting design systems and component libraries.
-
Install [Hugo]
-
Run
hugo serve
in the root of this project -
visit
http://localhost:1313/design-system-system
Design System System is a Hugo project which aims to give you just enough tooling to start documenting your design system, style guide, or component library. This project includes as little JavaScript as possible, and less than 200 lines of CSS, meaning that it can be easily extended and configured to your liking.
Pages are written using markdown, and component previews are possible by
including .rendered
and .markup
files within the page bundle, for example:
content/component/button
├── button.react.markup
├── button.html.markup
├── button.rendered
└── index.md
Each variant of a component consists of the following:
-
A 'rendered' file, which is an entire HTML document that contains the component and will be displayed inside an iframe. This includes the markup, CSS, javascript, and any other resources required by the component.
-
One or more 'markup' files, which describe the code of the component as it would be used in a project. The language of the markup is included in the filename, for instance:
component.erb.markup
orcomponent.react.markup
.