最近研究Pure，发现这个对于写css来说确实是个好的框架，特此总结了一番，如有错误或不足的地方，欢迎交流指点，轻拍。

此文运用的是优雅的Markdown而书

Pure学习笔记

#写在最前

1# Pure简介

Pure的所有模块都是基于Normalize.css。Normalize能在一定程度上解决跨浏览器的一致性问题。
我们运用的Pure，其思想就是将你要布局的页面，尽量给网格化，这样复杂的页面在管理起来就更轻松、简单。
内置菜单、表单、表格、基本控件等，方便使用和管理控件
运用Pure自带的样式，以及已定义好的类名，可以调整出更丰富漂亮的控件样式、布局。
运用Pure，可以轻松的将美工图快速的转换成漂亮的页面布局，统一管理你的css，无需再用老旧的方式来管理你的页面，加快你的开发进度。

2# 定制你需要的模块(表单、菜单...)：汇总模块与单独模块的加载

汇总模块，包括了Pure的所有模块(表单、控件、表格...)，根据自己项目的需要，可以选择加载哪些模块到你的项目中；单独模块即把Pure的模块拆分开来，需要加载什么可以灵活加入。
汇总模块，包括下面是两种方式：

名称链接大小(压缩后的)

响应式的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

名称	链接	大小(压缩后的)
响应式的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">

3# 扩展你的Pure

Pure很人性化的支持你自己对这个框架的扩展，体现在对类名样式的命名上。
- Pure约定在进行扩展的时候，命名class的规则是以pure-*开头，这样防止和其他已经存在的类名有重复的情况出现。

4# 参考资料

Pure官网(英): http://purecss.io/

1.开始

首先你需要添加样式，这是基本的样式，当然你也可以在线加载css样式：
```
  <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
```

2.准备工作

2.1 首页

首页官方给提供一个比较简洁的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>

这里是包括各个平台下的不同适配（特指IE浏览器）

3.常用功能

3.1 网格化页面(Grids)

使用：所有的页面根，可以使用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区别 **

3.2 表单(form)

3.2.1 自然横向表单 (.pure-form)

使用： 在<form>标签中添加class为.pure-form
示例3.2.1：

横向自然表单示例

Remember me

示例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>

3.2.2 纵向堆叠表单 (.pure-form .pure-form-stacked)

使用： 在<form>标签中添加class为pure-form pure-form-stacked。这里注意一定要同时写两个class！
示例3.2.2：

纵向堆叠表单示例

Remember me

示例3.2.2 Code：

  <form class="pure-form pure-form-stacked">

  	<fieldset>

  		<legend>纵向堆叠表单示例</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，复杂表格形式、紧凑分组型形式，用途很少。详细参见Pure.io-form使用

3.3 输入框(Input)

3.3.1 普通输入框(.pure-input-*)

使用：普通输入框支持宽度尺寸的定义，可以使用.pure-input-*的class名。
示例3.3.1：

不难看出，输入框可以定义不同大小，尺寸参照上面有个表格1

示例3.3.1 Code：

  <form class="pure-form">

  	<input class="pure-input-1" type="text" placeholder="我是输入框1">

  	<input class="pure-input-md-1" type="text" placeholder="我是输入框2">

  </form>

当然你也可以参照上面3.1网格布局，来布局你的input控件

3.3.2 请求类输入框(required)

使用：在<input>标签内部加上required字段即可。
示例3.3.2：

示例3.3.2 Code： 参考以上（3.3.2）代码

3.3.3 不可用输入框(disabled)

使用：在<input>标签内部加上disabled字段即可。
示例3.3.3：

示例3.3.3 Code： 参考以上（3.3.2）代码

3.3.4 只读类型输入框(readonly)

使用：在<input>标签内部加上readonly字段即可。
示例3.3.4：

示例3.3.4 Code： 参考以上（3.3.2）代码

3.3.5 圆角类型输入框(.pure-input-rounded)

使用： class名为pure-input-rounded即可
示例3.3.5：

示例3.3.5 Code

  <form class="pure-form">

  	<input class="pure-input-rounded" type="email" placeholder="圆角类型的email输入框">

  </form>

3.3.6 单选框与复选框(.pure-radio .pure-checkbox)

使用： class名为pure-radio pure-checkbox即可
示例3.3.6：

这是复选框

这是单选框1

这是单选框2

示例3.3.6 Code：

  <form class="pure-form">

  	<label for="option-one" class="pure-checkbox">

  		<input id="option-one" type="checkbox" value="">

  		这是复选框

  	</label>

  	<label for="option-two" class="pure-radio">

  		<input id="option-two" type="radio" name="optionsRadios" value="option1" checked>

  		这是单选框1

  	</label>

  	<label for="option-three" class="pure-radio">

  		<input id="option-three" type="radio" name="optionsRadios" value="option2">

  		这是单选框2

  	</label>

  </form>

3.4 按钮(Button)

3.4.1 默认按钮(.pure-button)

使用： class名为pure-button即可
示例3.4.1：

按钮1
按钮2

示例3.4.1 Code：

  <form class="pure-form">

  	<a class="pure-button" href="#">按钮1</a>

  	<button class="pure-button">按钮2</button>

  </form>

3.4.2 不可点击按钮(.pure-button .pure-button-disabled)

使用： class名为pure-button pure-button-disabled即可，这里注意一定要同时写两个class！
示例3.4.2：

按钮1
按钮2

示例3.4.2 Code：

  <form class="pure-form">

  	<a class="pure-button pure-button-disabled" href="#">按钮1</a>

  	<button class="pure-button pure-button-disabled">按钮2</button>

  </form>

3.4.3 主要点击引导按钮(.pure-button .pure-button-primary)

使用： class名为pure-button pure-button-primary即可，这里注意一定要同时写两个class！
示例3.4.3：

按钮1
按钮2

示例3.4.3 Code： 参考3.4.2示例代码。
当然这里还有很多的button样式。照详细参见Pure.io-buttons使用

3.5 表格(Tables)

3.5.1 默认列表(.pure-table)

使用： class名为pure-table 即可
示例3.5.1：

编号	名字	年龄	性别
1	张三	21	男
2	李四	14	男

示例3.5.1 Code：

  <table class="pure-table">

  	<thead>

  		<tr>

  			<th>编号</th>

  			<th>名字</th>

  			<th>年龄</th>

  			<th>性别</th>

  		</tr>

  	</thead>

  	<tbody>

  		<tr>

  			<td>1</td>

  			<td>张三</td>

  			<td>21</td>

  			<td>男</td>

  		</tr>

  		<tr>

  		...

  		</tr>

  	</tbody>

  </table>

3.5.2 有边界列表(.pure-table .pure-table-bordered)

使用： class名为pure-table pure-table-bordered 即可，这里注意一定要同时写两个class！
示例3.5.2：

编号	名字	年龄	性别
1	张三	21	男
2	李四	14	男

示例3.5.2 Code： 参考以上（3.5.1）代码

3.5.3 横向水平线列表(.pure-table .pure-table-horizontal)

使用： class名为pure-table pure-table-horizontal 即可，这里注意一定要同时写两个class！
示例3.5.3：

编号	名字	年龄	性别
1	张三	21	男
2	李四	14	男

示例3.5.3 Code： 参考以上（3.5.2）代码

3.5.4 彩条分割默认列表(.pure-table-odd)

使用： 在行标签内，添加pure-table-odd
示例3.5.4：

编号	名字	年龄	性别
1	张三	21	男
2	李四	14	男

示例3.5.4 Code：

  <form class="pure-form">

  	<ul>

  	<table class="pure-table">

  		<thead>

  			<tr>

      			<th>编号</th>

      			<th>名字</th>

      			<th>年龄</th>

      			<th>性别</th>

  			</tr>

  		</thead>

  		<tbody>

  			<tr>

      			<td>1</td>

      			<td>张三</td>

      			<td>21</td>

      			<td>男</td>

  			</tr>

  			<tr class="pure-table-odd">

      			<td>2</td>

      			<td>李四</td>

      			<td>14</td>

      			<td>男</td>

  			</tr>

  		</tbody>

  	</table>

  	</ul>

  </form>

3.6 菜单(Menus)

这里比较常见的就是菜单选中状态和菜单标头。这里举例说明代码的使用方式，详见下面的具体例子里，包括了具体使用时的样式。
- 菜单选中状态：即在选中状态标签内的class添加pure-menu-selected即可
  
  示例：
```
<li class="pure-menu-selected" style="background:#1f8dd6"><a href="#">文件</a></li>
```
- 菜单标头：即在菜单的最前段（后端）或者最上端（下端），添加标题，在标签内class添加pure-menu-heading即可
  
  示例：
```
<a class="pure-menu-heading">Yahoo! Sites</a>
```

3.6.1 横向自然菜单(.pure-menu .pure-menu-open .pure-menu-horizontal)

使用： 可以用<div>标签，在内部添加class名为pure-menu pure-menu-open pure-menu-horizontal 即可
示例3.6.1：

标头位置1

标头位置2

标头位置3

示例3.6.1 Code：

  <a class="pure-menu-heading">标头位置1</a>

  <div class="pure-menu pure-menu-open pure-menu-horizontal">

  <a class="pure-menu-heading">标头位置2</a>

  	<ul>

  		<li><a href="#">首页</a></li>

  		<li class="pure-menu-selected" style="background:#1f8dd6"><a href="#">文件</a></li>

  		<li><a href="#">信息</a></li>

  		<li><a href="#">设置</a></li>

  	</ul>

  	<a class="pure-menu-heading">标头位置3</a>

  </div>

3.6.2 纵向自然菜单(.pure-menu .pure-menu-open)

使用： 不难看出，总系那个自然菜单比横向自然菜单少的就是.pure-menu-horizontal这个class。
示例3.6.2：

标头位置1

标头位置2

设置

示例3.6.2 Code： 参见示例3.6.1，去掉class .pure-menu-horizontal 即可。
还有其他形式的菜单布局，详情参见 Pure.io-Menus使用

4.皮肤管理

Pure为我们提供了很好的在线系列皮肤生成工具，可以通过可视化的页面，来调整各个组件按钮的颜色、风格。加快我们开发速度。而且也易于应用。
在线编辑工具链接

举例说明：

比如我们已经在在线工具上选好了风格，在上面菜单栏里找到Code 菜单，然后就能看Pure为我我们生成好的css代码，copy进你的css文件内即可。应用方式如下：

  <div class="pure-skin-mine">

  	<input class="pure-button" type="button" value="click me"/>

  	<form class="pure-form">

  		<fieldset>

  			<legend>输入内容</legend>

  			<input type="email" placeholder="input your email">

  			<input type="password" placeholder="input your email">

  			<button class="pure-button pure-button-primary" type="submit">sign in</button>

  		</fieldset>

  	</form>

  </div>

这里一定要注意的是，我们命名class一定要按照Pure定义的规则来命名，这样你的css才能应用上。

运用Pure提供的皮肤管理器批量管理css的演示：（模仿微信公众平台的界面）
- demo1:
- demo2:
  
  |