Quick Start

CION is a Boilerplate for creating your own Design System in Vue. In order to use it, you need to integrate it in your application(s).

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.

Integration

• 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

Developing

• Start the Design System's living styleguide

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

Updating

• Build the library

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

• Update the dependency in your project

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