Home » Pure CSS » How to use Pure CSS

How to use Pure CSS

Pure is very easy to implement and execute in a webpage just like any other framework. There are two ways to use Pure CSS :

Local Installation : Download the Pure.css file on your PC and include it in your HTML code by using the <link> tag.
Using CDN Path : Include the Pure.css path directly from the source into your HTML code by using CDN (Content Delivery Network. It is always recommended to use CDN because you don't have to worry about including the updated version of the Pure.CSS library, it will do it by itself.

Local Installation

You have to download the latest version of pure.css file on your system from here: Pure.CSS. After downloading the file, extract it.

The next step is to place the downloaded 'pure-min.css'(you will find it in the extracted folder) file into the directory of your website. After that, just use the <link> tag to add that file in your webpage and start using the benefits of Pure. Have a look at the example below to understand the implementation.

Example Try this code »

<html>
<head>
<title> PURE.CSS Local Instalation Example </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="pure-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-family: Roboto, 'Liberation Mono', Courier, monospace;
text-align: center;
}
</style>
</head>
<body>
<div class="grids-example">
<div class="pure-g">
<div class="pure-u-1-3"><p>First Column</p></div>
<div class="pure-u-1-3"><p>Second Column</p></div>
<div class="pure-u-1-3"><p>Third Column</p></div>
</div>
</div>
</body>
</html>

Output

The PURE.CSS Example

First Column

Second Column

Third Column

Using CDN

The CDN path is also implemented through <link> tag only. By using CDN path, the Pure's library included in the webpage will always be the latest one.

Example Try this code »

<html>
<head>
<title>The PURE.CSS Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-family: Roboto, 'Liberation Mono', Courier, monospace;
text-align: center;
}
</style>
</head>
<body>
<div class="grids-example">
<div class="pure-g">
<div class="pure-u-1-3"><p>First Column</p></div>
<div class="pure-u-1-3"><p>Second Column</p></div>
<div class="pure-u-1-3"><p>Third Column</p></div>
</div>
</div>
</body>
</html>

Output

The PURE.CSS Example

First Column

Second Column

Third Column

Web Developement Courses
BootStrap Snippets
JS Keywords
Form Events
CSS Navbar
JS Objects
Cookies
Forms
Icons
Buttons
Progress
Footer
Errors