ZUI前段框架简介
一、说明
基于Bootstrap定制
ZUI继承了Bootstrap 3中的大部分基础内容,但出于与Bootstrap不同的目的,一些组件都进行了定制和修改。这些变化包括:
- 移除了部分插件的限制,增加了一些适用特性,例如Popover弹出的内容可以指定已有的标签内容,Modal对话框可以自动使用iframe弹出整个页面内容等;
- 增加了实用的视图组件,包括卡片、评论、列表、文章、仪表盘、看板等;
- 新增了几个Javascript组件,包括拖放、排序、灯箱预览,本地存储,图片裁剪等;
- 集成了一些实用的第三方组件,包括cookie、hotkey、chosen、Kindeditor、ChartJs、DatetimePicker等,并且这些组件样式经过重写,风格更为统一;
- 增加了配色表和新的主题模板,最少只需更改一个配置项更换颜色主题;
- 修改了默认字体配置,包含所使用的字体集和字体大小;
- 替换了默认的字体图标,在FontAwesome图标集的基础上去掉了一些图标同时增加了一些新的图标,写法上比FontAwesome更简单;
- 大部分组件的默认样式都不需要额外的指定包含'default'的Class,例如class='btn btn-default','panel-default'在ZUI中不需要;
- 增加了一些辅助类,例如文本背景及高亮等;
- 增加了一些可选样式,例如滚动条等;
- ……
选择ZUI还是Bootstrap?
Bootstrap是非常优秀的前端框架,但在构建大型应用的开发时通常远远不够。如果Bootstrap能够完全满足你的项目,建议使用Bootstrap,如果你需要的更多,则建议使用ZUI。使用ZUI的显著理由如下:
- 大部分书写方式继承Bootstrap,从Bootstrap方便迁移到ZUI,学习成本低,而且写法上更精简;
- ZUI提供更多的功能选项,即使是第三方组件也提供统一的样式和主题支持;
- ZUI采用核心+独立组件按需加载机制,即使包含的内容更丰富,也会控制核心内容打包后体积大小,一般css不超过150k(目前140k,精简版100k),js不超过100k(目前84k,精简版40k),精简版包含绝大部分功能,但体积更小。非核心的独立组件内容按需加载,推荐自定义编译;
- ZUI从实际项目中诞生(包括禅道、蝉知和然之),实践证明其有效性,一切为了快速构建你的应用;
- 一些令人激动的新内容正在开发中...
二、全局样式表
ZUI使用 normalize 来重置样式,这样尽可能保证在所有浏览器中有一致的体验。
为何使用 Normalize.css
如果一份没有任何样式设置的html文档在浏览器打开时,浏览器会使用默认的样式来呈现文档,确保更易于阅读文本和区分文档中不同的内容。
但是当我们需要应用自己的样式时,浏览器默认的样式会造成干扰,更重要的是不同的浏览器的默认样式并不相同,这使得我们希望的样式最终呈现效果变得不可控。Normalize.css
正是为了解决此问题而生,而且做的更好。
相关资源
三、约定
UI元素类型及定义
ZUI中包含各种各样的界面元素(或控件),例如按钮、列表、表格等,甚至一些特定场景用到的一组元素也会在ZUI中精心设计,例如评论列表。为了更好的展示我们的设计理念,把这些元素归为如下四类:
- 基本控件:用来构建网页应用的基本界面单元,例如按钮、文本标签、输入框等。
- 组件:通过一个以上的基本控件组合而成的较复杂的界面单元。例如表单、菜单、表格等。
- Javascript 组件:这些组件要正常使用会使用到Javascript。某些Javascript组件需要手动调用来启用。
- 视图:视图是将基本控件和组件组合使用来展现网站上的通用内容,例如评论视图及文章预览列表视图。
ZUI中的大多数界面元素都有不同的子类型、状态及参数。关于类型、状态及参数的定义如下:
- 类型:同一种界面单元的不同类型,例如按钮有主要按钮、次要按钮及危险按钮等,导航菜单类型有普通导航及顶部固定导航等。任何时候都应该只为同一个界面元素指定一种类型,默认类型无需指定。
- 状态:状态为同一种界面单元允许在不同的状态中切换,例如按钮有正常状态和不可用状态,下拉菜单有展开及收拢状态,菜单项目有选中和未选中状态等。在同一个界面元素中允许叠加多个状态。
- 参数:参数作为界面单元如何展现提供依据,例如表格是否隔行变色,是否启用鼠标悬停等。可以同时指定多个参数。
通用状态和参数
很多状态和参数在不同的控件或组件中具有一致的用法和相同的含义。在ZUI中,这些通用的状态和参数具有固定的名字(CSS 类名)。
常用通用状态如下:
名称 | 说明 | 常见使用对象 |
---|---|---|
.active |
指示控件或者其子项目已经被激活。 | 导航条目、下拉菜单条目、菜单列表、按钮组中可以激活的按钮等。 |
.hover |
指示控件正处于鼠标悬停状态,在CSS中相对于:hover 选择器。 |
少部分需要Javascript处理的控件。 |
.focus |
指示控件正处于鼠标悬停状态,在CSS中相对于:focus 选择器。 |
少部分需要Javascript处理的控件。 |
.disabled |
指示控件处于不可用状态,通常与DOM属性disabled="disabled" 一起使用。 |
按钮、可以点击菜单项目、超链接、表单元素等。 |
.in |
用于控制控件显示或消失的动画过程。在控件显示时指示控件已准备完成CSS动画并完全显示;在控件消失时如果移除该状态指示控件已准备执行控件消失动画;与状态.collapse 一起使用时表示处于完全展开状态。 |
标签页、下拉菜单等 |
.open |
指示隐藏的内容已经完全展示。 | 下拉菜单等。 |
.collapse |
指示当前组件可以被折叠或展开。与状态.in 一起出现时表示组件已被展开,没有此状态则反之。 |
响应式导航、折叠菜单等。 |
.collapsing |
指示当前组件正处于折叠或展开的动画过程中。 | 响应式导航、折叠菜单等。 |
常见的通用参数如下:
名称 | 说明 | 常见使用对象 |
---|---|---|
.bordered |
使得组件具备边框样式。 | 表格等。 |
.borderless |
移除控件的边框样式。 | 表格等。 |
.inverse |
指示组件使用与默认颜色样式相对的样式。 | 导航等。 |
.fixed |
指示当前组件位置被固定,不受页面交互影响。 | |
.with-icon |
指示当前组件在显示内容时能够额外显示一个图标。 | 消息框等。 |
.with-padding |
指示当前组件内容显示区域包含更多的边距。 |
界面元素的命名
命名原则
- 所有控件、组件、视图、模块和行为的命名都应该使用最常见的名称,准确体现界面元素功能。例如菜单应该命名为menu,而不是navigation。
- 类型、状态及参数的命名均为元素名加上类型(或状态及参数名)前缀,中间用间隔号分隔,例如固定位置的菜单为
.menu-fixed
。对于通用状态或参数可以省略前缀,例如一个菜单项目处于激活状态,则只需命名为.active
,而不许命名为.menu-active
。 - 所有控件、组件、视图、模块和行为的命名均不加与当前元素功能无关的前缀和额外命名,例如一个导航菜单命名为
.nav
,而不增加额外命名为.ui.nav
或者.zui.nav
。
ZUI前段框架简介的更多相关文章
- Spring 系列: Spring 框架简介 -7个部分
Spring 系列: Spring 框架简介 Spring AOP 和 IOC 容器入门 在这由三部分组成的介绍 Spring 框架的系列文章的第一期中,将开始学习如何用 Spring 技术构建轻量级 ...
- 《HiWind企业快速开发框架实战》(0)目录及框架简介
<HiWind企业快速开发框架实战>(0)目录及框架简介 本系列主要介绍一款企业管理系统快速开发框架,该框架旨在快速完成企业管理系统,并实现易维护可移植的目标. 使用逐个系统模块进行编码的 ...
- Yaf零基础学习总结1-Yaf框架简介
从今天开始,给大家讲解下yaf框架,讲解之前肯定要了解下yaf是个什么东西,当然,从标题我们已经知道yaf是个PHP框架了,也许大家对于PHP框架并不陌生,一般PHP程序员用过的框架至少有一两个吧,国 ...
- hdwiki 框架简介
虽然HDwiki是一个开源的wiki系统,并且代码简洁易懂,但如果想在系统上做做进一步开发还需要对框架有一个整体的认识.熟悉了HDwiki的框架以后完全可以独立出来做其他功能的开发,当做一个开源的PH ...
- Apache—DBUtils框架简介
转载自:http://blog.csdn.net/fengdongkun/article/details/8236216 Apache—DBUtils框架简介.DbUtils类.QueryRunner ...
- Jersey框架一:Jersey RESTful WebService框架简介
Jersey系列文章: Jersey框架一:Jersey RESTful WebService框架简介 Jersey框架二:Jersey对JSON的支持 Jersey框架三:Jersey对HTTPS的 ...
- Web自动化框架LazyUI使用手册(1)--框架简介
作者:cryanimal QQ:164166060 web端自动化简介 web端自动化,即通过自动化的方式,对Web页面施行一系列的仿鼠标键盘操作,以达到对Web页面的功能进行自动化测试的目的. 其一 ...
- python运维开发(二十二)---JSONP、瀑布流、组合搜索、多级评论、tornado框架简介
内容目录: JSONP应用 瀑布流布局 组合搜索 多级评论 tornado框架简介 JSONP应用 由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. ...
- Spring 系列: Spring 框架简介(转载)
Spring 系列: Spring 框架简介 http://www.ibm.com/developerworks/cn/java/wa-spring1/ Spring AOP 和 IOC 容器入门 在 ...
随机推荐
- git config --global core.autocrlf false
git config --global core.autocrlf false warning: LF will be replaced by CRLF in .idea/vcs.xml.The f ...
- time模块
In [1]: import time In [2]: import datetime In [3]: date_time = datetime.datetime.now() In [4]: prin ...
- docker和shipyard使用问题
http://blog.csdn.net/cuisongliu/article/details/49178461 Docker启动如果随服务一起启动? docker run -ti -d --rest ...
- linux 下 ls 文件夹和文件没有颜色的解决办法
.bashrc 中加入 alias ls="ls --color"
- js变量在属性里的写法 常用mark 多个DL遍历添加一个父级DIV
标记用 js变量比如url链接一般都是a里面的href属性值 在js里单引号链接 以后再忘记就能有地方找了 例子: /* 添加1200 居中div 包裹 获取元素集合 上层元素100% * @ele ...
- Xunsearch 中文全文搜索
原文地址:http://www.yiichina.com/code/661 官网地址:http://www.xunsearch.com/ 1.安装 wget http://www.xunsearch. ...
- yii2 Pjax的使用
有两个例子:刷新时间和数据显示排序 1.刷新时间 (1)控制器中的方法:Time public function actionTime() { return $this->render('tim ...
- 如何更好地利用Pmd、Findbugs和CheckStyle分析结果
这里列出了很多Java静态分析工具,每一种工具关注一个特定的能发挥自己特长的领域,我们可以列举一下: Pmd 它是一个基于静态规则集的Java源码分析器,它可以识别出潜在的如下问题:– 可能的bug— ...
- H5 使用
关闭页面 http://www.bcty365.com/content-146-3343-1.html 回退页面: plus.key.addEventListener('backbutton', fu ...
- for 循环中 i++和 ++i
在标准C语言中, i++和 ++i的区别显而易见. 但是,当在for循环中使用 i++和 ++i的时候,会发现.只要这两种语句不用来赋值操作(作为右值,赋值给左值),那么这两种写法其实是一样的. fo ...