Extend - Pure

Pureを開発する上での目標の一つは、非常に拡張性の高いものにすることでした。Pureを含み、その上にCSSを記述することで、サイトやアプリがブラウザ全体で機能し、本当にユニークな外観にすることができます。最高の点は、CSSファイルのサイズが小さくなることです。これは、モバイルユーザーや接続が遅いユーザーにとって素晴らしいことです。

スタイルガイド

SMACSSに基づく

Pureは、一連の応答性モジュールに分割されています。当初から、SMACSSをCSSを書くための慣例として採用しました。SMACSSを初めて使用する方は、特にモジュールルールのセクションをすばやく確認することをお勧めします。

クラス名規約

Pureの規約の1つは、モジュールごとにモジュール全体で一般的なルールに対する標準クラス名があり、特定のサブモジュールに対する特定の提示ルールに対する追加のクラス名があることです。クラスはすべて衝突を避けるためにpure-プレフィックスで始まります。さらに、提示クラス名は使用しないようにしています。何かをpure-form-horizontalと呼ぶのではなく、pure-form-alignedと呼ぶことを好みます。これにより、クラス名とスタイルの密結合を防ぐことができ、管理性が高まります。

たとえば、スタックされたフォームのHTMLおよびCSSを考えてみましょう。

スタックされたフォーム: HTML

スタックされたフォームは、クラス名pure-formとpure-form-stackedの2つを追加することで作成されます。

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

スタックされたフォーム: CSS

2つのクラス名は、異なる目的に使用されます。1つはすべてのフォームの一般的なルールをグループ化する一般セレクターとして使用され、もう1つはスタックされたフォームの具体的なルールを定義します。

/*
    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 { ... }

行いたい一般的なタスクの1つは、ボタンのスタイルを変更することです。Pure Buttonドキュメントには、このモジュールアーキテクチャを採用することにより、カスタムサイズとスタイルのボタンを作成する方法を示す例がいくつかあります。

Pure + Bootstrap + JavaScript

Pureは、Bootstrapを含む他のライブラリともうまく連携します。開発者として、Pureを基本的なCSSフレームワークとして取り込み、アプリケーションで必要な特定のBootstrapモジュールを含めることができます。これにはいくつかの利点があります。

ウェブサイトやウェブアプリケーションのCSSは、はるかに小さくなります。場合によっては最大5倍小さくなります！
Pureのミニマリスト的な外観を利用でき、その上に構築するのは簡単です。スタイルを上書きする必要はありません！

たとえば、Bootstrapモーダルを次に示します。組み込みのPure CSSロールアップと、Bootstrapのモーダルコンポーネント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>

エクステンド

Pure上に構築。