這個(gè)產(chǎn)品維護(hù)已經(jīng)有一年了（由于業(yè)務(wù)需求不同巧颈，目前沒(méi)有做中文版，產(chǎn)品本身是針對(duì)國(guó)外網(wǎng)站）兜粘，自己本身是做UI出生申窘，開(kāi)發(fā)只是業(yè)余愛(ài)好，僅僅作為平時(shí)工作的需要孔轴。雜七雜八會(huì)一些前后端開(kāi)發(fā)剃法。并非職業(yè)碼農(nóng)！

我是一個(gè)BBoy路鹰，也是一個(gè)愛(ài)到處旅行拍極限視頻的冒險(xiǎn)家贷洲！喜歡大自然收厨，不喜歡繁華都市。

好啦优构，自我介紹簡(jiǎn)單就好Ｋ腥：）

Uix Kit! 是一個(gè)偏視覺(jué)交互的工具集合，數(shù)據(jù)交互的模塊非常少钦椭，它基于常用的腳本庫(kù)拧额，幫助開(kāi)發(fā)者快速完成一套完整的交互型網(wǎng)站。它不是一個(gè)框架彪腔，不是一個(gè)腳本庫(kù)侥锦，它是一個(gè)兼容Bootstrap的快速建站HTML5套件，遵循W3C標(biāo)準(zhǔn)德挣，包括手風(fēng)琴恭垦、Tab切換、大型導(dǎo)航格嗅、單頁(yè)番挺、視差、分頁(yè)屯掖、項(xiàng)目符號(hào)列表建芙、文章列表、網(wǎng)格系統(tǒng)懂扼、AJAX交互、常用的多風(fēng)格輪播右蒲、視頻阀湿、計(jì)數(shù)器、作品畫(huà)廊展示瑰妄、模態(tài)彈窗陷嘴、簡(jiǎn)易燈箱、無(wú)限滾動(dòng)加載间坐、鼠標(biāo)交互灾挨、滾動(dòng)偵聽(tīng)動(dòng)畫(huà)、時(shí)間軸竹宋、按鈕劳澄、多風(fēng)格Footer、文字效果蜈七、徽章秒拔、表單等等常用的網(wǎng)站模塊，并支持官方無(wú)限更新和擴(kuò)展飒硅、優(yōu)化砂缩，滿(mǎn)足各類(lèi)常用的作谚、交互和動(dòng)效級(jí)的Web前端開(kāi)發(fā)需求。支持Gulp和Webpack開(kāi)發(fā)模式庵芭。套件提供了規(guī)范的HTML結(jié)構(gòu)和模塊化的HTML,CSS,JS代碼(默認(rèn))妹懒，能夠讓開(kāi)發(fā)者快速進(jìn)入開(kāi)發(fā)模式，自定義双吆、修改或刪除任意模塊眨唬。

甚至，你可以把里面的所有模塊刪除伊诵，只是使用套件的腳手架单绑，通過(guò)套件提供的自動(dòng)化流程，優(yōu)化你的工作效率和方式方法曹宴。

當(dāng)我們做項(xiàng)目的時(shí)候搂橙，會(huì)使用一些優(yōu)秀的模板，但是很難去個(gè)性化去定制笛坦，特別是很難將其模塊化管理区转。

當(dāng)我們做項(xiàng)目的時(shí)候，會(huì)使用到各種插件版扩，但是由于插件眾多废离，容易造成規(guī)范和結(jié)構(gòu)的混亂。

當(dāng)我們做項(xiàng)目的時(shí)候礁芦，重新編寫(xiě)一堆堆HTML,CSS,JAVASCRIPT代碼蜻韭，時(shí)間長(zhǎng)了，效率低柿扣，質(zhì)量低肖方，甚至?xí)捑胨鼈儯罒o(wú)止境的工作和加班未状。

當(dāng)我們做項(xiàng)目的時(shí)候俯画，總是不能開(kāi)心的讓系統(tǒng)去執(zhí)行自動(dòng)化任務(wù)，不夠科學(xué)司草，不夠前衛(wèi)艰垂，不夠智能，我們也會(huì)漸漸對(duì)網(wǎng)頁(yè)設(shè)計(jì)或前端開(kāi)發(fā)產(chǎn)生一些低潮埋虹。

需求：

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

描述：

+? 模塊批量打包生成

+ 采用BEM命名旦事，與其它框架和庫(kù)互不沖突

+??簡(jiǎn)單的自定義CSS和JS核心文件魁巩，方便直接用其制作網(wǎng)站

+??很好的跨設(shè)備響應(yīng)式支持

+??獨(dú)立的組件文件夾，可任意刪除和增加姐浮，開(kāi)發(fā)環(huán)境中自動(dòng)識(shí)別組件庫(kù)并進(jìn)行打包

+??支持中文和英文

+? 兼容Bootstrap 4.x

+??提供常見(jiàn)的網(wǎng)頁(yè)組件和布局

+??標(biāo)準(zhǔn)代碼規(guī)范

+??W3C支持

+??Webpack通用腳手架

推薦使用方法：

具體的使用方法請(qǐng)參考github文檔或者演示視頻

1.從github或者npm上直接下載https://github.com/xizon/uix-kit

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

3.下載完資源后谷遂，進(jìn)入到uix-kit目錄下，運(yùn)行npm run build, 進(jìn)入開(kāi)發(fā)模式

4.直接通過(guò)修改src/?文件夾內(nèi)的模塊組件的HTML,JS,SCSS文件卖鲤，來(lái)實(shí)現(xiàn)前端開(kāi)發(fā)肾扰，所有文件將會(huì)自動(dòng)打包生成到examples/?文件夾中。

5.當(dāng)你需要配置腳手架和網(wǎng)站基礎(chǔ)信息和結(jié)構(gòu)的時(shí)候蛋逾，請(qǐng)直接編輯package.json文件集晚。

不建議跳過(guò)開(kāi)發(fā)模式直接修改examples/ 文件夾里的文件，因?yàn)榇a量非常大区匣，很難去維護(hù)和定制各種動(dòng)畫(huà)偷拔、交互、結(jié)構(gòu)亏钩。

結(jié)構(gòu)：

小提示：

這個(gè)工具套件并不是強(qiáng)制誰(shuí)去使用它的默認(rèn)樣式和交互效果莲绰，而是提供了一個(gè)便于利用的自動(dòng)化腳手架，通過(guò)Gulp和Webpack來(lái)規(guī)范你的開(kāi)發(fā)流程姑丑，提高代碼的質(zhì)量和編寫(xiě)效率蛤签，提高后期維護(hù)的便利性。這是一種工作方法栅哀，而不是現(xiàn)成的模板(當(dāng)然也可以直接使用examples/目錄里的項(xiàng)目文件震肮，作為快速建站的模板)，Uix Kit的價(jià)值留拾，在于快速戳晌、簡(jiǎn)單的模塊分離，自動(dòng)化打包和生成目錄间驮，并提供了豐富的默認(rèn)常用前端代碼應(yīng)用。

如果它對(duì)你有幫助马昨，可以關(guān)注Github項(xiàng)目主頁(yè)竞帽，項(xiàng)目會(huì)不斷更新升級(jí)優(yōu)化：）詳細(xì)使用方法請(qǐng)參考github主頁(yè)?https://github.com/xizon/uix-kit

文章同步發(fā)布于Chuckie Chang中文博客