How To Use Pure Css

by Online Tutorials Library July 14, 2022

How to use Pure.CSS

There are two ways to use Pure.CSS:

Install Locally
Using CDN Based Version

Install Locally

You can download the latest version of pure.css file on your system from here: https://purecss.io/start/ and include it in your HTML code.

Example

Let’s see how to include the CSS file in HTML file.

 <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 red;             border-bottom: 1px solid black;             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>  

Test it Now

Output:

PureCSS How to use pure css 1

Using CDN Based Version

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

You can add Pure to your page via the free unpkg CDN. Just add the following <link> element into your page’s <head>, before your project’s stylesheets.

 <link rel=”stylesheet”  href=”https://unpkg.com/purecss@1.0.0/build/pure-min.css” integrity=”sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w”  crossorigin=”anonymous”> 

Let’s use the yui.yahooapis.com CDN version of the library in the following example. Rewrite the above example in a second way.

Example

 <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 red;             border-bottom: 1px solid black;             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> 

Test it Now

Output:

It will show a result like this:

PureCSS How to use pure css 2

You can see that this is the same example but using another way.

Next TopicPure.CSS Responsive Design

How To Use Pure Css

How to use Pure.CSS

Install Locally

Using CDN Based Version

Affinity Photo Vs. Photoshop

Basic Python for Java Developers

You may also like