HTML5前端UI框架 ZUI

本文详细介绍了ZUI框架的特点、开发背景、与Bootstrap的对比以及使用优势。ZUI框架旨在提供简单美观、新颖健壮、轻快独立稳定的前端实践方案,特别适合中文环境。与Bootstrap相比,ZUI在基础内容上继承并定制,增加了实用功能、视图组件、Javascript组件、第三方组件集成、配色表和主题模板等,旨在为开发者提供更高效、易用的前端开发体验。
zui框架是什么?

zui是禅道项目管理软件团队在完善自己产品过程中形成的一个开源前端实践方案,帮助你快速构现代跨屏应用。它的特点如下:
 > 简单美观,易于使用,快速构建简洁大方的现代web应用。
 > 新颖健壮,采用HTML5且支持所有流行的移动及桌面浏览器平台,一些旧的浏览器也能够降级支持。
 > 轻快独立稳定,最佳的可用性能,最大限度的不依赖于外部组件。
 > 全平台响应,一次编写,响应任何尺寸的设备。
 > 比较适合中文环境

我们为什么来做zui框架?

zui框架并不是我们完全从头到尾自己写出来的。我们也是在使用bootstrap, yui这些框架中结合我们自己产品的应用场景,逐渐积累形成的。现在最成熟的当推bootstrap了。但是bootstrap的版本跨度比较大,也有很 多功能是我们不需要的,再加上它还是比较适合英文场景的布局。所以我们才决定自己来写zui框架。在写这个框架过程中,我们结合了很多具体的应用场景,比 如大量数据展示、比如手机端响应式布局等,做了很多非常有针对性的改进。最终形成了zui框架。

与Bootstrap的关系

ZUI继承了Bootstrap 3中的大部分基础内容,但出于与Bootstrap不同的目的大部分内容都进行了定制和修改。这些变化包括:

  • 移除了部分插件的限制,增加了一些适用特性,例如Popover弹出的内容可以指定已有的标签内容,Modal对话框可以自动使用iframe弹出整个页面内容等;

  • 增加了实用的视图组件,包括卡片、评论、列表、文章、仪表盘、看板等;

  • 新增了几个Javascript组件,包括拖放、排序、灯箱预览,本地存储,图片裁剪等;

  • 集成了一些实用的第三方组件,包括cookie、hotkey、chosen、Kindeditor、ChartJs、DatetimePicker等,并且这些组件样式经过重写,风格更为统一;

  • 增加了配色表和新的主题模板,最少只需更改一个配置项更换颜色主题;

  • 修改了默认字体配置,包含所使用的字体集和字体大小;

  • 替换了默认的字体图标,在FontAwesome图标集的基础上去掉了一些图标同时增加了一些新的图标,写法上比FontAwesome更简单;

  • 大部分组件的默认样式都不需要额外的指定包含'default'的Class,例如class='btn btn-default','btn-default'在ZUI中不需要;

  • 增加了一些辅助类,例如文本背景及高亮等;

  • 增加了一些可选样式,例如滚动条等。

选择使用ZUI

Bootstrap是非常优秀的前端框架,但在构建大型应用的开发时通常远远不够。如果Bootstrap能够完全满足你的项目,建议使用Bootstrap,如果你需要的更多,则建议使用ZUI。使用ZUI的显著理由如下:

  • 大部分书写方式继承Bootstrap,从Bootstrap方便迁移到ZUI,学习成本低,而且写法上更精简;

  • 需要的实用功能都能在ZUI中提供,即使是第三方组件也提供统一的样式和主题支持;

  • 即使ZUI包含的内容更丰富,也会控制核心内容打包后体积大小,一般css不超过150k(目前130k,精简版95k),js不超过100k(目前79k,精简版33k),精简版包含绝大部分功能,但体积更小。非核心内容按需加载,推荐自定义编译;

  • ZUI从实际项目中诞生(包括禅道、蝉知和然之),实践证明其有效性,一切为了快速构建你的应用;

  • 一些令人激动的新内容正在开发中...

感谢巨人的肩膀

zui的形成是建立在这些巨人的肩膀上的,在此向这些项目和背后的团队表示感谢!
Grunt
Less
normalize
jQuery
Bootstrap
kindeditor
Chosen
Datetime picker
FontAwesome
google code prettify
jQuery hotkey
Bootbox
Explorer canvas
Chart.js

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值