基础

Pure基于Normalize.css(一个支持HTML5的CSS重置文件)

基础

所有Pure模块都是基于Normalize.css构建的。它是我们的基础层,一定程度上保证了跨浏览器的一致性。我们深深地热爱Normalize,所以把它放在了我们的CDN服务器上。你可以引用下面的代码引入Normalize.css:

<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.1/build/base-min.css">

关于 Normalize.css

Normalize.cssNicolas GallagherJonathan 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提供的样式:表单表格菜单