Pure学习笔记



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

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
  • 单独模块,包括如下几种方式:
名称 链接
基本模块 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可以这么写:
1
<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# 参考资料

1.开始

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

2.准备工作

2.1 首页

首页官方给提供一个比较简洁的html开头格式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <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:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <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:

    1
    2
    3
    4
    <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

    1
    2
    3
    <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:





  • 示例3.3.6 Code:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <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

  • 示例3.4.1 Code:

    1
    2
    3
    4
    <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

  • 示例3.4.2 Code:

    1
    2
    3
    4
    <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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <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:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <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:

  • 示例3.6.1 Code:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <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)

4.皮肤管理

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

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <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