汇总模块,包括下面是两种方式:
名称 | 链接 | 大小(压缩后的) |
---|---|---|
响应式的Rollup | http://yui.yahooapis.com/pure/0.5.0/pure-min.css | 4.4KB |
非响应式的Rollup | http://yui.yahooapis.com/pure/0.5.0/pure-nr-min.css | 4.2KB |
单独模块,包括如下几种方式:
名称 | 链接 |
---|---|
基本模块 | http://yui.yahooapis.com/pure/0.5.0/base-min.css |
按钮模块 | http://yui.yahooapis.com/pure/0.5.0/buttons-min.css |
表单模块(响应式的) | http://yui.yahooapis.com/pure/0.5.0/forms-min.css |
表单模块(非响应式) | http://yui.yahooapis.com/pure/0.5.0/forms-nr-min.css |
网格模块(响应式的) | http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css |
菜单模块(响应式的) | http://yui.yahooapis.com/pure/0.5.0/menus-min.css |
菜单模块(非响应式的) | http://yui.yahooapis.com/pure/0.5.0/menus-nr-min.css |
表格模块 | http://yui.yahooapis.com/pure/0.5.0/tables-min.css |
比如需要合并基础模块、网格模块、表单模块这三种模块的话,加载URL可以这么写:
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.5.0/base-min.css&pure/0.5.0/grids-min.css&pure/0.5.0/forms-min.css">
Pure很人性化的支持你自己对这个框架的扩展,体现在对类名样式的命名上。
pure-*
开头,这样防止和其他已经存在的类名有重复的情况出现。首先你需要添加样式,这是基本的样式,当然你也可以在线加载css样式:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
首页官方给提供一个比较简洁的html开头格式:
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Your page title</title><link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css"><!--[if lte IE 8] --><link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css"><!--[if gt IE 8]--><link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css"></head><body><!--Your HTML goes here. Visit purecss.io/layouts/ for some sample HTML code.--></body></html>
使用:所有的页面根,可以使用class名:.pure-g
来定义,定义列使用的class名是:pure-u-*
,这里详细说明*
的使用方式。
示例3.1:
为演示,故意加上背景颜色,以便区分不同块占用区域
示例3.1 Code:
<div class="pure-g"><div class="pure-u-1">第一行</div><div class="pure-u-1-4">第二行第一个</div><div class="pure-u-1-4">第二行第二个</div><div class="pure-u-1-4">第二行第三个</div><div class="pure-u-1-4">第二行第四个</div><div class="pure-u-3-4">第三行第一个,占三个位置</div><div class="pure-u-1-4">第三行第二个</div></div>
可以理解为:pure-u-x-y
,y代表一共要占用的一行的总额数,x代表在总个数中要占用多少个。
再比如定义的pure-u-1-2
,每个元素占用的宽度就是50%;pure-u-1-5
,每个元素占用的宽度就是20%。
这里Pure为我们定义了很好的尺寸标签,就是我们可以通过标签的不同,控制网格的大小:例如.pure-u-md-1-4
表格1
Key | CSS Media Query | Applies | Classname |
---|---|---|---|
None | None | Always | pure-u-* |
sm | @media screen and (min-width:35.5em) | >=568px | pure-u-sm-* |
md | @media screen and (min-width:48em) | >=768px | pure-u-md-* |
lg | @media screen and (min-width:64em) | >=1024px | pure-u-lg-* |
xl | @media screen and (min-width:80em) | >=1280px | pure-u-xl-* |
这里定义的em单位,在与px单位进行换算的值是:1em == 16px 。如要了解em与px区别,参考链接: CSDN博客-em与px区别
使用: 在<form>
标签中添加class为.pure-form
示例3.2.1:
示例3.2.1 Code:
<form class="pure-form"><fieldset><legend>A compact inline form</legend><input type="email" placeholder="Email"><input type="passWord" placeholder="Password"><label for="remember"> <input id="remember" type="checkbox"> Remember me</label><button type="submit" class="pure-button pure-button-PRimary">Sign in</button></fieldset></form>
使用: 在<form>
标签中添加class为pure-form pure-form-stacked
。这里注意一定要同时写两个class!
示例3.2.2:
新闻热点
疑难解答