CSS组件

HooperUI为您提供了从底层到应用层的特色组件,点击左侧目录详细了解

概览

Html5文档类型

HooperUI 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。 在你项目中的每个页面都要参照下面的格式进行设置。

                    < !DOCTYPE html>
                    < html lang="zh-CN">
                      ...
                    < /html>
                

移动设备优先

您可以把HooperUI应用到您的PC端网页中,但是HooperUI从开始设计就是移动设备优先的, 我们不推荐您将其应用到PC站点中,因为我们并没有针对PC做任何优化。

同时,为了确保适当的绘制和触屏缩放,需要在 之中添加 viewport 元数据标签。

                    
                

在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用缩放功能后,用户只能滚动屏幕, 就能让你的网站看上去更像原生应用的感觉。 注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!

                    
                

国内市场的浏览器分布复杂,我们统一指定拥有webkit内核的浏览器使用其webkit内核

                    
                

若您的网页会被百度、搜狗等搜索引擎搜索到,且您并不希望被百度引擎自动转码,请添加如下代码 到您的页面,可以提醒引擎不进行云转码。

                    
                

Normalize

为了增强跨浏览器表现的一致性,我们使用了 Normalize.css,这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。 (请参见:Normalize.css) 当然,我们针对国内的前端特性,对该CSS进行了部分修改。

中文优化的移动端排版

我们为中文排版定制了专有样式 .hoo-type,使您不必纠结于排版细节,该样式可快速应用到博客、文章 等大面积中文排版的地方。

我们做了如下优化:
1、设置默认字号
2、根据浏览环境设置默认字体
3、针对特定标签优化排版
4、优化系统文字渲染方案

注意:.hoo-type不应该大范围使用,以尽量局限在含有大段文字、需要文字排版的容器上为佳,例如:

                    
                    

...

...

...

...

...

HooperUI约定

HooperUI拒绝把书写网页变成数学计算,所以,HooperUI的所有元素box-sizing均被重置为 border-box

HooperUI推荐使用rem单位,HooperUI将网页html字号大小设置为:62.5%(10px), 方便计算(还是那句话,我们不想把书写网页变成数学计算)

HooperUI使用了阿里cube的字体设置,如果对字体不是很了解,建议不要修改

                        font-family: 'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;
                    

HooperUI加强了网页文字显示,开启了文字反锯齿

类似于bootstrap、yui等框架,HooperUI的所有命名都加有:hoo, 看上去似乎很cool,这是为了避免与其它框架和用户代码冲突,是一个折中方案。

栅格系统

Flex栅格

flex弹性盒模型真是太好用了,所以我们专门把它们封装成为了一个栅格系统。 HooperUI的Flex栅格尊崇并保留了flex的所有特性,若您对flex盒模型不太了解, 您可以参照这里: Flex盒模型介绍
下面将介绍HooperUI的flex栅格系统

Flex栅格的基本使用

在需要使用盒子模型的元素上使用 .hoo-f.hoo-f-inline
(注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。)

在其子元素上使用 .hoo-f-[1-8]即可布局相关比例。
HooperUI支持1~8的比例分割,更多比例您可以嵌套使用。
下面是一个基础的HooperUI Flex栅格实例:

                    
.hoo-f-1
.hoo-f-2
.hoo-f-1
.hoo-f-2

当然,你可以把子模块嵌套使用,若需在子元素内继续栅格, 则只需继续为子元素添加 .hoo-f,为子元素的子元素添加栅格即可

                    
.hoo-f-1
.hoo-f-1
.hoo-f-1
.hoo-f-1
.hoo-f-1
.hoo-f-1
.hoo-f-1
.hoo-f-1

Flex栅格辅助类

为了方便您更快速的开发,我们还设计了一系列Flex栅格辅助类,下面将介绍 这些辅助类的功能和用法。

flex栅格方向.hoo-f-[direction]direction可以根据需求设置不同值。 (注意:该样式应与.hoo-f同级使用,即需要应用到父级元素上)
.hoo-f-row横向栅格
.hoo-f-row-reverse横向逆序栅格
.hoo-f-column竖向栅格
.hoo-f-column-reverse竖向逆序栅格
下面是一个应用实例,您可以体会到这几个属性的意义和用法。

                    
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3

当然,为了适应更多变的布局,我们还为子元素提供了一系列的布局辅助类,下面就一一介绍一下。

子元素特殊折行方式.hoo-f-[wrap]wrap可以根据需求设置不同值。 (注意:该样式应与.hoo-f同级使用,即需要应用到父级元素上)
.hoo-f-wrap自动换行
.hoo-f-wrap-reverse横向逆序栅格
下面是一个应用实例(请注意:这个实例中,没有为子元素设置分割比例,只使用.hoo-f突出样式, 你也可以把.hoo-f样式去掉来观察到一致的效果),您可以体会到这几个属性的意义和用法。

                    
the first box
the second box
the third box
the first box
the second box
the third box
the first box
the second box
the third box
the first box
the second box
the third box
the first box
the second box
the third box
the first box
the second box
the third box

子元素水平对其方式.hoo-f-justify-[justify]justify可以根据需求设置不同值。 (注意:该样式应与.hoo-f同级使用,即需要应用到父级元素上)
.hoo-f-justify-start主轴从头至尾排列
.hoo-f-justify-end主轴逆向排列
.hoo-f-justify-center主轴居中排列
.hoo-f-justify-between主轴两端对齐排列
.hoo-f-justify-around主轴分散对齐排列
下面是一个应用实例(请注意:这个实例中,我们使用了.hoo-w100.hoo-w50 样式来为子元素定义固定宽度),您可以体会到这几个属性的意义和用法。

                    
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3

子元素垂直对齐方式.hoo-f-align-[align]align可以根据需求设置不同值。 (注意:该样式应与.hoo-f同级使用,即需要应用到父级元素上)
.hoo-f-align-start纵轴头部对齐
.hoo-f-align-end纵轴尾部对齐
.hoo-f-align-center纵轴居中对齐
.hoo-f-align-stretch纵轴拉伸
.hoo-f-align-baseline文字基线对齐
下面是一个应用实例(请注意:这个实例中,我们使用了.hoo-h100.hoo-h50 样式来为子元素定义固定高度),您可以体会到这几个属性的意义和用法。

                    
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3
1
2
3

子元素垂直对齐方式(子元素).hoo-f-align-item-[align]align可以根据需求设置不同值。 (注意:该样式应应用于子元素上,类似于vertical-align,用于设置或覆写父元素的 .hoo-f-align-[align]
.hoo-f-align-start纵轴头部对齐
.hoo-f-align-end纵轴尾部对齐
.hoo-f-align-center纵轴居中对齐
.hoo-f-align-stretch纵轴拉伸
.hoo-f-align-baseline文字基线对齐
请参照:子元素垂直对齐方式来了解相关特性。

Grid栅格

考虑到传统栅格用户和不太习惯使用Flex栅格的用户,HooperUI还参照Bootstrap和Pure, 提供了一套完整的Grid栅格系统。您可以参照下方给出的相关说明和案例来使用本系统。

Grid栅格的基本使用

HooperUI 使用了12列Grid栅格系统。同Flex栅格,在使用时需在父元素添加 .hoo-g样式,在子元素添加 .hoo-u-[1-12] 样式。
(请注意:在子元素上添加的是.hoo-u-*,在父元素添加的是.hoo-g-*)
下面展示了一个基础的Grid栅格案例。

                    
.hoo-g-4
.hoo-g-8
.hoo-u-4
.hoo-u-8

不足12列的网格

HooperUI的Grid栅格系统会在您的网格不足12列时,自动将最后一个网格右对齐。
使用 .hoo-u-end样式可以使您的最后一个网格不进行右对齐。 下面展示了一个不足12列的的Grid栅格案例。

                    
.hoo-u-3
.hoo-u-3
.hoo-u-4
.hoo-u-3
.hoo-u-3
.hoo-u-4
.hoo-u-3
.hoo-u-3
.hoo-u-4
.hoo-u-3
.hoo-u-3
.hoo-u-4

全宽网格

使用 .hoo-u-12样式可以创建一个12格的网格,但这明显有些层级过多了。 我们为您提供了一个新的全宽网格样式:.hoo-container,下面展示两种不同写法的简单案例:

                    
.hoo-u-12
.hoo-container
.hoo-u-12
.hoo-container

带有偏移量的网格

使用 .hoo-u-offset-[0-11]样式可以为某个网格进行偏移,偏移量即为N个网格。 (请注意:这个样式需要添加至子元素上)下面展示如何使用该样式为网格添加偏移:

                    
.hoo-u-offset-2
.hoo-u-offset-4
.hoo-u-1
.hoo-u-offset-6
.hoo-u-offset-2
.hoo-u-offset-4
.hoo-u-1
.hoo-u-offset-6

使单网格居中

使用 .hoo-u-centered样式可以将某个网格居中。
(请注意:这个样式需要添加至子元素上,若添加至未满12格的网格后面时,会造成最后一个网格 不是右对齐。为了避免这种结果,您需要单独为居中网格设置一个父容器 .hoo-g,或者 您可以为未满12格的网格添加偏移量,使其满12格即可。)
我们还提供了.hoo-u-uncentered样式,用于重置被居中的网格,使其恢复该有的布局特性。 (这一样式通常在响应式栅格系统中使用,参见: 响应式栅格系统
下面展示如何使用该样式使单个网格居中:

                    
.hoo-u-3
.hoo-u-5
.hoo-u-2
.hoo-u-7
.hoo-u-3
.hoo-u-5
.hoo-u-2
.hoo-u-7
.hoo-u-6
.hoo-u-4
.hoo-u-3
.hoo-u-5
.hoo-u-2
.hoo-u-7
.hoo-u-3
.hoo-u-5
.hoo-u-2
.hoo-u-7
.hoo-u-6
.hoo-u-4

移除所有网格的内边距

使用 .hoo-g-collapse样式可以移除当前网格和其下属网格的所有内边距。 (请注意:这个样式需要添加至父元素上)下面展示如何使用该样式消除网格内边距:

                    
.hoo-u-offset-2
.hoo-u-offset-4
.hoo-u-offset-2
.hoo-u-offset-4

限定宽度的网格

使用 .hoo-g-fixed样式可以限定父元素的max-width为1000px。该样式通常与 响应式布局混用。 (请注意:这个样式需要添加至父元素上)

响应式栅格系统

为什么会提供响应式栅格系统?

随着移动互联网的推进,移动设备已经不仅限于手机了,越来越多的人喜欢从pad访问, 而且pad和手机的屏幕大小、分辨率各有不一,网页折算比、视口大小也不尽相同(参见 深入了解viewport和px移动端响应式布局的进化史), 我们写好的页面可能在某些手机上并没有问题,但是在pad或其他移动设备上完全不是 我们预想的样子。

发生上述问题很大一部分原因是您没有为大屏设备(或不同视口大小)做适配。
我们因此引入了针对移动端的响应式栅格系统。此系统与Rem布局、viewport布局共同组成了 HooperUI的超大屏适应解决方案。

HooperUI的响应式栅格系统

HooperUI把移动设备屏幕进行了统一划分,大体划分为大、中、小三种屏幕。 分别以 lgmdsm来标识。
在Flex栅格和Grid栅格中,您可以在任意样式中添加设备代码来针对特定设备进行布局。
语法是:.hoo-[size]-f-*.hoo-[size]-g-*.hoo-[size]-u-*
例如:.hoo-sm-f-3.hoo-md-g-fixed.hoo-lg-u-centered

HooperUI的响应式断点划分如下:

标识区间说明举例
-(不设置) 所有分辨率 若不设置响应式标识,则所有屏幕大小都会显示这个样式 .hoo-f-4
sm 0~480px 常用手机手机竖屏显示状态(约能覆盖98%的常用手机) .hoo-sm-g
md 481~1024px 手机横屏或竖屏pad显示状态 .hoo-md-u-centered
lg 1024px以上 pad横屏和更大屏幕的移动设备(如ipad pro等) .hoo-lg-u-7

除了响应式栅格系统,我们还为大家提供了响应式显隐handler。参见: 响应式显隐类

下面是一个基础的响应式栅格系统使用案例:

                    
part1
part2
part1
part2

上述代码意思是,通常情况下,part1和part2的比例是1:2,当处于小屏时,父元素 加上了垂直布局的样式,子元素比例为1:1。

栅格系统的综合运用

Flex栅格系统和Grid栅格系统是可以混合使用的,配合响应式栅格系统既可以做出异常强大的 页面逻辑和排版设计。
(请注意:Flex栅格和Grid栅格可以上下级混用,但不可同级混用)
下面展示两种栅格系统的混用案例:

                    
.hoo-f-1
.hoo-f-1
.hoo-u-4
.hoo-u-8
.hoo-f-1
.hoo-f-1
.hoo-u-4
.hoo-u-8

WEB组件

组件

没错,我们覆写了所有的WEB组件,这一组件被我们划分成为系统组件,不可定制和修改。
你可以在 hooperui.min.js加载完毕后,执行 $.render();,该方法 将会根据参数配置对页面进行一系列的预处理。其中就包括组件重定义。
关于$.render();的更多介绍,请参见 $.render();

下面介绍的组件都是基于下面的代码执行后所得(下图代码展示了一部分配置信息):

                    var config = {
                        themeColor:{
                            mainColor:'#16A085',//主色
                            subColor:'#1ABC9C'//辅色
                        },
                        screenFix:{
                            fixType:'grid',//超大屏兼容模式。支持[none | rem | viewport | grid]
                        }
                    };
                    $.render(config);
                

上述代码的详细解释,可以到 JS组件的系统配置 了解。我们 在此只需注意他的主色和辅色参数。

常见问题

$.render()的重绘效率
$.render();重新修改了大部分组件、页面元素的样式,使得整个页面由此发生回流和重绘。
我们考虑过在虚拟Dom中进行操作,之后整页替换。但是zepto.js似乎并不能把绑定在页面元素上的事件 深度克隆。(参见:zepto clone
因此,我们在遇到大批量页面组件渲染时,会将页面全部元素隐藏,在操作完毕所有样式变更后,恢复显示。 这么做的意义在于,我们不管修改了多少组件的相关样式,只会发生两次次重绘(隐藏和显示)。 更多页面优化建议,参考:前端网页性能问题与优化详解

辅助类

样式类

全局主题色
当您在$.render();中设置了全局主题色后,会自动在页面添加一个style 标签,并写入如下代码:

                    
                

您可以直接在您的项目中使用上面3个样式。
.tBorder将改变您的元素border为主题色。
.tColor将改变您的元素文字颜色为主题色。
.tBg将改变您的元素背景为主题色。

响应式显隐类
我们为您提供了几个响应式显隐样式用于控制某些标签在不同分辨率屏幕的显隐表现。
具体语法为:.hoo-[size&direct]-[show | hide],通过下方的表格,您可以直观的 了解到本操作类的使用方法。

标识区间说明举例
-[size] -[lg | md | sm] [大 | 中 | 小]基础屏幕分界 .hoo-md-show中屏时显示(其他大小时也会显示)、.hoo-lg-hide大屏隐藏(其他大小时会显示)
-[size]-[direct] -[size]-[up | dowm] [以上 | 以下]屏幕分界(配合基础屏幕大中小) .hoo-sm-up-show小屏及以上显示(包含小屏)、.hoo-md-down-hide中屏及以下屏幕隐藏
-[size]-only -[lg | md | sm]-only 只有在[大 | 中 | 小]屏幕时显示或隐藏 .hoo-sm-only-show只在小屏显示、.hoo-lg-only-hide只在大屏隐藏

ClearFix
.cf样式可以以简单的方式清除内部浮动。

激活BFC
.bfc样式以 overflow:hidden的形式激活元素的bfc。

宽高辅助
HooperUI在render时,会自动将所有.hoo-witdh-*.hoo-height-* 样式编译为行内width和height样式。例如:

内边距辅助
HooperUI在render时,会自动将所有 .hoo-paddingl-*.hoo-paddingr-*.hoo-paddingt-*.hoo-paddingb-*.hoo-padding-(*) 样式编译为行内padding样式。例如:

工具类