基础
所有Pure模块都是基于Normalize.css构建的。它是我们的基础层,一定程度上保证了跨浏览器的一致性。我们深深地热爱Normalize,所以把它放在了我们的CDN服务器上。你可以引用下面的代码引入Normalize.css:
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/base-min.css">
关于 Normalize.css
Normalize.css 是 Nicolas Gallagher 和 Jonathan Neal的开源项目. 用他们的话说:"
Normalize.css是一个小的CSS文件,为HTML元素样式提供跨浏览器的一致性。它是一个现代的、支持HTML5的、传统CSS重置的替代。"
Normalize.css有大量的文档和详尽的指南(解释了它同传统CSS重置的区别)。你也可以查看YUI的CSSNormalize模块,它包含了通用的Normalize以及一个上下文版。这个上下文版的Normallize只适用于标准化的子元素,他们的父元素必须包含class yui3-normalized
。
扩展
除了Normalize.css的规则,Pure的基础模块,包含大多数网站常用的一些样式。
隐藏元素
HTML元素添加hidden
属性,可实现隐藏效果display: none !important;
。有时,你可以在低版本IE上使用.hidden
,以获得更好的显示效果。
<input type="text" name="_csrf" hidden>
响应式图片
<img>
添加class.pure-img
,配合viewport可实现图片伸缩,做响应式网站的时候比较有用。
<img class="pure-img" src="...">
优于Normalize
Normalize.css是创建项目的一个很好的起点,但是很多元素比如表单、表格和菜单,需要更好的样式,Normalize无法提供。
Pure为这些元素提供了更个性化的样式,但是为了保持足够小,只满足最基本的需求,你可以在此基础上进行自定义。请查看Pure提供的样式:表单、表格和菜单。