Vue.js ui components design system featured with SCSS

by Vue.js Examples

Kotti Design System

This design system helps to unify our design language and provides the documentation for further product design decisions. The Kotti design system has two main parts: foundation and components.

The foundation is higher level and works as a guideline for the whole system, which defines the layout, color, icons, typography and writing style. It also creates styles and characteristics which are different from other design systems.

Components are more concrete elements. They are pre-defined and cannot be changed in most cases. These components include banners, buttons, drawers and more.

View Demo Download Source

Design Principles

Keen: The design should encourage users to engage with the product.

Okay: It’s okay not to follow the foundation if there's good reason. It’s
okay to break the design principles when it’s the only way to solve the
requirement.

Transparent: Making the design easy to perceive or detect, user can process
smoothly without being aware of its presence.

Timely: The design need to response and help user finish their task in a
timely matter.

Intuitive: The design should be intuitive and easy to understand, and
decrease the learning curve.

Project Scope

Kotti Design System includes:

Item Meaning Purpose
Design Guideline A suggestion documentation for non-developer to understand the design system Give UX/UI designer a single source of truth and make sure design is consistent
Kotti-UI Components Modular and functional components based on design guideline Replace the shared components in our project
Usage Documents Example based documentation Help developer to use the component
Test UI Test —

Folder Structure

kotti
├─ docs // nuxt.js managed design guideline & usage documentation
│  ├─ assets
|  ├─ pages
├─ packages
│  ├─ kotti-style // scss file documentation
│  └─ kotti-button
│     ├─ src
│     ├─ index.js
├─ package.json
├─ CHANGELOG.md
└─ README.md

Install

# add kotti-ui package to your project
yarn add @3yourmind/kotti-ui

// in main.js
import Vue from 'vue'
import KottiUI from 'kotti-ui'

// from v.0.0.4 kotti-ui includes kotti-style
import '@3yourmind/kotti-ui/dist/KottiUI.css'

Vue.use(KottiUI)

Build

# install dependencies
yarn install

# build kott-ui
yarn run build:kotti

# generate kotti-docs for github pages to /gh-pages
yarn run build:gh-pages

Develop

# install dependencies
yarn install

# serve with hot reload at localhost:3000
yarn dev:docs

# deploy documents on github
yarn deploy:docs

GitHub