Get Started

Start your next web project with Pure.

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.

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

KeyCSS Media QueryAppliesClassname
NoneNoneAlways.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-1
.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-1
.pure-u-md-1-2
.pure-u-lg-1-4
.pure-u-1
.pure-u-md-3-4
.pure-u-1
.pure-u-md-1-4