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