首页 编程语言 css

pure.css——轻量级、响应式纯css模块，适用于任何Web项目



pure是一个轻量级框架。这类框架的作用就是通过给相应元素添加预设好的class，来快速的实现预设效果。

pure只有短短数千行代码，但是可控拓展，非常实用，对于新手来说，pure是css框架入门的一个比较好的选择。在后期做项目时也可能用到类似于boostrap这样的大型框架。所以前期对于轻量级框架源码的理解是很有帮助的。

Pure.CSS所占的空间几乎可忽略。

Pure 小得不要不要的，压缩成gzip文件仅为3.7KB*。力求每一行代码都精简到极致，以便最大程度压缩CSS大小，更利于移动Web制作。如果您仅使用其中的一部分模块，那CSS真是小到没有朋友了！



开始使用

将 Pure 引入你的页面，你可以借助 free unpkg CDN 添加 Pure ，而无需下载到本地。将下面的<link>内容直接复制添加到页面的<head>部分即可。

<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">

添加 Viewport Meta 元素

Viewportmeta元素控制移动端浏览器的宽度和缩放。为了自适应设备的宽度，请将下面一行加入<head>中。

<meta name="viewport" content="width=device-width, initial-scale=1">

响应式栅格，熟悉Pure的栅格（Grids）

Pure的栅格系统非常简单。你可以使用.pure-g创建行, 使用pure-u-*创建列。

下面是1行3列的栅格：

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

Pure的栅格系统是移动设备优先和响应式的, 你也可以自定义CSS媒体查询和栅格的class名，我们先来看个普通使用的例子。

首先引入grids-responsive.css:

<!--[if lte IE 8]>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
  <![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
  <!--<![endif]-->

下面是grids-responsive.css文件中默认的响应判断：


实现个性化UI

Pure不同于其他框架，她更加开放化、简单化、扁平化。我们始终认为：编写新的CSS规则比覆盖已有的CSS规则更容易。通过增加几行代码就能做出属于你自己的的UI，想想都让人激动！

另外还有丰富的表单、按钮、表格、菜单等等扩展组件

此外，还有：

  1. Pure 基于 Normalize.css，提供HTML元素布局、样式以及最常用的UI组件，几乎没有多余的代码。
  2. Pure 原生支持响应式, 在所有屏幕尺寸下的显示效果都是杠杠的！
  3. Pure除了提供基础样式外，可拥有极强的扩展性，你可以基于Pure打造出属于你自己的样式。没有做不到，只有想不到。


相关推荐