-
Notifications
You must be signed in to change notification settings - Fork 224
Home
Viljami Salminen edited this page Nov 4, 2017
·
31 revisions
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 (the very page you’re looking at).
- 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.
- Spacing: A framework for creating a predictable and harmonious spacing.
- Component Status: Clear labels that reflect the state of completion.
- Component QA: How to review new components and keep the quality high.
- Contributing: A set of guidelines for contributing to the system.
- Code of Conduct: By participating you agree to abide by its terms.
- Frequently Asked Questions: How to use icons, how to use font-face, etc.
- Changelog: See releases pafge for the full changelog.