@gssfed/vital-ui-kit

v1.0.1

Published

3 years ago

UI Kit for GSS Vital Family

Downloads

0High
0Medium
0Low

Intro

Vital UI Kit 使用簡單、輕量級、模組化的 UI library。 Vital UI Kit 不不僅整理了常用又實用的元件，而且每一項元素都經過設計師與工程師合力精雕細琢產生，讓您在實作上能輕易的應用，也兼顧設計性、互動性與易用性。

適合各系統畫面
整合了常用的前端元素
重視使用者經驗
與 Kendo UI 無縫整合

Dependency

Jquery

Development Dependency

Installation

# yarn
yarn add @gssfed/vital-ui-kit

# npm
npm i @gssfed/vital-ui-kit --save

Quick Start

Vital UI Kit 提供了兩種使用方式，您可以依照喜好或是情況選擇適合您的方式開始應用。

直接開始使用 Vital UI Kit
如果您不需要建立開發環境，可以使用以下方式，方便且快速地應用 Vital UI Kit 在您的產品或專案上。
1. 下載 Vital UI Kit 並解壓縮
2. 將 dist 資料夾底下的 css、fonts、img、js 資料夾複製到您的專案環境根目錄
3. 在您的 Html 中引入
```
<link rel="stylesheet" href="./css/vital-ui-kit.css">
(optional) <link rel="stylesheet" href="./css/kendo.custom.vital-ui-kit.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="./js/vital-ui-kit.js"></script>
```
接下來只要按照 styleguide/index.html 的說明，即可立刻看到套用 Vital UI Kit 的效果了！
客製化 Vital UI Kit
如果您是開發者，想要客製化自己的 Vital UI Kit、更改 UI Kit 顏色，可使用以下方法。
1. npm i @gssfed/vital-ui-kit --save
2. 在專案環境輸出 node_modules/vital-ui-kit/dist 資料夾底下的 fonts、img、js 檔案
3. 在客製化的 sass 檔案引用 node_modules/vital-ui-kit/sass 資料夾的 core 與字體檔案，編譯輸出的 css 檔案路徑需和 fonts 平行
4. 可參考 vital-ui-kit.scss 的方式 import 自己客製化的變數檔與加入樣式，以及在 ~sass/base/_variables.scss 看有哪些變數可供更改。
```
sass/
├── base/
│    ├── _variables.scss
│    ├── ...
├── components/
├── structures/
├── utils/
├── _core.scss
└── vital-ui-kit.scss
```
客製化 Kendo theme (Vital UI Kit theme for Kendo)
如果您是開發者，且專案有使用 kendo-ui-core 或是 kendo-angular-ui 套件，想要客製化自己的 Kendo theme，可使用以下方法。
1. npm i @gssfed/vital-ui-kit
2. 在專案環境引用 node_modules/vital-ui-kit/dist/kendo 資料夾底下對應的 kendo sources，編譯輸出的 css 檔案。
  - less2014 (for kendo-ui-core<=1.0.2)
  - less2016 (for kendo-ui-core>=2016.2.518 <=2017.3.1206，beta version)
  - sassAngualar (for kendo-angular-ui，beta version)
3. kendo sources 可 import 自己客製化的變數檔與加入樣式，各檔案說明如下：
  - _icon.variables 可客製化 Kendo 使用的 icon (預設使用 vital-ui-kit 的 icomoon fonts)
  - _kendo.custom.style 可客製化自己的樣式
  - _kendo.custom.style.variables 可客製化自己的變數檔
  - _kendo.custom.theme 可更改 Kendo theme 的變數檔

File Structure

安裝後的資料夾中， build/dist/ 包含編譯後的原始檔案與壓縮檔，與 css 編譯前的 sass 原始檔案，提供給開發者修改變數、客製化樣式。

build/styleguide/ 包含 Vital UI Kit 的使用說明，可打開 index.html 閱讀。

我們也提供 Kendo 套件的樣式，目前支援版本 kendo-ui-core<=1.0.2，2016 以後的版本樣式為 beta 測試版，可自行微調使用。

vital-ui-kit/
├── dist/
│    ├── css/
│    │    ├── kendo.custom.vital-ui-kit.css
│    │    ├── vital-ui-kit.css
│    │    ├── ...
│    ├── js/
│    │    ├── vital-ui-kit.js
│    │    ├── ...
│    ├── img/
│    ├── fonts/
│    ├── less/
│    └── sass/
├─── styleguide/
│    ├── index.html
│    ├── ...

Browser Support

為了網頁技術的推進，以及為使用者帶來更好的體驗，瀏覽器支援度我們會專注在最新版的主流瀏覽器上。

| IE / Edge | Firefox | Chrome | Safari | Opera | | :---------: | :---------: | :---------: | :---------:| :---------: | | IE9, IE10, IE11, Edge| ✓ | ✓ | ✓ | ✓

Copyright and License

The MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme