qinco

Human.css / 为设计师而设计的开源CSS框架 / 版本:0.14 / 更新时间:2016年6月10日

在青谷过去几年的开发过程中,我们使用过各种css框架。从知名的 BootstrapFundationPureSemantic UI, 到小众的UIkitSkeletonKube,等 。每一款框架都有自己的优劣或者说偏重点。在实践的过程中,我们发现这些框架都存在一个共同的缺陷:不适合web设计师使用。也许是因为编写这些框架的人都是资深程序员的关系,习惯了站在标准程序员的角度去设计产品,而尚未把设计师的需求考虑在内。

不过我们认为,web设计师和前端程序员完全分离的传统工作模式,并不会持续太久。在不久的将来,一个合格的web设计师,都应该会熟练的编写前端代码,把自己的设计转化为可用的html+css等前端代码。换言之,未来的前端工程师和web设计师这两个角色会逐渐融合为一体。

为了让青谷的web设计师也能轻松写出强健的响应式前端代码,我们站在众多现有css框架的肩膀上,重新编写了一种新的框架,并称之为:Human.css。编写框架是一个非常劳心的工作,既然写出来了,自己独享实在太奢侈,所以在此免费共享给所有人使用.

查看源代码:

http://lib.qinco.me/dist/humancss/0.14/css.css

使用方式:在</head>之前加载Human.css即可:

<link media="all" type="text/css" rel="stylesheet" href="http://lib.qinco.me/dist/humancss/0.14/css.min.css">

授权方式:The MIT License (MIT)

意见/反馈:hello@qinco.net

这个框架具有以下特点:

  • 1)轻量级:GZIP之后只有14KB。自行定制可删除多余的属性,还可进一步降低文件体积
  • 2)Mobile First(小屏幕优先),顺应移动端的增长需求,默认属性均适用于小屏幕
  • 3)使用em作为度量单位(而非px),以获得更灵活的相对尺寸控制能力
  • 4)彻底的响应式:在6种不同的屏幕尺寸下,可以实现对每一个元素的位置、大小、边距等属性的随意控制,而无需手写media query
  • 5)兼容性:从IE8+,到Chrome、Firefox、Safari等主流浏览器均可兼容
  • 6)简洁优雅,容易使用:比如你现在看到的这个网页,就是使用Human.css构建的
  • 7)可定制:与大部分框架不同,我们使用PHP+Laravel来调整各种配置并动态生成css文件,在灵活性和可定制性上甩开LESS或SASS几条街。在线定制的界面会在未来放出。

组件说明:

组件1:Normalize.css

我们采用了流行的 Normalize.css来重置因浏览器预置而产生的兼容性问题

组件2:排版布局/Grid

基本的容器使用.box来定义,比如:

<div class='box'>

基本容器

</div>

基本容器

如果需要设置最大宽度且居中显示,则使用.container来定义,比如:

<div class='box'>

<div class='container' style='max-width:20em'>最大宽度20em且居中显示</div>

</div>

最大宽度20em且居中显示

所有容器均预设了 box-sizing:border-box; 属性,这个属性的好处是,无论内部的paddingmargin怎么设置,图层的外框宽度是不会变的,这样可以让图层的排列更加整齐。比如某个div的初始宽度设置为100px,如果你又加上了padding:20px,那么这个div的实际显示宽度就会变成100+20+20=140px;如果设置了box-sizing:border-box; 属性,那么实际显示宽度依然会保持100px;

如果需要设置浮动图层,则使用 .float-left或者.float-right,比如:

<div class='box'>

<div class='container' style='max-width:20em'>

<div class='box'>

<div class='float-left'>左侧浮动</div>

<div class='float-right'>右侧浮动</div>

</div>

</div>

</div>

左侧浮动
右侧浮动

组件3:响应式布局

Human.css可以定制任意数目的column,默认为12列。使用范例如下:

<div class='box'>

<div class='col col-3'>任何屏宽下都保持3/12宽度</div>

<div class='col col-4'>任何屏宽下都保持4/12宽度</div>

<div class='col col-5'>任何屏宽下都保持5/12宽度</div>

</div>

col col-3
col col-4
col col-5

Human.css可以自定义任何尺寸的Breakpoint(屏幕尺寸分界点),默认划分了6种尺寸:

  • 0)默认屏幕:0~30em之间(适用于大部分手机屏幕)
  • 1)-xs-(超小屏幕):30em~42em之间,适用于横向浏览的手机屏幕
  • 2)-sm-(小屏幕):42em~56em之间,适用于平板电脑的屏幕
  • 3)-md-(中等屏幕):56em~72em之间,适用于小屏幕电脑
  • 4)-lg-(大屏幕):72em~88em之间,适用于常见的电脑屏幕
  • 5)-xlg-(超大屏幕):88em以上,适用于宽屏的电脑屏幕

结合上述的6种屏幕尺寸,可以实现响应式的布局,范例如下:

<div class='box'>

<div class='col-sm col-sm-4'>默认宽度100%;屏宽超过sm后变为4/12宽度</div>

<div class='col-sm col-sm-4'>默认宽度100%;屏宽超过sm后变为4/12宽度</div>

<div class='col-sm col-sm-4'>默认宽度100%;屏宽超过sm后变为4/12宽度</div>

</div>

<div class='box'>

<div class='col-md col-md-3'>默认宽度100%;屏宽超过md后变为3/12宽度</div>

<div class='col-md col-md-4'>默认宽度100%;屏宽超过md后变为4/12宽度</div>

<div class='col-md col-md-5'>默认宽度100%;屏宽超过md后变为5/12宽度</div>

</div>

<div class='box'>

<div class='col-lg col-lg-6'>默认宽度100%;屏宽超过lg后变为6/12宽度</div>

<div class='col-lg col-lg-6'>默认宽度100%;屏宽超过lg后变为6/12宽度</div>

</div>

请调整屏幕尺寸,查看显示效果的变化:

col-sm col-sm-4
屏宽超过sm后变为4/12宽度
col-sm col-sm-4
屏宽超过sm后变为4/12宽度
col-sm col-sm-4
屏宽超过sm后变为4/12宽度
col-md col-md-3
屏宽超过md后变为3/12宽度
col-md col-md-4
屏宽超过md后变为4/12宽度
col-md col-md-5
屏宽超过md后变为5/12宽度
col-lg col-lg-6
屏宽超过lg后变为6/12宽度
col-lg col-lg-6
屏宽超过lg后变为6/12宽度

通过加入-relative以及-pull-(或-push-)属性可以对位置做移位:

<div class='box'>

<div class='col-sm col-sm-5 sm-relative col-sm-push-7'>默认宽度100%;屏宽超过sm后变为5/12宽度且向右移位7/12</div>

<div class='col-sm col-sm-7 sm-relative col-sm-pull-5'>默认宽度100%;屏宽超过sm后变为7/12宽度且向左移位5/12</div>

</div>

col-sm sm-relative col-sm-5 col-sm-push-7
屏宽超过sm后变为5/12宽度且向右移位7/12
col-sm sm-relative col-sm-7 col-sm-pull-5
屏宽超过sm后变为7/12宽度且向左移位5/12

组件4:文字

Human.css的尺寸均以em作为单位,这个尺寸的优点是:子元素的尺寸是以父元素作为参考值的,请查看以下的示例代码:

<p>这是标准大小的段落(浏览器默认的文字大小,一般为16像素)<br />

<span style='font-size:0.85em'>这一行文字只有父元素<p>的0.85倍大</span>

<span style='font-size:1.1em'>

这一行文字是父元素<p>的1.1倍大<br />

<span style='font-size:1.2em'>这一行文字是父元素<p>的1.1*1.2=1.32倍大</span>

</span>

</p>

<p>这是标准大小的段落(浏览器默认的文字大小,一般为16像素)

<span style='font-size:0.85em'>由于加入了0.85em的属性,所以本行的文字只有父元素<p>大小的0.85倍大</span>

<span style='font-size:1.1em'>由于加入了1.1em的属性,所以本行的文字有父元素<p>的1.1倍大

<span style='font-size:1.2em'>

注意,这一行文字嵌套在1.1em的父元素<span>内,因此,本行文字的大小要相对父元素<span>增加1.2倍,最终大小等于<p>元素的1.1*1.2=1.32倍大

</span>

</span>

</p>

Human.css预置了以下几种文字的大小:

<h1>1号标题: 2em</h1>

<h2>2号标题: 1.5em</h2>

<h3>3号标题: 1.25em</h3>

<h4>4号标题: 1.15</h4>

<p>5号标题: 0.9em</h45>

<h6>6号标题: 0.8em</h6>

<p>普通段落文字: 1em</p>

<small>相对小号: 0.9em</small>

<large>相对大号: 1.1em</large>

由于采用了em的度量方式,可以通过嵌套的方式来实现各种大小的文字,比如<h1><large>...</large></h1>可以实现2.2em的大小;<h2><h3>...</h3></h2>则可以实现1.875em的大小

human.css支持响应式的文字大小,通过.f-*-*属性可以控制不同屏幕下的文字大小,示例如下:

<p>固定大小的文字</p>

<p class='f-sm-105 f-md-120 f-lg-130'>

这段文字会按以下规则变化:

- 屏宽达到sm时文字增大5%(.f-sm-105);

- 屏宽达到md时文字增大20%(.f-md-120);

- 屏宽达到lg时文字增大30%(.f-lg-130);

</p>

<p>固定大小的文字</p>

<p class='f-sm-105 f-md-120 f-lg-130'>随屏宽变化的文字</p>

文字对齐可以使用.align-*属性,也遵循响应式的原则:

<div class='box align-center'>

始终居中

</div>

<div class='box align-center align-sm-left align-md-right'>

这段文字默认(屏宽<30em)居中对齐(.align-center);

屏宽达到sm时居左对齐(.align-sm-left);

超过md时又居右对齐(.align-md-right)

</div>

始终居中
默认(屏宽<30em)居中对齐;
屏宽达到sm时居左对齐;
超过md时又居右对齐

通过自定义颜色配置文件,Human.css可以动态生成多种颜色的文字,并以.c-*的形式命名(c是color的缩写):

class='c-lgray'

class='c-gray'

class='c-dgray'

class='c-ldark'

class='c-dark'

class='c-black'

class='c-earth'

class='c-almond'

class='c-yellow'

class='c-peach'

class='c-pink'

class='c-orange'

class='c-red'

class='c-kiwi'

class='c-tree'

class='c-green'

class='c-olive'

class='c-lake'

class='c-azure'

class='c-cyan'

class='c-blue'

class='c-iron'

class='c-night'

class='c-navy'

class='c-violet'

class='c-blood'

组件5:弹性混排

有一种很常见的排版格式:左侧是固定宽度的图片,右侧的文字则随着浏览器的宽度自动伸缩。通过human.css可以很容易实现这个效果

<div class='table widest'>

<div class='flex-left' style='min-width:130px'><img src='...' /></div>

<div class='flex-right'>大段文字</div>

</div>

qinco
缩放浏览器宽度,你会发现左侧的图片尺寸是不会变的,但是右侧的文字却可以根据浏览器的宽度自动伸缩。更有意思的是,如果把.flex-*替换成.flex-md-*,即可实现响应式的混排,即:只有屏幕大于md尺寸后才会形成这种混排的版式,而在屏幕小于md时就会按上下垂直排列;同理,.flex-sm-*.flex-lg-*也可以使用

弹性混排也是支持响应式的,示例:

<div class='table widest'>

<div class='flex-md-left' style='min-width:250px'><img src='...' /></div>

<div class='flex-md-right'>只有屏宽达到md之后才会产生混排效果</div>

</div>

qinco
缩放浏览器宽度,你会发现左侧的图片尺寸是不会变的,但是右侧的文字却可以根据浏览器的宽度自动伸缩。更有意思的是,如果把.flex-*替换成.flex-md-*,即可实现响应式的混排,即:只有屏幕大于md尺寸后才会形成这种混排的版式,而在屏幕小于md时就会按上下垂直排列;同理,.flex-sm-*.flex-lg-*也可以使用

组件6:输入框

Human.css预置了非常简洁的输入框样式,可以直接使用,以.input开始,后面跟随大小、颜色等属性,如:

<input type='text' class='input input-sm' value='小型输入框' />

<input type='text' class='input input-md' value='中型输入框' />

<input type='text' class='input input-lg' value='大型输入框' />

利用之前提到的不同字号和弹性混排组件,可以实现很各种大小的表单:

<div class='table widest'>

<div class='flex-sm-left' style='min-width:8em'><h4>输入1:</h4></div>

<div class='flex-sm-right'><h4><input type='text' class='input widest' value='小号表单' /></h4></div>

</div>

<div class='table widest'>

<div class='flex-sm-left' style='min-width:8em'><h3>输入2:</h3></div>

<div class='flex-sm-right'><h3><input type='text' class='input widest' value='中号表单' /></h3></div>

</div>

<div class='table widest'>

<div class='flex-sm-left' style='min-width:8em'><h2>输入3:</h2></div>

<div class='flex-sm-right'><h2><input type='text' class='input widest' value='大号表单' /></h2></div>

</div>

输入1:

输入2:

输入3:

组件7:按钮和表单

Human.css预置了非常简洁的按钮样式,可以直接使用,以.btn开始,后面跟随大小、颜色等属性,如:

<button class='btn btn-sm btn-cyan'>蓝色超小号按钮</button>

<a href='#' class='btn btn-md btnl-almond btn-round'>土色线框圆角中号按钮</a>

显示效果示例:

.c-*属性类似,.btn-*的颜色也可以自定义很多种:

按钮和输入框,可以利用.btn-group参数来形成一个组合,示例:

<div class='box btn-group p'>

<input type='text' /><button class='btn-after btn-blue'>提交</button>

</div>

<div class='box btn-group h4'>

<button class='btn-before btn-lake'>输入金额:</button><!--

--><input type='text' /><!--

--><button class='btn-after btn-lake'>元</button>

</div>

<div class='box btn-group h3'>

<button class='btn-before btn-black'>输入金额:</button><!--

--><input type='text' /><!--

--><button class='btn-after btn-blue px1em'>美元</button><!--

--><button class='btn-after btn-lake px2em'>欧元</button><!--

--><button class='btn-after btn-almond px3em'>港元</button>

</div>

注意:.btn-group内的HTML元素如果产生了换行,必须用注释代码<!-- ... -->把换行给包裹起来

组件8:边距

Human.css预置了很多常见的PaddingMargin,可以方便的使用,不过你需要先熟悉一下命名规则:

  • p: 表示padding-
  • m: 表示margin-
  • t: 表示-top
  • b: 表示-bottom
  • l: 表示-left
  • r: 表示-right
  • x: 表示横向,即-left以及-right
  • n: 表示negative,即负数
  • 0: 表示"0.",后面跟的数字自动成为小数;比如02表示0.2

根据以上命名规则,可以举例如下:

<div class='pt2em'>等同于style='padding-top:2em'</div>

<div class='pl4em pr02em'>等同于style='padding-left:4em;padding-right:0.2em'</div>

<div class='mb3em'>等同于style='margin-bottom:3em;'</div>

<div class='mx3em'>等同于style='margin-left:3em;margin-right:3em;'</div>

<div class='mxn2em'>等同于style='margin-left:-2em;margin-right:-2em;'</div>

.pt2em: 等同于style='padding-top:2em'
.pl4em .pr02em: 等同于style='padding-left:4em;padding-right:0.2em'
.mb3em: 等同于style='margin-bottom:3em;'
.mx3em: 等同于style='margin-left:3em;margin-right:3em;'
.mxn2em: 等同于style='margin-left:-2em;margin-right:-2em;'

更实用的是,Padding和Margin也预置了响应式的效果,比如:

<div class='pl1em pl-md-4em pl-lg-8em'>...</div>

表示默认屏幕(小于30em)下 padding-left是1em;当屏宽超过md后,padding-left变为4em;当屏宽超过lg后,padding-left变为8em;

<div class='mx0 mx-md-n3em mx-lg-7em'>...</div>

表示默认屏幕(小于30em)下 margin-left和margin-left是0;当屏宽超过md后,margin-left和margin-left变为-3em;当屏宽超过lg后,margin-left和margin-left变为7em;

结合负的margin(.mxn*),可以实现嵌套图层既带padding同时又实现两侧对齐,比如:

<div class='box'>

<div class='col col-3'>两侧带不带padding</div>

<div class='col col-4'>两侧带不带padding</div>

<div class='col col-5'>两侧带不带padding</div>

</div>

<div class='box mxn04em'>

<div class='col col-3 px04em'>两侧带0.4em的padding</div>

<div class='col col-4 px04em'>两侧带0.4em的padding</div>

<div class='col col-5 px04em'>两侧带0.4em的padding</div>

</div>

.box 这是标准容器,用于对比
.col .col-3
.col .col-4
.col .col-5
.col .col-3 .px04em
.col .col-4 .px04em
.col .col-5 .px04em
.col .col-3 .px1em
.col .col-4 .px1em
.col .col-5 .px1em
.col .col-3 .px2em
.col .col-4 .px2em
.col .col-5 .px2em

组件9:背景、边框、圆角

Human.css的背景以.bg-开头,后面跟颜色代码即可:

<div class='box bg-yellow'>...</div>

表示黄色的背景

如果要使一个图层变成半透明,可以使用.opa-开头的属性:

<div class='box bg-yellow opa-40'>...</div>

还是黄色的背景,但是整个图层(包括背景和内容)的透明度只有40%

Human.css的边框以.bd-开头,可以分别定义样式、粗细、颜色,比如:

<div class='bd bd-solid bd-5px bd-blue'>...</div>

表示粗细为5px的实线蓝色边框

<div class='bd bd-dotted bd-2px bd-almond'>...</div>

表示粗细为2px的虚线土色边框

<div class='bd bd-bottom-dotted bd-3px bd-purple'>...</div>

表示只有底部为3px的虚线紫色边框

圆角的属性以.radius-开头,比如:

<div class='box bg-light bd bd-solid bd-1px bd-dark radius-5px'>...</div>

.radius-5px表示弧度5px的圆角

本文只描述了Human.css的部分主要内容,尚未覆盖全部。因此会持续更新。