一個好玩的偏視覺交互的前端開發工具箱 / 套件 - Uix Kit 3 發佈

😇分享點有趣的東西（因爲業務需求不一樣，目前沒有作中文版，產品自己是針對國外網站），本身自己是作UI出生，開發只是業餘愛好，僅僅做爲平時工做的須要。雜七雜八會一些先後端開發。並不是職業碼農！

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

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

Demo

xizon.github.io/uix-kit/exa…

因爲Github Page不支持PHP和異步請求，能夠經過下面的網址查看完整Demo

uiux.cc/uix-kit

隨着時代的進步，不少零代碼拖拽建站工具，智能建站工具，這些工具能快速知足經常使用網站佈局與交互（視差、輪播等）需求。可是每每一些定製化的交互（3D，VR，SVG等），仍是須要運用經常使用的引擎和庫來完成整個交互構架。面對一些特殊的視覺交互需求，就須要一套工具箱，來幫助開發者快速完成網站的結構，標準參考，基礎視覺樣式、網格佈局等，Uix Kit由此而誕生！

它不是一個框架，不是一個腳本庫，它是一個兼容Bootstrap的快速建站HTML5套件，遵循W3C標準，包括手風琴、Tab切換、大型導航、單頁、視差、分頁、項目符號列表、文章列表、網格系統、AJAX交互、經常使用的多風格輪播、視頻、計數器、做品畫廊展現、模態彈窗、簡易燈箱、無限滾動加載、鼠標交互、滾動偵聽動畫、時間軸、按鈕、多風格Footer、文字效果、徽章、表單等等經常使用的網站模塊，並支持官方無限更新和擴展、優化，知足各種經常使用的、交互和動效級的Web前端開發需求。

甚至，你能夠把裏面的全部模塊刪除，只是使用套件的腳手架，經過套件提供的自動化流程，優化你的工做效率和方式方法。

需求：

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

描述：

• • 模塊批量打包生成
• • 採用BEM命名，與其它框架和庫互不衝突
• • 簡單的自定義CSS和JS核心文件，方便直接用其製做網站
• • 很好的跨設備響應式支持
• • 獨立的組件文件夾，可任意刪除和增長，開發環境中自動識別組件庫並進行打包
• • 支持中文和英文
• • 兼容Bootstrap 4.x
• • 提供常見的網頁組件和佈局
• • 標準代碼規範
• • W3C支持
• • Webpack通用腳手架

推薦使用方法：

具體的使用方法請參考github文檔或者演示視頻

1.從github或者npm上直接下載 github.com/xizon/uix-k…

2.配置你電腦的Node.js環境

3.下載完資源後，進入到uix-kit目錄下，運行npm run build, 進入開發模式

4.直接經過修改src/ 文件夾內的模塊組件的HTML,JS,SCSS文件，來實現前端開發，全部文件將會自動打包生成到examples/ 文件夾中。

5.當你須要配置腳手架和網站基礎信息和結構的時候，請直接編輯package.json文件。

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

套件結構：

小提示：

一個小小的工具箱，爲非數據交互類網站作一個結構鋪墊，提升效率 ：）業餘碼手，多多支持~