一个快速开发响应式网站的有趣的偏视觉交互的前端开发工具箱 / 套件 - 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项目主页，项目会不断更新升级优化：）