# Human-Connection Styleguide
[![Build Status](https://img.shields.io/travis/com/Human-Connection/Nitro-Styleguide/master.svg)](https://travis-ci.com/Human-Connection/Nitro-Styleguide)
[![npm](https://img.shields.io/npm/v/@human-connection/styleguide.svg)](https://www.npmjs.com/package/@human-connection/styleguide)

CION is a Design System build primary for Vue 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.

Living styleguide demo: https://styleguide.human-connection.org

Landing page demo: https://cion.visualjerk.de

Integrate it in your application: [Quick Start](https://github.com/visualjerk/vue-cion-design-system/wiki/Quick-Start)

[![Screenshot](./preview/customize.png)](https://github.com/visualjerk/vue-cion-design-system/raw/master/preview/customize.png)

## Project setup
```
yarn install
```

## Developing

Compiles and hot-reloads living styleguide

```
yarn dev
```

## Building

### Living styleguide


Compiles living styleguide to `./docs`

```
yarn build
```

### Library

Compiles design system as a library to `./dist`

```
yarn build:lib
```

## Helper

### Serve living styleguide locally
```
yarn serve
```

### Lints and fixes files
```
yarn lint
```