让 Pure 变得极易扩展是我们的一个目标. 借助 Pure 和一些补充css, 你能够确保你的网页或者APP实现跨浏览器使用，并保持特性。 最重要的是, 你的CSS文件仍然非常小，这在移动互联领域的作用尤其明显！
样式说明
基于SMACSS
Pure 是由一组响应式模块组成. 从一开始, 我们就采用 SMACSS 作为规范编写Pure. 对于新的SMACSS规范, 你应该去快速了解，特别是一些重要的模块规则.
如何取类名
One of the conventions in Pure is for every module to have a standard class name for common rules across a module, and then have additional class names for specific presentational rules for a specific sub-module. All classes start with a pure- prefix to prevent collisions. In addition, we try not to have presentational class names. Instead of calling something pure-form-horizontal, we prefer to call it pure-form-aligned. This prevents a tight coupling between class names and styles, which is good for maintainability.
For example, let's consider the HTML and CSS for a Stacked Form:
Stacked Form: HTML
A stacked form is created by adding two class names, pure-form and pure-form-stacked.
<form class="pure-form pure-form-stacked">
...
</form>Stacked Form: CSS
The two class names serve different purposes. One is used as a general selector to group common rules for all forms, while the other defines specific rules for a stacked form.
/*
Standard rules that all Pure Forms have. This includes rules for
styling .pure-form <inputs>, <fieldsets>, and <legends>, as well as layout
rules such as vertical alignments.
*/
.pure-form { ... }
/*
Specific rules that apply to stacked forms. This includes rules
such as taking child <input> elements and making them display: block
for the stacked effect.
*/
.pure-form-stacked { ... }Pure 扩展
When you're extending Pure, we recommend that you follow this convention. For instance, if you wanted to create a new type of form, your HTML and CSS should look something like this:
<form class="form-custom pure-form">
...
</form>/* add your custom styles in this selector */
.form-custom { ... }One common task that you may wish to do is to style buttons so they look different. The Pure Button Documentation has some examples on how you can create buttons with custom sizes and styles by adopting this modular architecture.
Pure + Bootstrap + JavaScript
Pure plays well with other libraries, including Bootstrap and jQuery. As a developer, you can pull in Pure as a foundational CSS framework, and then include specific Bootstrap or jQuery modules that your application may require. There are several benefits to doing this:
-
Your website or webapp's CSS will be a lot smaller — up to 5X smaller in some cases!
-
You get Pure's minimalist look that's easy to build on top of. No need to overwrite styles!
-
You can take advantage of Bootstrap's ecosystem without pulling in a monolithic Bootstrap CSS file.
