Getting Started

Install

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="">
      <link rel="stylesheet" href=""> (optional)
      <script src=""></script>
      <script src=""></script>

      接下來只要按照 styleguide/index.html 的說明，即可立刻看到套用 Vital UI Kit 的效果了！

  • 使用 NPM 安裝 Vital UI Kit

    如果您是開發者，想要客製化自己的 Vital UI Kit、更改 UI Kit 顏色，可使用以下方法。

    1. 安裝 vital-ui-kit
      npm i @gssfed/vital-ui-kit
    2. 在專案環境引用 node_modules/vital-ui-kit/dist 資料夾底下的 fonts、img、js
    3. 在專案環境引用 node_modules/vital-ui-kit/sass 資料夾，編譯輸出的 css 檔案路徑需和 fonts 平行
    4. 在 vital-ui-kit.scss 可 import 自己客製化的變數檔與加入樣式，可參考 base/_variables.scss 看有哪些變數可供更改。
      sass/
├── base/
│    ├── _variables.scss
│    ├── ...
├── components/
├── structures/
├── utils/
├── _core.scss
└── vital-ui-kit.scss

File Structure

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

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


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

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

  • ：latest
  • ：latest
  • ：latest
  • ：latest
  • ：9