pure框架

内容：

1.介绍与入门

2.基础使用

 

参考资料：

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

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

 

 

 

1、介绍与入门

1.pure介绍

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

 

 

2.pure框架入门使用

(1)在head中引入pure(固然你也能够去官网上下载pure)

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

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

 

(3)引入grids-responsive.css

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

 

(4)引入Normalize.css

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

 

 

 

2、基础使用

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名便可使用。它是一个强大并灵活的系统，基于默认的栅格系统

先引入如下文件:

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

 

 不一样大小的屏幕对应的类名以下：

 

(4)使用实例

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

1 <div class="pure-g">
2     <div class="pure-u-1 pure-u-md-1-3"> ... </div>
3     <div class="pure-u-1 pure-u-md-1-3"> ... </div>
4     <div class="pure-u-1 pure-u-md-1-3"> ... </div>
5 </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