Intro
Vital UI Kit 使用簡單、輕量級、模組化的 UI library。 Vital UI Kit 不不僅整理了常用又實用的元件，而且每一項元素都經過設計師與工程師合力精雕細琢產生，讓您在實作上能輕易的應用，也兼顧設計性、互動性與易用性。
- 適合各系統畫面
- 整合了常用的前端元素
- 重視使用者經驗
- 與 Kendo UI 無縫整合
Dependency
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 在您的產品或專案上。
-
下載 Vital UI Kit 並解壓縮
-
將
dist資料夾底下的css、fonts、img、js資料夾複製到您的專案環境根目錄 -
在您的 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 顏色，可使用以下方法。
-
npm i @gssfed/vital-ui-kit --save -
在專案環境輸出
node_modules/vital-ui-kit/dist資料夾底下的fonts、img、js檔案 -
在客製化的 sass 檔案引用
node_modules/vital-ui-kit/sass資料夾的core與字體檔案，編譯輸出的 css 檔案路徑需和fonts平行 -
可參考
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，可使用以下方法。
-
npm i @gssfed/vital-ui-kit -
在專案環境引用
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)
-
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
Copyright © 2017 Galaxy Software Services
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.