pure.css源码解析

本文编写摘录于袁巡的读书分享会，pure源码解析

概述

pure是一个轻量级框架。这类框架的作用就是通过给相应元素添加预设好的class，来快速的实现预设效果。

pure只有短短数千行代码，但是可控拓展，非常实用，对于新手来说，pure是css框架入门的一个比较好的选择。在后期做项目时也可能用到类似于boostrap这样的大型框架。所以前期对于轻量级框架源码的理解是很有帮助的。

本文简单的从三个个性的方面来解析css框架“pure”，分别是

• 栅格
• 表单
• 菜单

栅格

pure主要采用了flex流式布局，具体flex的内容在这里查看http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

使用pure-g就可以将其和其子元素设为flex。。。

而且，使用pure-u-x-y可以轻松的设置栅格的宽度。。。

pure-u-x-y除了宽度样式都是和第一张图中样式一致

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

x/y表示的是列数所占比重

像这样。。。。。

源码是这样。。。。

然后，pure虽然小，但是它是支持响应式布局的，在不同宽度界面下，栅格总宽度是不一样的。。。。

给个实例就是这种感觉

因为响应式的缘故，后面一张图栅格比较宽。。就换行了。。。变成纵向。。。

好了咱们来看看表单。。。

表单

pure里表单的主要类型是这样的。。。。

用这些代码写出了这种感觉。。。

感觉很炫酷，代码也不多是吧。。。其实呢。。也就是加了上边框和左边框的阴影，然后设置了圆角而已。。。。。是不是对做出炫酷的表单有信心了。。。

 

 

然后用pure-form-stacked，表单就会变成这样，竖起来。。

其实只是给子元素设置成了块元素。。

 

还有这个常见表单pure使用了pure-form-align属性。。下面是未添加样式的。。上面是添加样式的。。。。快想想怎么转变（不要用<tr><td>）。。。

其实。。。。这样就就可以了。。

是不是很简单。。。而且比<tr><td>舒服多了。。。

然后咱们再看看pure-group，它会将紧密连接的一群表格变成一个总的表格（虽然我觉得改完也不怎么好看）。。。还是想一想，怎么把上面的变成下面的。。

什么？没发现不同？不存在的。。仔细找。。。

好吧，其实他把连接的表格宽度变细了。然后圆角变少了。。。。就这点区别也就。。边框变细做的很投机呀。。。

他是把下边框。。。上移了一下。。。

代码是这样

菜单

首先来看一下含子菜单的横向菜单。长这样。。代码也在下面。。。

//鼠标移动显示下拉菜单
.pure-menu-allow-hover:hover > .pure-menu-child{
    display: block;
    position: absolute;
}
//最开始下拉菜单display:none;
//移动过去时display:block

//子菜单的样式
.pure-menu-children{
    display: none;
    position: absolute;
    //在父级右边，不覆盖父级
    left: 100%;
    //高度和父级一样
    top:0;
    margin: 0;
    padding: 0;
    //层级高
    z-index: 3;
    background-color: #fff;
}


//子菜单移动至下方
.pure-menu-horizontal .pure-menu-children {
    //左侧和父级对齐
    left: 0;
    //高度上不覆盖父级，通过浏览器计算上边缘
    top: auto;
    width: inherit;
}

其实也就是完成了一波，设置为块级然后移动到父元素下方的操作。。。

至于那个小箭头

//实现下拉菜单符号
.pure-menu-horizontal .pure-menu-has-child > .pure-menu-lin:after{
    content: "\25BE";
  //unicode编码
}
content属性与:before和:after伪元素配合使用，来插入生成内容

是通过伪元素实现的，是不是很机智。。。

然后是纵向菜单，比起横向菜单其实就是少了子元素移动到父元素正下方的操作。。。。

 

怎么样，其实pure也是一个源码很简单的框架。。。很便捷。还会提供一些css思路。。所以想要了解更多的话。去看看吧~

传送门：https://github.com/yahoo/pure/blob/master/src/forms/css/forms.css

转载于:https://www.cnblogs.com/Taniffer/p/6905068.html