延伸 - Pure - Pure.css 繁體中文

我們開發 Pure 的目標之一，是要讓它能輕易地進行延伸。包含 Pure 並在其上撰寫一些 CSS，即可確保你的網站或應用在各個瀏覽器中都能執行，同時擁有獨特的外觀。最棒的是，你的 CSS 檔案大小會保持很小，這對於行動裝置使用者和網路較慢的人來說非常有用。

樣式指南

基於 SMACSS

Pure 已被拆解成多組回應式模組。從一開始，我們就採用 SMACSS 作為撰寫 CSS 的慣例。對於不熟悉 SMACSS 的人，建議快速瀏覽一下，特別是關於模組規則的部分。

類別名稱慣例

Pure 中的其中一個慣例是讓每個模組都有標準的類別名稱，以表示模組中常見的規則，然後再針對特定子模組的特定呈現規則，另外設定其他類別名稱。所有類別皆以 pure- 前綴開頭，以避免衝突。此外，我們會盡量避免使用呈現類別名稱。我們會將類別名稱命名為 pure-form-aligned，而不是 pure-form-horizontal。這可以防止類別名稱與樣式之間緊密連結，對於維護而言是有益的。

例如，讓我們來探討堆疊表單的 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 模組。這樣做有好幾個好處

你的網站或網路應用程式的 CSS 將會更小 - 有些情況會小到 5 倍以上！
你將取得 Pure 的極簡外觀，而且很容易在其上進行開發。不需要覆寫樣式！

例如，這裡有一個 Bootstrap 的 Modal。它是透過包含 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>