Utility classes

In addition to Normalize.css rules, Pure's Base module contains some common styles that are used by most websites.

@import "_variables.scss";

Hiding things

Add the hidden attribute to an HTML element to hide it from the screen via display: none !important;.

<p>Hello world.</p>
<input type="text" name="_csrf" hidden>
<p>Nothing to see here!</p>

Alternatively, for compatibility with old IE, you may use the CSS classname .hidden.

<p>Hello world.</p>
<input type="text" name="_csrf" class="hidden">
<p>Nothing to see here!</p>

.hidden,
[hidden] {
    display: none !important;
}

Responsive Images

Add the .cw-img class name to an <img> element to make it scale with the viewport. This is handy when building responsive websites.

<img class="cw-img" src="http://i.imgur.com/VWRZg8R.gif">

.cw-img {
    max-width: 100%;
    height: auto;
    display: block;
}

Spacing helpers

Based on helpers from https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css

p, m == padding, margin
a, t, r, b, l, h, v == all, top, right, bottom, left, horizontal, vertical
s, m, l, xl, n == small, medium, large, x-large, none

Here's how you can use them:

<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pas"><div class="cw-dark-brown-bg">cw-pas</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pam"><div class="cw-dark-brown-bg">cw-pam</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pas"><div class="cw-dark-brown-bg">cw-pas</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pam"><div class="cw-dark-brown-bg">cw-pam</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pal"><div class="cw-dark-brown-bg">cw-pal</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-paxl"><div class="cw-dark-brown-bg">cw-paxl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pan"><div class="cw-dark-brown-bg">cw-pan</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pts"><div class="cw-dark-brown-bg">cw-pts</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-ptm"><div class="cw-dark-brown-bg">cw-ptm</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-ptl"><div class="cw-dark-brown-bg">cw-ptl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-ptxl"><div class="cw-dark-brown-bg">cw-ptxl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-ptn"><div class="cw-dark-brown-bg">cw-ptn</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-prs"><div class="cw-dark-brown-bg">cw-prs</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-prm"><div class="cw-dark-brown-bg">cw-prm</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-prl"><div class="cw-dark-brown-bg">cw-prl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-prxl"><div class="cw-dark-brown-bg">cw-prxl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-prn"><div class="cw-dark-brown-bg">cw-prn</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pbs"><div class="cw-dark-brown-bg">cw-pbs</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pbm"><div class="cw-dark-brown-bg">cw-pbm</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pbl"><div class="cw-dark-brown-bg">cw-pbl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pbxl"><div class="cw-dark-brown-bg">cw-pbxl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pbn"><div class="cw-dark-brown-bg">cw-pbn</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pls"><div class="cw-dark-brown-bg">cw-pls</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-plm"><div class="cw-dark-brown-bg">cw-plm</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pll"><div class="cw-dark-brown-bg">cw-pll</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-plxl"><div class="cw-dark-brown-bg">cw-plxl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pln"><div class="cw-dark-brown-bg">cw-pln</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-phs"><div class="cw-dark-brown-bg">cw-phs</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-phm"><div class="cw-dark-brown-bg">cw-phm</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-phl"><div class="cw-dark-brown-bg">cw-phl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-phxl"><div class="cw-dark-brown-bg">cw-phxl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-phn"><div class="cw-dark-brown-bg">cw-phn</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pvs"><div class="cw-dark-brown-bg">cw-pvs</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pvm"><div class="cw-dark-brown-bg">cw-pvm</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pvl"><div class="cw-dark-brown-bg">cw-pvl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pvxl"><div class="cw-dark-brown-bg">cw-pvxl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pvn"><div class="cw-dark-brown-bg">cw-pvn</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-pvn"><div class="cw-dark-brown-bg">cw-pvn</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mas"><div class="cw-dark-brown-bg">cw-mas</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mam"><div class="cw-dark-brown-bg">cw-mam</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mal"><div class="cw-dark-brown-bg">cw-mal</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-maxl"><div class="cw-dark-brown-bg">cw-maxl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-man"><div class="cw-dark-brown-bg">cw-man</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mts"><div class="cw-dark-brown-bg">cw-mts</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mtm"><div class="cw-dark-brown-bg">cw-mtm</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mtl"><div class="cw-dark-brown-bg">cw-mtl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mtxl"><div class="cw-dark-brown-bg">cw-mtxl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mtn"><div class="cw-dark-brown-bg">cw-mtn</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mrs"><div class="cw-dark-brown-bg">cw-mrs</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mrm"><div class="cw-dark-brown-bg">cw-mrm</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mrl"><div class="cw-dark-brown-bg">cw-mrl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mrxl"><div class="cw-dark-brown-bg">cw-mrxl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mrn"><div class="cw-dark-brown-bg">cw-mrn</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mbs"><div class="cw-dark-brown-bg">cw-mbs</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mbm"><div class="cw-dark-brown-bg">cw-mbm</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mbl"><div class="cw-dark-brown-bg">cw-mbl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mbxl"><div class="cw-dark-brown-bg">cw-mbxl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mbn"><div class="cw-dark-brown-bg">cw-mbn</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mls"><div class="cw-dark-brown-bg">cw-mls</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mlm"><div class="cw-dark-brown-bg">cw-mlm</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mll"><div class="cw-dark-brown-bg">cw-mll</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mlxl"><div class="cw-dark-brown-bg">cw-mlxl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mln"><div class="cw-dark-brown-bg">cw-mln</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mhs"><div class="cw-dark-brown-bg">cw-mhs</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mhm"><div class="cw-dark-brown-bg">cw-mhm</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mhl"><div class="cw-dark-brown-bg">cw-mhl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mhxl"><div class="cw-dark-brown-bg">cw-mhxl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mhn"><div class="cw-dark-brown-bg">cw-mhn</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mvs"><div class="cw-dark-brown-bg">cw-mvs</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mvm"><div class="cw-dark-brown-bg">cw-mvm</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mvl"><div class="cw-dark-brown-bg">cw-mvl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mvxl"><div class="cw-dark-brown-bg">cw-mvxl</div></div></div>
<div style="border: 1px solid black; margin: 1rem 0;"><div class="cw-light-brown-bg cw-mvn"><div class="cw-dark-brown-bg">cw-mvn</div></div></div>

.cw-ptn, .cw-pvn, .cw-pan{ padding-top: $space-none !important; }
.cw-pts, .cw-pvs, .cw-pas{ padding-top: $space-small !important; }
.cw-ptm, .cw-pvm, .cw-pam{ padding-top: $space-medium !important; }
.cw-ptl, .cw-pvl, .cw-pal{ padding-top: $space-large !important; }
.cw-ptxl, .cw-pvxl, .cw-paxl{ padding-top: $space-x-large !important; }
.cw-prn, .cw-phn, .cw-pan{ padding-right: $space-none !important; }
.cw-prs, .cw-phs, .cw-pas{ padding-right: $space-small !important; }
.cw-prm, .cw-phm, .cw-pam{ padding-right: $space-medium !important; }
.cw-prl, .cw-phl, .cw-pal{ padding-right: $space-large !important; }
.cw-prxl, .cw-phxl, .cw-paxl{ padding-right: $space-x-large !important; }
.cw-pbn, .cw-pvn, .cw-pan{ padding-bottom: $space-none !important; }
.cw-pbs, .cw-pvs, .cw-pas{ padding-bottom: $space-small !important; }
.cw-pbm, .cw-pvm, .cw-pam{ padding-bottom: $space-medium !important; }
.cw-pbl, .cw-pvl, .cw-pal{ padding-bottom: $space-large !important; }
.cw-pbxl, .cw-pvxl, .cw-paxl{ padding-bottom: $space-x-large !important; }
.cw-pln, .cw-phn, .cw-pan{ padding-left: $space-none !important; }
.cw-pls, .cw-phs, .cw-pas{ padding-left: $space-small !important; }
.cw-plm, .cw-phm, .cw-pam{ padding-left: $space-medium !important; }
.cw-pll, .cw-phl, .cw-pal{ padding-left: $space-large !important; }
.cw-plxl, .cw-phxl, .cw-paxl{ padding-left: $space-x-large !important; }
.cw-mtn, .cw-mvn, .cw-man{ margin-top: $space-none !important; }
.cw-mts, .cw-mvs, .cw-mas{ margin-top: $space-small !important; }
.cw-mtm, .cw-mvm, .cw-mam{ margin-top: $space-medium !important; }
.cw-mtl, .cw-mvl, .cw-mal{ margin-top: $space-large !important; }
.cw-mtxl, .cw-mvxl, .cw-maxl{ margin-top: $space-x-large !important; }
.cw-mrn, .cw-mhn, .cw-man{ margin-right: $space-none !important; }
.cw-mrs, .cw-mhs, .cw-mas{ margin-right: $space-small !important; }
.cw-mrm, .cw-mhm, .cw-mam{ margin-right: $space-medium !important; }
.cw-mrl, .cw-mhl, .cw-mal{ margin-right: $space-large !important; }
.cw-mrxl, .cw-mhxl, .cw-maxl{ margin-right: $space-x-large !important; }
.cw-mbn, .cw-mvn, .cw-man{ margin-bottom: $space-none !important; }
.cw-mbs, .cw-mvs, .cw-mas{ margin-bottom: $space-small !important; }
.cw-mbm, .cw-mvm, .cw-mam{ margin-bottom: $space-medium !important; }
.cw-mbl, .cw-mvl, .cw-mal{ margin-bottom: $space-large !important; }
.cw-mbxl, .cw-mvxl, .cw-maxl{ margin-bottom: $space-x-large !important; }
.cw-mln, .cw-mhn, .cw-man{ margin-left: $space-none !important; }
.cw-mls, .cw-mhs, .cw-mas{ margin-left: $space-small !important; }
.cw-mlm, .cw-mhm, .cw-mam{ margin-left: $space-medium !important; }
.cw-mll, .cw-mhl, .cw-mal{ margin-left: $space-large !important; }
.cw-mlxl, .cw-mhxl, .cw-maxl{ margin-left: $space-x-large !important; }
.cw-mra, .cw-mha{ margin-right: auto !important; }
.cw-mla, .cw-mha{ margin-left: auto !important; }