最近研究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 -
单独模块，包括如下几种方式：
-
比如需要合并基础模块、网格模块、表单模块这三种模块的话，加载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-*开头，这样防止和其他已经存在的类名有重复的情况出现。
- Pure约定在进行扩展的时候，命名class的规则是以
4# 参考资料
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区别，参考链接： ****博客-em与px区别 **
3.2 表单(form)
3.2.1 自然横向表单 (.pure-form)
使用： 在
<form>标签中添加class为.pure-form示例3.2.1：
横向自然表单示例
Remember me
Sign in
-
示例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
Sign in
-
示例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-radiopure-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-menupure-menu-openpure-menu-horizontal即可示例3.6.1：
-
示例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：
示例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:
|