一個快速開發響應式網站的有趣的偏視覺交互的前端開發工具箱 / 套件 - Uix Kit

這個產品維護已經有一年了（因爲業務需求不一樣，產品自己是針對國外網站和WordPress的需求搭配），本身自己是作UI出生，開發只是業餘愛好，僅僅做爲平時工做的須要。雜七雜八會一些先後端開發。並不是職業碼農！

我是一個BBoy，也是一個愛處處旅行拍極限視頻的冒險家！喜歡大天然，不喜歡繁華都市。

好啦，自我介紹簡單就好！：）

Uix Kit —— 它是一個偏視覺交互的工具集合，它基於經常使用的腳本庫，幫助開發者快速完成一套完整的交互型網站。

項目地址： https://github.com/xizon/uix-kit

它不是一個框架，不是一個腳本庫，它是一個兼容Bootstrap的快速建站HTML5套件，遵循W3C標準，包括手風琴、Tab切換、大型導航、單頁、視差、分頁、項目符號列表、文章列表、網格系統、AJAX交互、經常使用的多風格輪播、視頻、計數器、做品畫廊展現、模態彈窗、簡易燈箱、無限滾動加載、鼠標交互、滾動偵聽動畫、時間軸、按鈕、多風格Footer、文字效果、徽章、表單等等經常使用的網站模塊，並支持官方無限更新和擴展、優化，知足各種經常使用的、交互和動效級的Web前端開發需求。支持Gulp和Webpack開發模式。套件提供了規範的HTML結構和模塊化的HTML,CSS,JS代碼(默認)，可以讓開發者快速進入開發模式，自定義、修改或刪除任意模塊。

設計初衷：

如今不少普通網站，已經能夠經過在線的拖拽建站工具，智能建站系統快速完成，所以普通網站已經無需專門花不少金錢和時間去找一個開發者完成。Uix Kit工具箱是針對一些特殊效果的交互的網站，也能夠用於比較個性化的定製網站的開發設計。

套件結構：

uix-kit/
├── README.md
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── webpack.config.js
├── package-lock.json
├── package.json
├── dist/
│   ├── css/
│   │   ├── uix-kit.css
│   │   ├── uix-kit.css.map
│   │   ├── uix-kit.min.css
│   │   ├── uix-kit.min.css.map
│   │   ├── uix-kit-rtl.css
│   │   ├── uix-kit-rtl.css.map
│   │   ├── uix-kit-rtl.min.css
│   │   └── uix-kit-rtl.min.css.map
│   └── js/
│   │   ├── uix-kit.js
│   │   ├── uix-kit.js.map
│   │   ├── uix-kit.min.js
│   │   ├── uix-kit.min.js.map
│   │   ├── uix-kit-rtl.js
│   │   ├── uix-kit-rtl.js.map
│   │   ├── uix-kit-rtl.min.js
│   │   └── uix-kit-rtl.min.js.map
├── misc/
│   ├── screenshots/
│   └── grid/
├── src/
│   ├── index.js
│   ├── index-rtl.js
│   ├── components/
│   │   ├── ES5/  => Third-party plugins adopt pure file merger and do not import and export
│   │   └── ES6/  => Core modules
├── examples/
│   ├── *.html
│   ├── assets/
│   │       ├── css/
│   │       ├── fonts/
│   │       ├── images/
│   │       ├── videos/
│   │       ├── models/
│   │       ├── json/
│   │       └── js/
└──

演示

https://xizon.github.io/uix-kit/examples/

GitHub pages只提供靜態內容訪問，AJAX和PHP請求沒法預覽效果，你能夠經過線上服務器進行完整預覽。

https://uiux.cc/uix-kit

開發者基本操做:

1. 配置你電腦的Node.js環境
2. 下載完資源後，進入到 uix-kit 目錄下，運行 npm run build, 進入開發模式
3. 當你須要配置腳手架和網站基礎信息和結構的時候，請直接編輯 package.json 文件。
4. 網站的定製化模塊功能在 src/components/ES6/_global 和 src/components/ES6/_main 中，src/components/ES6/* 其它模塊是通用型的功能模塊。HTML文件將會自動打包生成到 examples/ 文件夾中，核心JavaScript和CSS文件會自動打包到 dist/ 文件夾裏

不建議跳過開發模式直接修改examples/ 文件夾裏的文件，由於代碼量很是大，很難去維護和定製各類動畫、交互、結構。

命令使用方法:

Step 1. 使用命令進入 uix-kit/ 目錄, {your_directory}換成你的目錄路徑

$ cd /{your_directory}/uix-kit

Step 2. 若是沒有node_modules文件夾，則須要運行下面的代碼來安裝開發環境

$ sudo npm install --only=dev --unsafe-perm --production

Step 3. 運行下面的代碼來實時開發項目，修改模塊功能

$ npm run build

Step 4. 可使用下面的網址來訪問，建議使用本地服務器來訪問，由於下面的網址是靜態訪問，不會執行ajax異步請求，一些網站須要異步來測試效果

http://localhost:8080/examples/

FAQ:

若是出現nodejs的環境或權限問題，可使用下面的命令解決，注意把{username}換成你本身的設備裏的名字。

$ sudo chown -R $USER:$(id -gn $USER) /Users/{username}/.config

小提示：

這個工具套件並非強制誰去使用它的默認樣式和交互效果，而是提供了一個便於利用的自動化腳手架，經過Webpack來規範你的開發流程，提升代碼的質量和編寫效率，提升後期維護的便利性。這是一種工做方法，而不是現成的模板(固然也能夠直接使用examples/目錄裏的項目文件，做爲快速建站的模板)，Uix Kit的價值，在於靈活運用經常使用的腳本庫(threejs，jQuery等)，靈活處理HTML文件的結構，快速、簡單的模塊分離，自動化打包和生成目錄，並提供了豐富的默認經常使用前端代碼應用。

若是它對你有幫助，能夠關注Github項目主頁，項目會不斷更新升級優化：）