Pure延伸

建立在Pure的顶部。

在开发Pure时，我们的目标之一是使其非常可扩展延伸。通过包括Pure和在其上编写一些CSS，您可以确保您的网站或应用程序在浏览器之间工作，同时看起来真正独特。最重要的是，您的CSS文件大小将保持微不足道，对于移动用户和其他连接速度较慢的用户来说，这是一件好事。

想快点开始吗？ 看看我们建立在Pure之上的一些布局。

风格指南

基于SMACSS

Pure被分解成一组响应模块。 从一开始，我们采用SMACSS作为编写我们的CSS的惯例。对于那些刚接触SMACSS的用户，您应该快速阅读，特别是模块规则部分。

类名称约定

Pure中的一个约定是每个模块都有一个标准的类名，用于模块中的常规规则，然后为特定子模块的特定演示规则提供额外的类名。 所有类以pure-前缀开头，以防止冲突。另外，我们尽量不要有表演类的名字。而不是打电话pure-form-horizontal，我们更喜欢称呼它pure-form-aligned。 这样可以防止类名和样式之间的紧密耦合，这有利于可维护性。

例如，让我们考虑堆叠表单的HTML和CSS ：

堆叠形式：HTML

一种堆叠形式通过添加两个类名创建pure-form和pure-form-stacked。

<form class="pure-form pure-form-stacked">
    ...
</form>

堆叠形式：CSS

两个类别名称用于不同的目的。一个用作通用选择器来分组所有表单的公共规则，而另一个定义堆叠表单的特定规则。

/*
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

当您扩展Pure时，我们建议您遵循此惯例。例如，如果要创建一种新的表单，您的HTML和CSS应该如下所示：

<form class="form-custom pure-form">
    ...
</form>

/* add your custom styles in this selector */
.form-custom { ... }

您可能希望做的一个常见任务是使样式按钮变得不同。 该Pure按钮文档对如何通过采用这种模块化的架构创建自定义尺寸和样式的按钮一些例子。

Pure+Bootstrap+ JavaScript

Pure与其他图书馆一起玩，包括Bootstrap和jQuery。作为开发人员，您可以将Pure作为基础CSS框架，然后包括您的应用程序可能需要的特定Bootstrap或jQuery模块。这样做有几个好处：

• 您的网站或webapp的CSS将会小得多 - 在某些情况下可能会减小5 倍！
• 您将获得Pure的简约外观，轻松构建。不需要覆盖样式！
• 您可以利用Bootstrap的生态系统，而无需引入一个单一的Bootstrap CSS文件。

例如，这是一个Bootstrap模态。 它是通过包含Pure CSS Rollup创建的，并且只是添加了Bootstrap modal.css以及jQuery插件。