Add Pure to Your Page
You can add Pure to your page via the free jsDelivr CDN. Just add the following <link> element into your page's <head>, before your project's stylesheets.
Get Started
Start your next web project with Pure.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/pure-min.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">Add the Viewport Meta Element
The viewport meta element lets you control the the width and scale of the viewport on mobile browsers. Since you're building a responsive website, you want the width to be equal to the device's native width. Add this into your page's <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">Understand Pure Grids
Pure's grid system is very simple. You create a row by using the .pure-g class, and create columns within that row by using the pure-u-* classes.
Here's a grid with three columns:
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>Thirds
Thirds
Thirds
Responsive Grids
Pure's grid system is also mobile-first and responsive, and you're able to customize the grid by specifying CSS Media Query breakpoints and grid classnames.
You'll need to also include Pure's grids-responsive.css onto your page:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/grids-responsive-min.css">Here's the default responsive breakpoints included in grids-responsive.css:
| Key | CSS Media Query | Applies | Classname |
|---|---|---|---|
| None | None | Always | .pure-u-* |
sm | @media screen and (min-width: 35.5em) | ≥ 568px | .pure-u-sm-* |
md | @media screen and (min-width: 48em) | ≥ 768px | .pure-u-md-* |
lg | @media screen and (min-width: 64em) | ≥ 1024px | .pure-u-lg-* |
xl | @media screen and (min-width: 80em) | ≥ 1280px | .pure-u-xl-* |
xxl | @media screen and (min-width: 120em) | ≥ 1920px | .pure-u-xxl-* |
xxxl | @media screen and (min-width: 160em) | ≥ 2560px | .pure-u-xxxl-* |
x4k | @media screen and (min-width: 240em) | ≥ 3840px | .pure-u-x4k-* |
Here's an example of what you'd be able to do. Try resizing your screen to see how the grid responds.
.pure-u-1
.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-3-4
.pure-u-md-3-4
.pure-u-1
.pure-u-md-1-4
.pure-u-md-1-4