Design system boilerplate
for Vue.js applications

CION is a design system build primarily for Vue.js applications. You can use it as a starting point for building your own design system. The system utilizes design tokens, a living styleguide with integrated code playgrounds and reusable components for common UI tasks.

Styleguide demo GitHub

Living
Styleguide

See the styleguide adapt to your design system as you move forward.

Component
Documentation

Autogenerated documentation for your components with integrated playground.

Basic
Components

Includes some basic components to help you get started.

First steps

Setup

Download the boilerplate

git clone https://github.com/visualjerk/vue-cion-design-system.git your-system-name

Install its dependencies
```
cd your-system-name && yarn install
```
Start development server
```
yarn dev
```

Design tokens

Design tokens define the look and feel of your design system at the most basic level.

To get a grasp of what design tokens are, open up src/system/tokens/font-size.yml in your editor.

As you can see, every font-size value is represented by a meaningful name. Instead of hardcoding values in your codebase you can just refer to the name of each token.

Your styleguide will automatically list these tokens in the section "Design Tokens":

Now try updating the value for "font-size-body" to 17px and see how the styleguide adapts to your change.

Adjusting colors

Open up src/system/tokens/color.yml in your editor.

By default we use HSL to describe color tokens. This helps creating consistent colors throughout the application. If you don't know HSL yet, take a look at the HSL Color Picker.

Color hues

In order to keep the color token file DRY, base hues are listed under "aliases". Each alias stands for hue + saturation. Try to adjust the value for "teal" and see how that affects the styleguide.

Color tokens

The actual color tokens are listed under "props". Try changing the "color-primary" and its variations to use blue instead of teal and see the effect on the styleguide.

Creating your design

Have a look at the examples inside src/system/tokens/_examples to get an idea of what is possible. You can try to overwrite the tokens in the main folder with those in the examples subfolders.

Now you can start to create your own design by adjusting the design tokens to your taste. Enjoy!

Usage

Integration in your application

It is recommended to integrate your design system as a private dependency via NPM. However, when first starting out, it is easier to keep it as a subfolder inside your application project.

Clone the design system to a subfolder of your project and install it's dependencies

cd /path/to/your/project
git clone https://github.com/visualjerk/vue-cion-design-system.git design-system
cd design-system && yarn install

Add it as a dependency to your project

cd /path/to/your/project
yarn add file:./design-system

Import and use it in your application entry (ex. main.js)

import Vue from 'vue'

...

import DesignSystem from 'vue-cion-design-system'
import 'vue-cion-design-system/dist/system.css'
Vue.use(DesignSystem)

...

Now you can use the design system's components in your application. Example:
```
<ds-button primary>Click me</ds-button>
```

Developing / Styleguide

When developing new or changing existing components, start the living styleguide to get direct feedback on your work. Also use the styleguide during development on your main project in order to find the components you need.

cd /path/to/your/project/design-system
yarn dev

Updating design system

The design system is added to your project as a npm dependency. Therefore you need to build it and update the dependency in order to see the changes in your actual project.

Build the system:

cd /path/to/your/project/design-system
yarn build:lib

Update the dependency:

cd /path/to/your/project
yarn upgrade vue-cion-design-system