您现在的位置:爱折腾>> web>>正文内容

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

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

Pure.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地址,也可以使用问说网提供的CDN加速服务:http://cdn.uedsc.com/pure/

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

浏览器兼容

Pure is tested and works in:

  • 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个

相关文章