Uix Kit 有趣的响应式网站开发工具箱 Uix Kit

程序名称:Uix Kit

授权协议: MIT

操作系统: 跨平台

开发语言: JavaScript

Uix Kit 介绍

引言:

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

需求:

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

超过120+基础模块,快速搭建你的响应式网站!

Uix Kit是一个偏视觉交互的工具集合,它基于常用的脚本库,帮助开发者快速完成一套完整的交互型网站。 它不是一个框架,所有的模块脚本和样式,全部由你掌控!


演示

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

GitHub pages只提供静态内容访问,AJAX和PHP请求无法预览效果,你可以通过线上服务器进行完整预览。

https://uiux.cc/uix-kit

核心目录结构:

uix-kit/
├── README.md   --------------------------- # 主要文档
├── CHANGELOG.md   ------------------------ # 更新日志
├── CONTRIBUTING.md   --------------------- # 引用资源
├── LICENSE     --------------------------- # 许可证
├── webpack.config.js  -------------------- # webpack脚手架配置
├── package.json  ------------------------- # 项目配置文件【网站编译生成的注释信息可以在此修改】
├── package-lock.json
├── dist/
│   ├── css/
│   │   ├── uix-kit.css  ------------------ # 网站核心样式(已编译)
│   │   ├── uix-kit.css.map
│   │   ├── uix-kit.min.css  -------------- # 网站核心样式压缩版,默认产品调用(已编译)
│   │   ├── uix-kit.min.css.map
│   │   ├── uix-kit-rtl.css   ------------- # 网站核心RTL样式(已编译)
│   │   ├── uix-kit-rtl.css.map
│   │   ├── uix-kit-rtl.min.css   --------- # 网站核心RTL样式压缩版,默认产品调用(已编译)
│   │   └── 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/ ----------------------------- # PSD版本网格系统,辅助UI设计
├── src/
│   ├── components/
│   │   ├── ES5/  ------------------------- # 第三方插件(直接合并,不经过ES6的编译)
│   │   ├── ES6/_global ------------------- # 网站通用代码模块
│   │   ├── ES6/_main  -------------------- # 网站定制化文件目录【用于二次开发或者新网站开发。网站新的HTML模板和其它样式脚本可以直接放到此文件夹】
│   │   └── ES6/  ------------------------- # 网站通用功能模块【一般不需要去修改它们,可以根据情况修改其样式和脚本】
├── examples/                                
│   ├── *.html  --------------------------- # 编译后的纯HTML模板,用于后端整合或者演示
│   └── assets/  -------------------------- # 静态资源目录
│   │       ├── css/
│   │       ├── fonts/
│   │       ├── images/
│   │       ├── videos/
│   │       ├── models/
│   │       ├── json/
│   │       └── js/
└──

开发者基本操作:

  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/ 文件夹里的文件,因为代码量非常大,很难去维护和定制各种动画、交互、结构。

命令使用方法:

quick overview 1

quick overview 2

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

Uix Kit 官网

https://gitee.com/xizon/Uix-Kit

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


MuPlayer 是一款跨平台、轻量级的音频播放解决方案,是百度@音乐前端团队开发维护的浏览端音频播放内核,它基于HTML5
OS FLV 是一个 开源和可嵌入网页的flv播放器。 这个播放器拥有大量的选项可以通过嵌入代码进行设置.
DewPlayer音乐播放器,样式很简单,而且很实用.播放器可以根据自己的喜好改变颜色,也算比较个性化吧.但唯一的不足就是只支持MP3格式的音乐。
JW FLV MEDIA PLAYER是一个开源的在网页上使用的Flash视频、音频以及图片播放器,支持 Sliverlight
Speakker 是一个基于 Web 浏览器的音乐播放器,只提供很多高级播放功能包括播放列表管理和分享。
Player Framework 是一个开源的支持 HTML5 的视频播放器框架,同时也支持 Silverlight 和 Windows Phone
Sewise Player是一款专业的免费网页视频、流播放器,它功能强大,体积小,跨平台,使用方便简洁、随心所欲:
SoundManager 2 利用 HTML5 和 Flash 技术提供了稳定和阔平台的音乐播放功能,只有 10K 的 JS 包。
xPlayer v1.0 特性: 文件大小 9.78kb; 可以自定义皮肤; 3.支持 http 和 rtmp 视频; 4.音量调节,全屏播放,拖拽播放;
XPlayer 豆瓣音乐播放器 特点: 1.自动侦测Douban网页的歌曲 2.Douban网页关闭,歌曲能够继续播放
歌词 插件 最新更新,扩展性能稍微有点提升了, 不多说了,更多敬请查看首页http://luochunzong.sinaapp.com/?p=84
ABPlayerHTML5是一个在HTML5下的弹幕播放器(同步显示视频于评论)实现。类似功能的播放器可以参考基于Flash的MukioPlayer和PADPlayer。
AudioPlayer.js 是一个 jQuery 的插件,实现了 HTML5 的音乐播放器,无需任何图片,实现了响应式布局,支持触摸操作。
替换中国大陆主流视频网站的 Flash 播放器为 HTML5 播放器 使用 Mac 的同学都可能碰到过在线看视频引起机子风扇狂转、机身发烫等情况,这是因为 Flash 占用了过多系统资源的缘故。
AetherPlayer 是一个类CD的轻量HTML5播放器,特别适合博客及个人站点使用。它漂亮得不像……咳,这边吹牛的话就不说了。
专注、极致、智慧,国内外为数不多不依赖开源框架、跨平台(windows/android/iOS)、公网推送(支持rtmp)-播放(支持rtmp/rtsp)业界真正靠谱 的超低延迟。
node-kugou-client 是 Node.js 酷狗客户端。 安装 npm install node-kugou-client 使用 var kugou = require(\"node-kugou-client\");
Youku HTML5 播放器扩展 —— 告别 flash 和广告 关于官方内测 html5 播放器 Firefox ( xpi 直接安装) ( firefox 50.0+)
Chimee 由奇舞团研制的 h5 播放器,它支持 mp4、m3u8、flv 等多种格式。通过插件式开发,能满足业务方快速迭代、灰度发布等要求。让开发者能够轻松快捷地完成视频场景的开发。
OneVideo是一款基于OneBase+UniApp开发的小视频播放移动应用。