pure.css入门

引入

先添加viewportmeta元素，保证移动端宽度与缩放；基于normalize.css：<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/base-min.css">；

1. CDN：<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">；
2. 下载：‘pure.css’ github；

栅格系统

1. .pure-g创建行，.pure-u-*-*创建列；
2. 示例：pure-u-1-2宽度1/2，即50%；pure-u-1-4宽度1/4，即25%；
3. 默认支持：5列和24列；扩展自定义列重新生成栅格；
4. 媒体查询需单独引入：grids-responsive.css，分sm/md/lg/xl四种响应：.pure-u-sm/md/lg/xl-*-*；从最小格式向上响应，.pure-u-*最小，逐级向上响应；

// 引入响应式媒体查询
<!--[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]-->

5. 默认font-family:sans-sarif
6. 设置‘列’的padding和border：两种方法
   • 内部包一层div后设置；
   • 设置box-sizing:border-box;，即可直接对‘列’设置；

   //pure默认content-box，修改后老浏览器不支持border-box
   .pure-g > div{
   	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
    }
   

基础

• 隐藏hidden属性/.hidden类：{display:none !important;}；
• 响应式图片：.pure-img；
• 表单：
  - form.pure-form单行表单，
  - form.pure-form .pure-form-stacked堆叠式，
  - form.pure-form .pure-form-aligned，div.pure-control-group左右label/input对齐式表单(小屏响应堆叠)
  - fieldset.pure-group表单控件分组，即按钮/控件组，(内部只可以有控件元素)
• 表单控件input
  - input.pure-input-*-*栅格系统类似，设置大小，嵌套栅格包裹.pure-input-1亦可
  - 必填：required属性，获焦后红色边框
  - 禁用：disabled属性
  - 只读：readonly属性
  - 圆角：.pure-input-rounded
• 表单控件input:checkbox/radio
  - 复选框：label.pure-checkbox包裹复选框，整理排列样式
  - 单选：label.pure-radio包裹单选框，整理排列样式
• 按钮a/button
  - 默认：a/button.pure-button
  - 禁用：.pure-button.pure-button-disabled
  - 激活：.pure-button.pure-button-active
  - 样式：.pure-button.pure-button-primary蓝色，其他的样式自定义class添加
  - 添加图标：自定义使用框架，如FontAwesome
• 表格table
  - 默认：table.pure-table，添加padding，border，突出表头，竖边框
  - 有边框：.pure-table.pure-table-bordered，横竖边框
  - 水平边框：.pure-table.pure-table-horizontal，水平边框
  - 斑马纹：table.pure-table.pure-table-striped，隔行添加tr.pure-table-odd，结合CSS3伪类使用:nth-child(odd)

菜单

• 纵向菜单：默认是垂直的，div.pure-menu>(span.pure-menu-heading+ul.pure-menu-list>li.pure-menu-item>a.pure-menu-link)
• 横向菜单：添加div.pure-menu.pure-menu-horizontal>...
• 选中：li.pure-menu-item.pure-menu-selected
• 禁用：li.pure-menu-item.pure-menu-disabled，不继承:hover样式
• dropdown子菜单：li.pure-menu-item.pure-menu-has-children.pure-menu-allow-hover>(a.pure-menu-link+ul.pure-menu-children>li.pure-menu-item>a.pure-menu-link)，可嵌套
• 可滚动菜单：div.pure-menu.pure-menu-scrollable>...，不支持dropdown

所有的模块分为响应式和非响应式两种，并有单独模块包，扩展自定义Pure+Bootstrap+JavaScript