Uix Kit 快速建站前端开发套件-工具箱

这个产品维护已经有一年了（由于业务需求不同，目前没有做中文版，产品本身是针对国外网站），自己本身是做UI出生，开发只是业余爱好，仅仅作为平时工作的需要。杂七杂八会一些前后端开发。并非职业码农！

我是一个BBoy，也是一个爱到处旅行拍极限视频的冒险家！喜欢大自然，不喜欢繁华都市。

好啦，自我介绍简单就好！：）

 

Uix Kit! 是一个偏视觉交互的工具集合，数据交互的模块非常少，它基于常用的脚本库，帮助开发者快速完成一套完整的交互型网站。它不是一个框架，不是一个脚本库，它是一个兼容Bootstrap的快速建站HTML5套件，遵循W3C标准，包括手风琴、Tab切换、大型导航、单页、视差、分页、项目符号列表、文章列表、网格系统、AJAX交互、常用的多风格轮播、视频、计数器、作品画廊展示、模态弹窗、简易灯箱、无限滚动加载、鼠标交互、滚动侦听动画、时间轴、按钮、多风格Footer、文字效果、徽章、表单等等常用的网站模块，并支持官方无限更新和扩展、优化，满足各类常用的、交互和动效级的Web前端开发需求。支持Gulp和Webpack开发模式。套件提供了规范的HTML结构和模块化的HTML,CSS,JS代码(默认)，能够让开发者快速进入开发模式，自定义、修改或删除任意模块。

 

甚至，你可以把里面的所有模块删除，只是使用套件的脚手架，通过套件提供的自动化流程，优化你的工作效率和方式方法。

当我们做项目的时候，会使用一些优秀的模板，但是很难去个性化去定制，特别是很难将其模块化管理。

 

当我们做项目的时候，会使用到各种插件，但是由于插件众多，容易造成规范和结构的混乱。

当我们做项目的时候，重新编写一堆堆HTML,CSS,JAVASCRIPT代码，时间长了，效率低，质量低，甚至会厌倦它们，永无止境的工作和加班。

当我们做项目的时候，总是不能开心的让系统去执行自动化任务，不够科学，不够前卫，不够智能，我们也会渐渐对网页设计或前端开发产生一些低潮。

 

需求：

现在很多普通网站，已经可以通过在线的拖拽建站工具，智能建站系统快速完成，因此普通网站已经无需专门花很多金钱和时间去找一个开发者完成。Uix Kit工具箱是针对一些特殊效果的交互的网站，也可以用于比较个性化的定制网站的开发设计。

 

为何使用？

• 它不是可重用的组件结构
• 它不是一个JavaScript框架
• 它是一个基于Webpack的开发环境的工具箱
• 您可以用最喜欢的方式使用任意JavaScript库来构建样式和动画脚本
• 适用于开发视觉交互类型的网站和WordPress模板
• 遵循W3C标准和SEO优化
• 使用BEM命名，因此核心Uix Kit项目不会与其他项目冲突
• 自动为每个模块的名称注释生成目录
• 每个模块均包含SASS/SCSS，JavaScript和HTML文件
• 为React架构提供开发环境配置
• 与Bootstrap 4.x兼容
• 提供常见的网页组件和布局，提高开发效率和页面质量标准
• 使用ES6导入或导出多个模块，第三方插件可以采用纯文件合并的方式不进行导入和导出
• 完整的示例目录可以在没有Node.js开发环境的情况下独立开发响应式网站

 

推荐使用方法：

具体的使用方法请参考github文档或者演示视频

1.从github下载 https://github.com/xizon/uix-kit

2.配置你电脑的Node.js环境

3.下载完资源后，进入到uix-kit目录下，运行npm run build, 进入开发模式

4.直接通过修改src/ 文件夹内的模块组件的HTML,JS,SCSS文件，来实现前端开发，所有文件将会自动打包生成到 examples/ 文件夹中。

5.当你需要配置脚手架和网站基础信息和结构的时候，请直接编辑package.json文件。

不建议跳过开发模式直接修改examples/ 文件夹里的文件，因为代码量非常大，很难去维护和定制各种动画、交互、结构。

 

 

套件结构：

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
│   │   ├── uix-kit.concat.es5.dev.js
│   │   └── uix-kit.concat.es5.dev.js.map
├── misc/
│   ├── screenshots/
│   └── grid/
├── src/
│   ├── index.js
│   ├── index-rtl.js
│   ├── components/
│   │   ├── ES5/
│   │   └── ES6/
├── examples/
│   ├── *.html
│   ├── assets/
│   │       ├── css/
│   │       ├── fonts/
│   │       ├── images/
│   │       ├── videos/
│   │       ├── models/
│   │       ├── json/
│   │       └── js/
└──

　　

 

小提示：

 

这个工具套件并不是强制谁去使用它的默认样式和交互效果，而是提供了一个便于利用的自动化脚手架，通过Webpack来规范你的开发流程，提高代码的质量和编写效率，提高后期维护的便利性。这是一种工作方法，而不是现成的模板(当然也可以直接使用examples/目录里的项目文件，作为快速建站的模板)，Uix Kit的价值，在于快速、简单的模块分离，自动化打包和生成目录，并提供了丰富的默认常用前端代码应用。


如果它对你有帮助，可以关注Github项目主页，项目会不断更新升级优化：） 详细使用方法请参考github主页 https://github.com/xizon/uix-kit