一款有趣的響應(yīng)式網(wǎng)站開發(fā)工具箱 - Uix Kit

引言：

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

需求：

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

超過120+基礎(chǔ)模塊，快速搭建你的響應(yīng)式網(wǎng)站!

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

演示

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

GitHub pages只提供靜態(tài)內(nèi)容訪問，AJAX和PHP請求無法預(yù)覽效果，你可以通過線上服務(wù)器進行完整預(yù)覽。

https://uiux.cc/uix-kit

資源地址：

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

核心目錄結(jié)構(gòu):

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

開發(fā)者基本操作:

1. 配置你電腦的Node.js環(huán)境

2. 下載完資源后，進入到?uix-kit?目錄下，運行?npm run build, 進入開發(fā)模式

3. 當你需要配置腳手架和網(wǎng)站基礎(chǔ)信息和結(jié)構(gòu)的時候，請直接編輯?package.json?文件。

4. 網(wǎng)站的定制化模塊功能在?src/components/ES6/_global?和?src/components/ES6/_main?中，src/components/ES6/*?其它模塊是通用型的功能模塊。HTML文件將會自動打包生成到?examples/?文件夾中，核心JavaScript和CSS文件會自動打包到?dist/?文件夾里

不建議跳過開發(fā)模式直接修改examples/ 文件夾里的文件，因為代碼量非常大，很難去維護和定制各種動畫、交互、結(jié)構(gòu)。

命令使用方法:

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

$?cd?/{your_directory}/uix-kit

Step 2.?如果沒有node_modules文件夾，則需要運行下面的代碼來安裝開發(fā)環(huán)境

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

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

$?npm?run?build

Step 4.?可以使用下面的網(wǎng)址來訪問，建議使用本地服務(wù)器來訪問，因為下面的網(wǎng)址是靜態(tài)訪問，不會執(zhí)行ajax異步請求，一些網(wǎng)站需要異步來測試效果

http://localhost:8080/examples/

FAQ:

如果出現(xiàn)nodejs的環(huán)境或權(quán)限問題，可以使用下面的命令解決，注意把{username}換成你自己的設(shè)備里的名字。

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

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