引入
先添加viewport
meta元素,保证移动端宽度与缩放;基于normalize.css:<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/base-min.css">
;
- CDN:
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">
; - 下载:‘pure.css’ github;
栅格系统
.pure-g
创建行,.pure-u-*-*
创建列;- 示例:
pure-u-1-2
宽度1/2,即50%;pure-u-1-4
宽度1/4,即25%; - 默认支持:5列和24列;扩展自定义列重新生成栅格;
- 媒体查询需单独引入:
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]-->
- 默认
font-family:sans-sarif
- 设置‘列’的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