Vue.js ui components design system featured with SCSS
This design system helps to unify our design language and provides the documentation for further product design decisions.
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.
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.
Build after every release → https://3yourmind.github.io/kotti/
Auto build after PR merged to master → https://kotti.netlify.com/
Kotti Design System includes:
|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|
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
# add kotti-ui package to your project yarn add @3yourmind/kotti-ui
// in main.js import Vue from 'vue' import KottiUI from '@3yourmind/kotti-ui' // from v.0.0.4 kotti-ui includes kotti-style import '@3yourmind/kotti-ui/dist/KottiUI.css' Vue.use(KottiUI)
# 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
# install dependencies yarn install # serve with hot reload at localhost:3000 yarn dev:docs # deploy documents on github yarn deploy:docs