Pure.CSS - Environment Setup

There are two ways to use Pure −

  • Local Installation − You can download the pure.css file on your local machine and include it in your HTML code.

  • CDN Based Version − You can include the pure.css file into your HTML code directly from the Content Delivery Network (CDN).

Local Installation

  • Go to https://purecss.io/start/ to download the latest version available.

  • Place the downloaded pure-min.css file in a directory of your website, e.g. /css.

Example

You can include the css file in your HTML file as follows −

Live Demo 
<html>
   <head>
      <title>The PURE.CSS 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: Consolas, '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>

It will produce the following result −

CDN Based Version

You can include the pure.css file into your HTML code directly from the Content Delivery Network (CDN). yui.yahooapis.com provides content for the latest version.

We are using yui.yahooapis.com CDN version of the library throughout this tutorial.

Example

Now let us rewrite the above example using pure.css from PureCSS.io CDN.

Live Demo 
<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/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: Consolas, '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>

It will produce the following result −

Advertisements