GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → GSS-FED → Vital Ui Kit

GSS-FED / Vital Ui Kit

Licence: mit
簡單、輕量級、模組化的 UI library (React component can be found in README)

Programming Languages

js
455 projects

Labels

htmlcssuiuikit

Projects that are alternatives of or similar to Vital Ui Kit

Bfkit Swift
BFKit-Swift is a collection of useful classes, structs and extensions to develop Apps faster.
Stars: ✭ 963 (+1683.33%)
Mutual labels:  uikit
Tail Kit
Tail-kit is a free and open source components and templates kit fully coded with Tailwind css 2.0.
Stars: ✭ 997 (+1746.3%)
Mutual labels:  uikit
Cacao
Pure Swift Cross-platform UIKit (Cocoa Touch) implementation (Supports Linux)
Stars: ✭ 1,040 (+1825.93%)
Mutual labels:  uikit
Parallaxscrolling
Parallax Scrolling
Stars: ✭ 36 (-33.33%)
Mutual labels:  uikit
H5ui
Lightweight, elegant open source mobile UI style library.
Stars: ✭ 44 (-18.52%)
Mutual labels:  uikit
Pagingkit
PagingKit provides customizable menu UI. It has more flexible layout and design than the other libraries.
Stars: ✭ 1,030 (+1807.41%)
Mutual labels:  uikit
Data Driven Vc
Swift Data-Driven UI examples
Stars: ✭ 31 (-42.59%)
Mutual labels:  uikit
Tap water
【声明：未发布前，勿使用，勿star，预计2020年11月底发布】Flutter tab_bar组件，支持中间带加号按钮的TabBar，支持Lottie动画。iTeaTime(技术清谈)团队出品。Highly customizable tabBar and tabBarController for Flutter
Stars: ✭ 52 (-3.7%)
Mutual labels:  uikit
Swifthuecolorpicker
iOS HUE color picker
Stars: ✭ 44 (-18.52%)
Mutual labels:  uikit
Vyplayindicator
PlayIndicator inspired by Apple's Music Player.
Stars: ✭ 47 (-12.96%)
Mutual labels:  uikit
Peel Off Animation Example Code
Example code for https://robb.is/working-on/a-peel-off-animation
Stars: ✭ 37 (-31.48%)
Mutual labels:  uikit
Spalert
Native alert from Apple Music & Feedback. Contains Done, Heart & Message and other presets.
Stars: ✭ 1,014 (+1777.78%)
Mutual labels:  uikit
Ibpcollectionviewcompositionallayout
Backport of UICollectionViewCompositionalLayout to earlier iOS 12
Stars: ✭ 1,034 (+1814.81%)
Mutual labels:  uikit
Gaudi
A swift theming framework for UIKit for easy adoption of multi theme and iOS dark mode
Stars: ✭ 36 (-33.33%)
Mutual labels:  uikit
Ohcubeview
A UIScrollView subclass inspired by the Instagram Stories cube animation
Stars: ✭ 48 (-11.11%)
Mutual labels:  uikit
Swiftanimations
A small DSL to chain animations on top of UIKit
Stars: ✭ 31 (-42.59%)
Mutual labels:  uikit
Availity Uikit
Availity UI Kit powered by Bootstrap 4
Stars: ✭ 44 (-18.52%)
Mutual labels:  uikit
Katana Ui Swift
UIKit port of React, built on top of Katana.
Stars: ✭ 53 (-1.85%)
Mutual labels:  uikit
Splitflap
A simple split-flap display for your Swift applications
Stars: ✭ 1,047 (+1838.89%)
Mutual labels:  uikit
Cardkit
iOS 11 cards in Swift
Stars: ✭ 47 (-12.96%)
Mutual labels:  uikit
View All Similar Projects ➔

Vital UI Kit

簡單、輕量級、模組化的 UI library
View Documents »
   (NEW!) React Component repository »

Join the chat at https://gitter.im/GSS-FED/vital-ui-kit npm version Build Status devDependency Status

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 提供了兩種使用方式，您可以依照喜好或是情況選擇適合您的方式開始應用。

  1. 直接開始使用 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 的效果了！

  2. 客製化 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

  3. 客製化 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 / EdgeIE / Edge FirefoxFirefox ChromeChrome SafariSafari OperaOpera
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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].