扩展 - Pure - Pure.css 中文

在开发 Pure 时我们的目标之一就是使其极具可扩展性。只要包含 Pure 并在其基础上编写一些 CSS，即可确保您的网站或应用可在多种浏览器中运行，同时拥有真正独特的风格。最棒的是，您的 CSS 文件大小会保持极小，这对于移动用户和其他网络连接较慢的用户来说是个好消息。

样式指南

基于 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 &lt;inputs&gt;, &lt;fieldsets&gt;, and &lt;legends&gt;, 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 &lt;input&gt; 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。作为开发人员，您可以将 Pure 作为基础 CSS 框架引入，然后包含您的应用程序可能需要的特定 Bootstrap 模块。这样做有很多好处

您的网站或 Web 应用程序的 CSS 将小得多——在某些情况下小 5 倍！
您可以轻松地构建在上面，获得 Pure 的极简外观。无需覆盖样式！

例如，这是一个 Bootstrap 模态。它通过包括 Pure CSS Rollup 创建，并且只需添加 Bootstrap 的Modal 组件CSS 和 JS 插件。

<!-- Button to trigger modal -->
<button type="button" class="pure-button-primary pure-button" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch Pure + Bootstrap Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>
                    This modal is launched by including <em>just</em> the <code>modal.css</code> and <code>modal.js</code> file from Bootstrap, and including Pure to drive all low-level styles. The result is a fully-functional Modal using just a fraction of the CSS.
                </p>
                <form class="pure-form pure-form-stacked">
                    <legend>A Stacked Form</legend>
                    <label for="email">Email</label>
                    <input id="email" type="text" placeholder="Email">
                    <label for="password">Password</label>
                    <input id="password" type="password" placeholder="Password">
                    <label for="state">State</label>
                    <select id="state">
                        <option>AL</option>
                        <option>CA</option>
                        <option>IL</option>
                    </select>
                    <label class="pure-checkbox">
                    <input type="checkbox"> Remember me
                    </label>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="pure-button" data-bs-dismiss="modal">Close</button>
                <button type="button" class="pure-button pure-button-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>