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