How to use Pure
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.
<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
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.
<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
First Column
Second Column
Third Column
