pure学习笔记
最近研究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区别，参考链接： CSDN博客-em与px区别
3.2 表单(form)
3.2.1 自然横向表单 (.pure-form)
使用： 在
<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>
3.2.2 纵向堆叠表单 (.pure-form .pure-form-stacked)
使用： 在
<form>标签中添加class为pure-form pure-form-stacked。这里注意一定要同时写两个class！示例3.2.2：
示例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：
示例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：
示例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：
示例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：
示例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：
示例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：
示例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：
示例3.5.3 Code： 参考以上（3.5.2）代码
3.5.4 彩条分割默认列表(.pure-table-odd)
使用： 在行标签内，添加
pure-table-odd示例3.5.4：
示例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：