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 正是以解决是题材而生,而且做的又好。

有关资源

  • Normalize.css 项目地址
  • Normalize.css Github
    项目地址

三、约定

 

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

相关文章