pure框架

内容：

1.介绍与入门

2.基础使用

参考资料：

pure中文文档：https://www.purecss.cn/

pure实例：https://www.purecss.cn/layouts.html

一、介绍与入门

1.pure介绍

pure框架是美国雅虎公司出品的一组轻量级、响应式纯css模块，适用于任何Web项目，其只提供很简单的样式

2.pure框架入门使用

(1)在head中引入pure(当然你也可以去官网上下载pure)

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

(2)添加 Viewport Meta 元素到head中

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

(3)引入grids-responsive.css

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

(4)引入Normalize.css

 <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/base-min.css">

二、基础使用

1.栅格系统

(1)常见概念

• 栅格class与单元格class：Pure栅格系统有两种class组成：栅格 class(pure-g) 和 单元格 (pure-u 或 pure-u-*)。栅格类似Excel的表格，由单元格组成
• 单元格的宽度是分数：单元格用不同的class名表示宽度。比如 pure-u-1-2 表示宽1/2即50%， 同样 pure-u-1-5 表示宽1/5即20%
• 栅格的所有子元素必须是单元格栅格：class名包含pure-g的元素，它的子元素必须是单元格即class名包含 pure-u 或 pure-u-* 的元素
• 内容在单元格中：所有需要显示的内容都要放在单元格中。这样才能保证内容正确的显示

(2)栅格单元格大小

Pure栅格默认支持5列和24列

(3)响应式栅格设计

Pure同时提供一个移动设备优先的响应式的栅格系统，通过添加class名即可使用。它是一个强大并灵活的系统，基于默认的栅格系统

先引入以下文件:

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

不同大小的屏幕对应的类名如下：

(4)使用实例

下面是一组响应式栅格，元素在小屏幕上宽width: 100%，在中等屏幕变为width: 33.33%

 <div class="pure-g">
     <div class="pure-u-1 pure-u-md-1-3"> ... </div>
     <div class="pure-u-1 pure-u-md-1-3"> ... </div>
     <div class="pure-u-1 pure-u-md-1-3"> ... </div>
 </div>

(5)其他说明

Pure的栅格系统默认移动端优先。想要在移动端使用栅格系统，加pure-u-*在相应的元素上就可以了

使用响应式栅格时，你肯定也希望图片能够伸缩，以保持正确的比例。给图片加个class(pure-img) 就可以

2.表单及按钮

(1)表单系列

详细内容直接看：https://www.purecss.cn/forms.html

(2)按钮系列

详细内容直接看：https://www.purecss.cn/buttons.html

3.表格及菜单

(1)表格系列

详细内容直接看：https://www.purecss.cn/tables.html

(2)菜单系列

详细内容直接看：https://www.purecss.cn/menus.html