https://github.com/visual-framework/vf-demo-design-system
VF 2.0 Demonstration design system and boilerplate
https://github.com/visual-framework/vf-demo-design-system
Last synced: 18 days ago
JSON representation
VF 2.0 Demonstration design system and boilerplate
- Host: GitHub
- URL: https://github.com/visual-framework/vf-demo-design-system
- Owner: visual-framework
- Created: 2019-07-09T08:41:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-16T13:53:37.000Z (about 3 years ago)
- Last Synced: 2025-09-08T19:35:24.586Z (7 months ago)
- Language: HTML
- Homepage: https://visual-framework.github.io/vf-demo-design-system/
- Size: 8.25 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Eleventy boilerplate for Visual Framework 2.0
This demonstrates how a design system can be built using the the [Visual Framework component system](https://visual-framework.github.io/vf-welcome/).
You this if you want:
- a highly componentised structure for your design system and documentation
- a documentation site powered by the [Eleventy](https://www.11ty.io) 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](https://visual-framework.github.io/vf-welcome/documentation/#getting-started) or [use the simpler VF Eleventy boilerplate](https://github.com/visual-framework/vf-eleventy).
## How to use this template
There are two methods:
1. An interactive npm template [RECOMMENDED]
- If you don't have npm, [install it](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
- The [`create-vf-project`](https://github.com/visual-framework/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
2. GitHub templates
- Click the "[Use this template](https://help.github.com/en/articles/creating-a-repository-from-a-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
## Configuring and developing
[Follow the guide](https://visual-framework.github.io/vf-demo-design-system/customising/).