当前位置:  软件>JavaScript软件

HTML5前端UI框架 ZUI

    来源:    发布时间:2015-02-08

    本文导语:  zui框架是什么? zui是禅道项目管理软件团队在完善自己产品过程中形成的一个开源前端实践方案,帮助你快速构现代跨屏应用。它的特点如下:  > 简单美观,易于使用,快速构建简洁大方的现代web应用。  > 新颖健壮,采...

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

部分截图示例

HTML5前端UI框架 ZUI[图片]

HTML5前端UI框架 ZUI[图片]

HTML5前端UI框架 ZUI[图片]


    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 基于Html5的mockups在线工具简介
  • 让 IE 支持 HTML5 html5shim
  • HTML5介绍及其特性
  • 基于HTML5的幻灯片 html5slides
  • HTML5 sprite 样式创建工具Stitches介绍
  • HTML5 在线工具 html5demos
  • HTML5 <bdo> 标签:覆盖默认的文本方向
  • Web便签 HTML5Sticky
  • HTML5 <blockquote> 标签(定义引用)详细介绍及举例说明
  • HTML5 canvas图形库 RGraph
  • html5/css3文本阴影(text-shadow)详解及示例
  • HTML5的Canvas库 KineticJS
  • HTML5 <b> 标签-定义粗体的文本
  • HTML5文件系统API filer.js
  • HTML5 canvas 标签介绍:定义图形
  • 桌面 HTML5 编辑器 Hyro
  • HTML5 <mark> 标签
  • HTML5 游戏引擎 Isogenic Game Engine
  • HTML5 <audio> 标签-在html中定义声音的标签
  • HTML5开源引擎 lufylegend
  • HTML5 <progress> 标签
  • HTML5Widget


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3