Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/arielsalminen/vue-design-system

An open source tool for building UI Design Systems with Vue.js
https://github.com/arielsalminen/vue-design-system

component-library components design-system design-systems vue vue-styleguidist vuejs

Last synced: about 1 month ago
JSON representation

An open source tool for building UI Design Systems with Vue.js

Lists

README 

        
[![Build status](https://travis-ci.org/arielsalminen/vue-design-system.svg?branch=master)](https://travis-ci.org/arielsalminen/vue-design-system/) ![Dependencies status](https://david-dm.org/arielsalminen/vue-design-system.svg) ![MIT License](https://img.shields.io/badge/license-MIT-blue.svg) [![Gitter](https://badges.gitter.im/gitterHQ/gitter.svg)](https://gitter.im/vueds/Lobby)



# Vue Design System



**Vue Design System** is an open source tool for building UI Design Systems with [Vue.js](https://vuejs.org). It provides you and your team a set of organized tools, patterns & practices that work as the foundation for your application development.



The tool is built on top of [Vue.js](https://vuejs.org), [Vue Styleguidist](https://github.com/vue-styleguidist/vue-styleguidist), [Webpack](https://webpack.js.org), and [Theo](https://github.com/salesforce-ux/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 [@arielsalminen](https://twitter.com/arielsalminen) and other contributors. See also [the official website](https://vueds.com) of Vue Design System and [read my article](https://arielsalminen.com/2018/vue-design-system/) on the processes and workflow I use to get started with a new design system project.**



[![Screenshot](./docs/preview.gif)](https://vueds.com/)



## Features



- A set of interconnected patterns & practices for you and your team.

- A well thought-out terminology, naming conventions, and hierarchy.

- Get an automated overview of how your design system progresses over time.

- Global design tokens in YAML format that you can use inside any component.

- Automatic generation of living, user editable documentation.

- Easily export and use your Design System as an NPM dependency in another Vue.js or Nuxt.js project.

- Create a token, an element, or a pattern, and it’s immediately available across all components.

- Pre-configured Prettier setup for auto-formatting code on both save and before commit.

- 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 stays private.

- [And more…](https://vueds.com/)



## Documentation



- **[Getting Started](https://github.com/arielsalminen/vue-design-system/wiki/getting-started): How to install and run Vue Design System.**

- [Terminology](https://github.com/arielsalminen/vue-design-system/wiki/terminology): Introduction to the system concepts and its hierarchy.

- [Naming of Things](https://github.com/arielsalminen/vue-design-system/wiki/naming-of-Things): Naming is hard, so it’s good to have clear guidelines.

- [Directory Structure](https://github.com/arielsalminen/vue-design-system/wiki/directory-structure): What goes where and why.

- [Working with the System](https://github.com/arielsalminen/vue-design-system/wiki/working-with-the-system): Concrete examples on how to work with `Tokens`, `Elements` , `Patterns` and `Templates`.

- [Editing Living Documentation](https://github.com/arielsalminen/vue-design-system/wiki/editing-living-documentation): How to customize the living system documentation.

- [Spacing](https://github.com/arielsalminen/vue-design-system/wiki/spacing): A framework for creating a predictable and harmonious spacing.

- [Component Status](https://github.com/arielsalminen/vue-design-system/wiki/Component-Status): Clear labels that reflect the state of completion.

- [Component QA](https://github.com/arielsalminen/vue-design-system/wiki/Component-QA): How to review new components and keep the quality high.

- [Contributing](https://github.com/arielsalminen/vue-design-system/blob/master/CONTRIBUTING.md): A set of guidelines for contributing to the system.

- [Code of Conduct](https://github.com/arielsalminen/vue-design-system/blob/master/CODE_OF_CONDUCT.md): By participating you agree to abide by its terms.

- [Frequently Asked Questions](): How to use icons, how to use font-face, etc.



## Examples



- **[Official example](https://vueds.com/example)**

- [Using Vue Design System as NPM dependency on Vue.js project](https://github.com/arielsalminen/vue-design-system-example)

- [Using Vue Design System as NPM Dependency on Nuxt.js project](https://github.com/arielsalminen/nuxt-design-system)

- [Using Vue Design System as NPM Dependency on a static website](https://github.com/arielsalminen/vue-design-system-example-website)



## Roadmap



- See [Roadmap tag](https://github.com/arielsalminen/vue-design-system/issues?q=is%3Aissue+is%3Aopen+label%3Aroadmap) in the issues.



## Changelog



- `3.5.7` is the latest release.

- See [Releases page](https://github.com/arielsalminen/vue-design-system/releases) for the full changelog.



## Need more help?



About to get started with a new design system? I’m an independent designer and developer, specialized in helping companies to build [design systems](https://vueds.com). I also conduct [design system workshops](https://arielsalminen.com/2018/vue-design-system/) and do consulting. [Let’s talk!](https://twitter.com/arielsalminen)



## Authors and License



[Ariel Salminen](https://arie.ls), [Artem Sapegin](http://sapegin.me), [Rafael Escala](https://github.com/rafaesc), [react-styleguidist contributors](https://github.com/styleguidist/react-styleguidist/graphs/contributors), [vue-styleguidist contributors](https://github.com/vue-styleguidist/vue-styleguidist/graphs/contributors), [Vue.js contributors](https://github.com/vuejs/vue/graphs/contributors), [vue-webpack-boilerplate contributors](https://github.com/vuejs-templates/webpack/graphs/contributors), [Theo contributors](https://github.com/salesforce-ux/theo/graphs/contributors), and [Polaris contributors](https://github.com/Shopify/polaris).



Licensed under the [MIT license](https://github.com/arielsalminen/vue-design-system/blob/master/LICENSE).