vue组件引入scss变量_SCSS特色的Vue.js ui组件设计系统

vue组件引入scss变量

Kotti设计系统 (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.

该设计系统有助于统一我们的设计语言，并为进一步的产品设计决策提供文档。 Kotti设计系统有两个主要部分：基础和组件。

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:

Kotti设计系统包括：

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	—

项目	含义	目的
设计准则	非开发人员了解设计系统的建议文档	给UX / UI设计人员一个真实的来源，并确保设计是一致的
Kotti-UI组件	基于设计准则的模块化和功能组件	替换我们项目中的共享组件
使用文件	基于示例的文档	帮助开发人员使用组件
测试	UI测试	-

资料夹结构 (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

翻译自: https://vuejsexamples.com/vue-js-ui-components-design-system-featured-with-scss/

vue组件引入scss变量