Pure CSS Installation

Pure CSS Installation -In this Pure CSS tutorial, you will learn how to install Pure CSS framework inside the project. There are two easiest methods to install the Pure CSS.

Install Locally
Using Pure CSS CDN Link

Install Locally

You can move to official website of Pure CSS and then download Pure CSS. After the include the CSS library inside the <head> section of HTML code using <link>, before your project's stylesheets.

Example

Let us include the downloaded Pure CSS library link into HTML code.

General Syntax

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pure CSS - Installation</title>
    <link rel="stylesheet" href="pure-min.css" />
  </head>
  <body></body>
</html>

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1-3 graybox"><p>First Column</p></div>
  <div class="pure-u-1-3 orangebox"><p>Second Column</p></div>
  <div class="pure-u-1-3 pinkbox"><p>Third Column</p></div>
</div>

Try it now

Source Code: Output

First Column

Second Column

Third Column

Using CDN Link

You can also add Pure CSS library link by free unpkg CDN. Just place the following <link> element inside the <head> section of the HTML source code before the project's stylesheets.

	 
           <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" >

Example: Adding CDN Link In the HTML Code

Let use use the pure-css CDN link inside the HTML source code.

General Syntax

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pure CSS Installation</title>
    <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css" />
  </head>
  <body></body>
</html>

Source Code

          
            <div class="pure-g">
  <div class="pure-u-1-3 pinkbox"><p>First Column</p></div>
  <div class="pure-u-1-3 graybox"><p>Second Column</p></div>
  <div class="pure-u-1-3 orangebox"><p>Third Column</p></div>
</div>

Try it now

Source Code: Output

First Column

Second Column

Third Column

Add the Viewport Meta Element

Since pure CSS creates a responsive website means adjusting itself according to the device viewport, hence you have to place the meta elements inside the <head> section of the HTML source code. It controls the width and scale of the viewport on mobile


           <meta name="viewport" content="width=device-width, initial-scale=1">

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4