首页 > 网站 > WEB开发 > 正文

pure学习笔记

2024-04-27 14:28:51
字体:
来源:转载
供稿:网友

pure学习笔记

Posted on 2015-03-03 11:19 doncc 阅读(...) 评论(...) 编辑 收藏

最近研究Pure,发现这个对于写CSS来说确实是个好的框架,特此总结了一番,如有错误或不足的地方,欢迎交流指点,轻拍。

此文运用的是优雅的Markdown而书

Pure学习笔记

#写在最前

1# Pure简介

  • Pure的所有模块都是基于Normalize.css。Normalize能在一定程度上解决跨浏览器的一致性问题。
  • 我们运用的Pure,其思想就是将你要布局的页面,尽量给网格化,这样复杂的页面在管理起来就更轻松、简单。
  • 内置菜单、表单、表格、基本控件等,方便使用和管理控件
  • 运用Pure自带的样式,以及已定义好的类名,可以调整出更丰富漂亮的控件样式、布局。
  • 运用Pure,可以轻松的将美工图快速的转换成漂亮的页面布局,统一管理你的css,无需再用老旧的方式来管理你的页面,加快你的开发进度。

2# 定制你需要的模块(表单、菜单...):汇总模块与单独模块的加载

  • 汇总模块,包括了Pure的所有模块(表单、控件、表格...),根据自己项目的需要,可以选择加载哪些模块到你的项目中;单独模块即把Pure的模块拆分开来,需要加载什么可以灵活加入。
  • 汇总模块,包括下面是两种方式:

    名称链接大小(压缩后的)
    响应式的Rolluphttp://yui.yahooapis.com/pure/0.5.0/pure-min.css4.4KB
    非响应式的Rolluphttp://yui.yahooapis.com/pure/0.5.0/pure-nr-min.css4.2KB
  • 单独模块,包括如下几种方式:

    名称链接
    基本模块http://yui.yahooapis.com/pure/0.5.0/base-min.css
    按钮模块http://yui.yahooapis.com/pure/0.5.0/buttons-min.css
    表单模块(响应式的)http://yui.yahooapis.com/pure/0.5.0/forms-min.css
    表单模块(非响应式)http://yui.yahooapis.com/pure/0.5.0/forms-nr-min.css
    网格模块(响应式的)http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css
    菜单模块(响应式的)http://yui.yahooapis.com/pure/0.5.0/menus-min.css
    菜单模块(非响应式的)http://yui.yahooapis.com/pure/0.5.0/menus-nr-min.css
    表格模块http://yui.yahooapis.com/pure/0.5.0/tables-min.css
  • 比如需要合并基础模块、网格模块、表单模块这三种模块的话,加载URL可以这么写:

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

3# 扩展你的Pure

  • Pure很人性化的支持你自己对这个框架的扩展,体现在对类名样式的命名上。

    • Pure约定在进行扩展的时候,命名class的规则是以pure-*开头,这样防止和其他已经存在的类名有重复的情况出现。

4# 参考资料

  • Pure官网(英): http://purecss.io/

1.开始

  • 首先你需要添加样式,这是基本的样式,当然你也可以在线加载css样式:

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

2.准备工作

2.1 首页

首页官方给提供一个比较简洁的html开头格式:

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Your page title</title><link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css"><!--[if lte IE 8] --><link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css"><!--[if gt IE 8]--><link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css"></head><body><!--Your HTML goes here. Visit purecss.io/layouts/ for some sample HTML code.--></body></html>
  • 这里是包括各个平台下的不同适配(特指IE浏览器)

3.常用功能

3.1 网格化页面(Grids)

  • 使用:所有的页面根,可以使用class名:.pure-g来定义,定义列使用的class名是:pure-u-*,这里详细说明*的使用方式。

  • 示例3.1:

第一行第二行第一个第二行第二个第二行第三个第二行第四个第三行第一个,占三个位置第三行第二个
  • 为演示,故意加上背景颜色,以便区分不同块占用区域

  • 示例3.1 Code:

    <div class="pure-g"><div class="pure-u-1">第一行</div><div class="pure-u-1-4">第二行第一个</div><div class="pure-u-1-4">第二行第二个</div><div class="pure-u-1-4">第二行第三个</div><div class="pure-u-1-4">第二行第四个</div><div class="pure-u-3-4">第三行第一个,占三个位置</div><div class="pure-u-1-4">第三行第二个</div></div>

    可以理解为:pure-u-x-y,y代表一共要占用的一行的总额数,x代表在总个数中要占用多少个。

    再比如定义的pure-u-1-2,每个元素占用的宽度就是50%;pure-u-1-5,每个元素占用的宽度就是20%。

  • 这里Pure为我们定义了很好的尺寸标签,就是我们可以通过标签的不同,控制网格的大小:例如.pure-u-md-1-4

  • 表格1

    KeyCSS Media QueryAppliesClassname
    NoneNoneAlwayspure-u-*
    sm@media screen and (min-width:35.5em)>=568pxpure-u-sm-*
    md@media screen and (min-width:48em)>=768pxpure-u-md-*
    lg@media screen and (min-width:64em)>=1024pxpure-u-lg-*
    xl@media screen and (min-width:80em)>=1280pxpure-u-xl-*
  • 这里定义的em单位,在与px单位进行换算的值是:1em == 16px 。如要了解em与px区别,参考链接: CSDN博客-em与px区别

3.2 表单(form)

3.2.1 自然横向表单 (.pure-form)

  • 使用:<form>标签中添加class为.pure-form

  • 示例3.2.1:

    横向自然表单示例

  • 示例3.2.1 Code:

    <form class="pure-form"><fieldset><legend>A compact inline form</legend><input type="email" placeholder="Email"><input type="passWord" placeholder="Password"><label for="remember">  <input id="remember" type="checkbox"> Remember me</label><button type="submit" class="pure-button pure-button-PRimary">Sign in</button></fieldset></form>

3.2.2 纵向堆叠表单 (.pure-form .pure-form-stacked)

  • 使用:<form>标签中添加class为pure-form pure-form-stacked这里注意一定要同时写两个class!

  • 示例3.2.2:

    纵向堆叠表单示例
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表