Advertisement

Advertisement


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.


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


<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









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.