Vue Design System is an open-source tool for prototyping UI design systems. It provides you and your team a set of organized tools, patterns & practices to build upon, so that you can get started with the actual design system faster.
The tool is built on top of Vue.js, Vue Styleguidist, Vue Webpack Template & Theo and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript.
Even though this is a system prototyping tool first and foremost, it has all the means to turn into your organization’s actual design system in the end.
Made by @viljamis and other contributors. See also the official website of Vue Design System.
- A set of interconnected patterns & practices for you and your team.
- Global design tokens that can be used inside any component.
- Simple and sane SVG icon and @font-face defaults.
- Live reloading for both the app and the system documentation.
- Automatic generation of documentation.
- Documentation and the app logic are separated, so you can have public docs while the app itself is private.
- Autoprefixing, SCSS, Webpack & CSS extraction included by default (Extend with lint-on-save & unit tests).
- And more…
- Getting Started: How to install and run Vue Design System.
- Terminology: Introduction to the system concepts and its hierarchy.
- Naming of Things: Naming is hard, so it’s good to have clear guidelines.
- Directory Structure: What goes where and why.
- Working with the System: Concrete examples on how to work with
Tokens,Elements,PatternsandTemplates. - Editing Living Documentation: How to customize the living system documentation.
- Component Status: Clear labels that reflect the state of completion.
- Component QA: How to review new components and keep the quality high.
- Frequently Asked Questions: How to use icons, how to use font-face, etc.
- See Roadmap tag in the issues.
0.4.2is the latest release.- See Releases page for the full changelog.
Viljami Salminen, Artem Sapegin, Rafael Escala, react-styleguidist contributors, vue-styleguidist contributors, Vue.js contributors, vue-webpack-boilerplate contributors and & Theo contributors.
Licensed under the MIT license.