CION: Design system boilerplate for Vue.js

CION design system vue.js

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.

Use the system's components to solve common UI problems like layout, typography, displaying data or data input.

The system utilizes design tokens, a living styleguide with integrated code playgrounds and reusable components for common UI tasks.

CION - Design system boilerplate for Vue.js

  • 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 the development server

yarn dev

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.

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.

Usage

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)

This project is hosted on GitHub. Created by visualjerk.