Pure.css轻量级响应式的CSS模块框架

Question

Pure.css是一组轻量级、响应式的CSS模块框架，考虑到移动端，保持文件尽量小对我们来说非常重要，每一行CSS都经过深思。如果你只用部分模块，简直小的忽略。

Pure的特点

• 最大的特点就是框架基于纯CSS，无任何JavaScript代码，渲染速度比较快。
• 由Yahoo出品，技术上应该不存在太大问题。
• 框架十分小巧，压缩后仅5.7k。
• 组件也很丰富，包括表格、表单、按钮、表、导航等。
• CSS类的标识十分简单，因此在使用Pure的过程中代码会比较友好。

Pure简介

Pure基于Normalize.css添加了HTML元素的布局和样式，以及常用的UI组件。全是精华，木有糟粕。

Pure是响应式的盒子模型，适应所有尺寸的屏幕。通过皮肤生成器可以自定义样式。

Pure提供最基础的样式，鼓励你基于此写出自己的样式。它被设计为容易覆写，且不影响你自己的样式。

创建响应式布局：通过使用栅格，菜单等，非常容易地创建响应式的布局，各尺寸屏幕完美显示。

适用于有自己的UI设计的项目：我们认为写新的CSS，比覆盖已有的CSS更容易！！！不同于其它框架，Pure是轻默认、最小化、扁平化，增加几行CSS就生成我们自己的样式了。

安装Pure

1、通过软件包安装，只需要运行下面的命令

$ bower install --save pure
$ npm install purecss

2、通过CDN加速，无需下载即可使用，你可以使用Yahoo提供的CDN地址。

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

浏览器兼容

Pure CSS可以在下面的这些浏览器上完美的运行：

• IE 8+
• Latest Stable: Firefox, Chrome, Safari
• iOS 6-8
• Android 4.x

使用方法

第一次接触pure呢，比较没头绪。不过经过多次折腾，总算总结出了一套简单使用方法。

第一步：设置meta

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

第二步：引用基础css，就是说，所有引用pure的代码之前，需要引入的一个CSS

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/base-min.css">

第三步：引用pure的主css

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">

第四步：引入你需要的pure的css，这里呢，我们抛砖引玉，只管响应式布局：

<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<!--<![endif]-->

好了。 该引用的都引用了。到底该怎么写呢？

看看官方说的吧：

<div class="pure-g">
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

我们新创建一个网页，加入引用以后，在body里加上这些div。所有的pure标签应该width都是100%的，通过几分之几来控制布局。（关于具体能做几分只几，请点击http://purecss.io/grids/）

pure的网格系统支持5格和24格，主要有两种样式：pure-g和pure-u-*

• pure-g，网格样式，例如<div class=”pure-g”></div>这样就实现了一个网格
• pure-u-*，单元格样式，网格里的内容必须放在网格单元里。例如pure-u-1-2表示单元格占1/2的宽度、pure-u-2-3表示单元格占2/3的宽度

pure-g是说这是一个表格，就相当于table，那表格内的单元格呢？那就是pure-u这里的-1-3指的是 分3列，每列占3分之1，注意：pure标签所在的div容器不要写其它控制性代码。

好了，我们发现这自动扩展的3列希望有点间距，那么只要在标签内新添加div控制就可以了

<div class="pure-g">
    <div class="pure-u-1-3">
        <div style="width:90%;margin-left:90px;">
        内容
        </div>
    </div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
    <div class="pure-u-1-3"><p>Thirds</p></div>
</div>

在class里加入 pure-u-1、pure-u-md-1-2、pure-u-lg-1-3

1. pure-u-1代表宽度最小时会有1个单元显示
2. pure-u-md-1-2代表宽度达到一定时显示2个
3. pure-u-lg-1-3代表宽度达到一定时显示3个

相关链接

• 官方网站：http://purecss.io/
• 中文网：http://purecss.org/
• Github地址：https://github.com/yahoo/pure/