-
Notifications
You must be signed in to change notification settings - Fork 224
Home
Viljami Salminen edited this page Mar 18, 2018
·
31 revisions
Vue Design System is an open source tool for building UI Design Systems with Vue.js. It provides you and your team a set of organized tools, patterns & practices which work as the foundation for your application development.
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.
Made by @viljamis and other contributors. See also the official website of Vue Design System and read my article on the processes and workflow I use to get started with a new design system project.
- A set of interconnected patterns & practices for you and your team with comprehensive documentation.
- A well thought-out terminology, naming conventions, and hierarchy for the whole design system to save time.
- Get an automated overview of how your design system progresses over time and what’s still left to do.
- Global design tokens in YAML format that you can use inside any component. In both CSS and JavaScript.
- Automatic generation of living, user editable documentation using custom version of Vue Styleguidist.
- Easily export and use your Design System as an NPM dependency in another Vue.js project (or anywhere really).
- Create a token, an element, or a pattern, and it’s immediately available across all your Vue.js components.
- Pre-configured Prettier setup for auto-formatting code on both save and before committing changes to Git.
- Live Reloading, Autoprefixing, SCSS, and helper functions + simple and sane defaults for SVG and Webfont usage out-of-the-box.
- Documentation and the app logic are separated, so you can have public docs while the app itself is private.
- 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
,Patterns
andTemplates
. - 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.