一款有趣的響應式網站開發工具箱 - Uix Kit

引言：

隨著時代的進步，很多零代碼拖拽建站工具，智能建站工具，這些工具能快速滿足常用網站布局與交互（視差、輪播等）需求。但是往往一些定制化的交互（3D，VR，SVG等），還是需要運用常用的引擎和庫來完成整個交互構架。面對一些特殊的視覺交互需求，就需要一套工具箱，來幫助開發者快速完成網站的結構，標準參考，基礎視覺樣式、網格布局等，Uix Kit由此而誕生！ Uix Kit! 是一個偏視覺交互的工具集合，數據交互的模塊非常少，它基于常用的腳本庫，幫助開發者快速完成一套完整的交互型網站。它不是一個框架，不是一個腳本庫，它是一個兼容Bootstrap的快速建站HTML5套件，遵循W3C標準，包括手風琴、Tab切換、大型導航、單頁、視差、分頁、項目符號列表、文章列表、網格系統、AJAX交互、常用的多風格輪播、視頻、計數器、作品畫廊展示、模態彈窗、簡易燈箱、無限滾動加載、鼠標交互、滾動偵聽動畫、時間軸、按鈕、多風格Footer、文字效果、徽章、表單等等常用的網站模塊，并支持官方無限更新和擴展、優化，滿足各類常用的、交互和動效級的Web前端開發需求。支持Gulp和Webpack開發模式。套件提供了規范的HTML結構和模塊化的HTML,CSS,JS代碼(默認)，能夠讓開發者快速進入開發模式，自定義、修改或刪除任意模塊。

需求：

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

超過120+基礎模塊，快速搭建你的響應式網站!

Uix Kit是一個偏視覺交互的工具集合，它基于常用的腳本庫，幫助開發者快速完成一套完整的交互型網站。它不是一個框架，所有的模塊腳本和樣式，全部由你掌控！

演示

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

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

https://uiux.cc/uix-kit

資源地址：

https://github.com/xizon/uix-kit

核心目錄結構:

uix-kit/
├──?README.md???---------------------------?#?主要文檔
├──?CHANGELOG.md???------------------------?#?更新日志
├──?CONTRIBUTING.md???---------------------?#?引用資源
├──?LICENSE?????---------------------------?#?許可證
├──?webpack.config.js??--------------------?#?webpack腳手架配置
├──?package.json??-------------------------?#?項目配置文件【網站編譯生成的注釋信息可以在此修改】
├──?package-lock.json
├──?dist/
│???├──?css/
│???│???├──?uix-kit.css??------------------?#?網站核心樣式（已編譯）
│???│???├──?uix-kit.css.map
│???│???├──?uix-kit.min.css??--------------?#?網站核心樣式壓縮版，默認產品調用（已編譯）
│???│???├──?uix-kit.min.css.map
│???│???├──?uix-kit-rtl.css???-------------?#?網站核心RTL樣式（已編譯）
│???│???├──?uix-kit-rtl.css.map
│???│???├──?uix-kit-rtl.min.css???---------?#?網站核心RTL樣式壓縮版，默認產品調用（已編譯）
│???│???└──?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/?-----------------------------?#?PSD版本網格系統，輔助UI設計
├──?src/
│???├──?components/
│???│???├──?ES5/??-------------------------?#?第三方插件(直接合并，不經過ES6的編譯)
│???│???├──?ES6/_global?-------------------?#?網站通用代碼模塊
│???│???├──?ES6/_main??--------------------?#?網站定制化文件目錄【用于二次開發或者新網站開發。網站新的HTML模板和其它樣式腳本可以直接放到此文件夾】
│???│???└──?ES6/??-------------------------?#?網站通用功能模塊【一般不需要去修改它們，可以根據情況修改其樣式和腳本】
├──?examples/????????????????????????????????
│???├──?*.html??---------------------------?#?編譯后的純HTML模板，用于后端整合或者演示
│???└──?assets/??--------------------------?#?靜態資源目錄
│???│???????├──?css/
│???│???????├──?fonts/
│???│???????├──?images/
│???│???????├──?videos/
│???│???????├──?models/
│???│???????├──?json/
│???│???????└──?js/
└──

開發者基本操作:

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

下面是截圖和介紹圖（英文版），歡迎咂鉆：）