Get Started

Start your next web project with Pure.

Add Pure to Your Page

You can add Pure to your page via the free unpkg CDN. Just add the following <link> element into your page's <head>, before your project's stylesheets.

<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.0/build/pure-min.css">

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. If needed, you can customize Pure Grids below, but let's start off with an example.

You'll need to also include Pure's grids-responsive.css onto your page:

<!--[if lte IE 8]>
        <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.0/build/grids-responsive-old-ie-min.css">
    <![endif]-->
    <!--[if gt IE 8]><!-->
        <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.0/build/grids-responsive-min.css">
    <!--<![endif]-->

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

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

Build Your Pure Starter Kit

Now that you know how grids work, you might want to customize things to better suit your web project. You can define your own breakpoints by specifying a CSS Media Queries. You can also customize the number of columns that your layout needs.

We'll generate an index.html file, and if needed, a grid.css file that you can download and use as the starting-point for your project.

Grids Media Queries

You can use Pure's default CSS Media Queries which will add grids-responsive.css to your Pure Starter Kit, or we can generate a mobile-first, responsive grid if you provide us with the breakpoints.

Pure's generated Responsive Grids is simple to use. It provides you with a specific CSS classname for each Media Query. For example, pure-u-md-* for devices with width >= 768px, and pure-u-lg-* for devices with width >= 1024px.

What Media Queries should your grid system respond to?

Grid Options

Pure has a 5ths and 24ths-column grid system by default. You define an element's width using fractional classnames, e.g; .pure-u-2-5 for width: 40%, or .pure-u-12-24 for width: 50%. You can view all the grid units that are available in the default grid.

You can customize the number of columns; the default grid is 24 columns. You can also change the Grids classname prefix; the default is .pure-u-.

Your Pure Starter Kit will be generated below in real-time as you make your customizations. When you're ready, just download it!

Here's what the downloaded zip file contains.

<!doctype html>
                <html>
                <head>
                    <meta charset="utf-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                
                    <title>Your page title</title>
                
                    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.0/build/pure-min.css"></head>
                
                <body>
                    <!--
                    Your HTML goes here. Visit purecss.io/layouts/ for some sample HTML code.
                    -->
                </body>
                </html>

You haven't specified any customization that require any additional CSS.

You haven't specified any customization that requires IE-specific CSS.