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.
Living styleguide demo: https://styleguide.cion.visualjerk.de
Landing page demo: https://cion.visualjerk.de
- Integrate it in your application: Usage
- 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.
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
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.
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.
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.