Pure CSS Installation

Pure CSS Installation - There are two easiest methods to install the Pure CSS framework inside the web project.

Install Locally
Using Pure CSS CDN Link

Install Locally

You can download the latest version of pure CSS from: https://purecss.io/start/ and include the CSS library inside the <head> section of HTML code using <link>.

Example

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

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="pure-min.css" />
  </head>
  <body></body>
</html>

Try it now

Source Code

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

Try it now

Source Code : Output

First Column

Second Column

Third Column

Using CDN Link

You can add pure css library to the HTML source code from the <a href="https://purecss.io/customize/">content delivery network(CDN)<a>.

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

Try it now

Source Code

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

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

Pure CSS Installation

Install Locally

Example

Source Code

Using CDN Link

Example: Adding CDN Link In the HTML Code

Add the Viewport Meta Element

Web Tutorials