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

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

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

  • You can take advantage of Bootstrap's ecosystem without pulling in a monolithic Bootstrap CSS file.

For example, here's a Bootstrap Modal. It's created by including the Pure CSS Rollup, and just adding Bootstrap's modal.css along with the jQuery plugin.

Launch Pure + Bootstrap Modal