Extend

Build on top of Pure.

One of our goals when developing Pure was to make it extremely extensible. By including Pure and writing some CSS on top of it, you can ensure that your site or app works across browsers, while looking truly unique. Best of all, your CSS file size will remain tiny, which is a great thing for mobile users and others with slow connections.

Style Guide

Based on SMACSS

Pure is broken up into a set of responsive modules. From the beginning, we adopted SMACSS as a convention for writing our CSS. For those who are new to SMACSS, you should give it a quick read, especially the section on module rules.

Class Name Conventions

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 &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  { ... }

Extending 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. As a developer, you can pull in Pure as a foundational CSS framework, and then include specific Bootstrap 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!

For example, here's a Bootstrap Modal. It's created by including the Pure CSS Rollup, and just adding Bootstrap's Modal component CSS and JS plugin.

<!-- 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>