Add Pure to Your Page
You can add Pure to your page via Yahoo's free CDN. Just add the following <link>
element into your page's <head>
, before your project's stylesheets.
You can add Pure to your page via Yahoo's free CDN. Just add the following <link>
element into your page's <head>
, before your project's stylesheets.
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
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">
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
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="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/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.
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.
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="http://yui.yahooapis.com/pure/0.5.0/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.