This demonstrates how a design system can be built using the the Visual Framework component system.
You this if you want:
- a highly componentised structure for your design system and documentation
- a documentation site powered by the Eleventy static site generator
- access to the Visual Framework component system
- a
/components
url to document and demonstrate all components available
If you only need to integrate Visual Framework components, you can add them individually to any npm-based project or use the simpler VF Eleventy boilerplate.
There are two methods:
- An interactive npm template [RECOMMENDED]
- If you don't have npm, install it
- The
create-vf-project
project allows you to interactively create a new site by typing
yarn create @visual-framework/vf-eleventy your-new-site-name vf-demo-design-system
- Follow the prompts
- GitHub templates
- Click the "Use this template" method; quick url: https://github.com/visual-framework/vf-demo-design-system/generate
- Follow the prompts and then clone the new project to your local machine