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.

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:

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

Learn More about how to include and use Pure's Responsive Grids system, and how it compares to Basic Grids.

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 Key .pure-u-{key}-*

Media Query screen and (min-width: 48em)

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

Number of Columns

Grid Prefix

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