Pure CSS Installation and Uses

Last Updated : 14 Sep, 2021

Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap.

Installation of Pure CSS: We can add Pure CSS to our webpage in two ways.

Using NPM Install
Using CDN Link

Using NPM Install: You can add Pure CSS to your project through npm. This is our recommended way to integrate Pure CSS into your project’s build process and toolchain.

npm install purecss --save

Using CDN Link: You can add Pure CSS to your page via the free unpkg CDN link. Just add the following <link> element into your page’s <head>, before your project’s style sheets.

<link rel=”stylesheet” href=”https://unpkg.com/[email protected]/build/pure-min.css” integrity=”sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd” crossorigin=”anonymous”>

Below example will show the use of Pure CSS:

Example 1: In this example, we will use the Pure CSS CDN link to design a basic form.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  
    <!-- Import Pure CSS files -->
    <link rel="stylesheet" href= 
        "https://unpkg.com/[email protected]/build/pure-min.css"
        integrity= 
"sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd"
        crossorigin="anonymous"> 
  
    <!-- Let browser know website is 
        optimized for mobile -->
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
</head> 
  
<body> 
    <h2 color="">GeeksforGeeks</h2> 
    <strong>Pure CSS Example Code</strong> 
  
    <!-- Add class "pure-form" -->
    <form class="pure-form"> 
        <fieldset> 
            <legend>Login to use GeeksforGeeks IDE</legend> 
            <input type="email" placeholder="Email" /> 
            <input type="password" placeholder="Password" /> 
            <br><br> 
  
            <label for="default-remember"> 
                <input type="checkbox" id="default-remember" /> 
                Remember me 
            </label> 
              
            <button type="submit" class="pure-button pure-button-primary"> 
                Log in 
            </button> 
        </fieldset> 
    </form> 
</body> 
  
</html>

Output:

Example 2: In this example, we will show the CSS Grid by using Pure CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  
    <!--Import Pure CSS files-->
    <link rel="stylesheet" href= 
        "https://unpkg.com/[email protected]/build/pure-min.css"
        integrity= 
"sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd"
        crossorigin="anonymous"> 
  
    <!-- Let browser know website is 
         optimized for mobile -->
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
</head> 
  
<body> 
    <h2 color="">GeeksforGeeks</h2> 
    <strong>Pure CSS Example Code</strong> 
  
    <!-- Add class "pure-grid" -->
    <div class="pure-g"> 
        <div class="pure-u-1-3"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210909011130/download312-200x200.png" /> 
        </div> 
        <div class="pure-u-1-3"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210909011207/QNHrwL2q-200x200.jpg" /> 
        </div> 
        <div class="pure-u-1-3"> 
            <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210909011130/download312-200x200.png" /> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Pure CSS Introduction

skyridetim

Improve

Article Tags :

Pure CSS Installation and Uses

HTML

HTML

Similar Reads

Thank You!

What kind of Experience do you want to share?