Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

What are the important features of Pure.CSS ?

  • Difficulty Level : Basic
  • Last Updated : 07 Oct, 2021

Pure.css is just another framework of CSS what separates it apart is its tiny size. It’s a mere 3.7kb, hence makes it a good contender to compete against Bootstrap

Features:

  • First and foremost, It’s FREE.
  • It has several important prebuilt common elements as follows
    • Base: Elements like <p>, <h1…h6>, topography etc.
    • Grids: Responsive grids.
    • Forms: Multi-columns, stacked forms, aligned forms, grouped inputs, etc.
    • Tables: Base tables with borders, stripping, etc.
    • Buttons: Button effects like focus, hover, active, etc.
    • Menus: Dropdowns, scrollable menus, vertical menus, responsive menus, etc.
  • It is ridiculously tiny as said above. Modules clocked at less than 4kb!
  • Perfect for beginners. easy, and intuitive. Just copy the stylesheet link from their website purecss.io and add it to your HTML doc.
  • The pure.css is designed with keeping responsive design in mind. So we get prebuilt responsive styles that stay the same on all platforms.
  • No dependency on JavaScript and its library.
  • It also supports shadows and colors.
  • A great alternative to Bootstrap.
  • At its core, it’s just a collection of different CSS modules that are responsive, tiny, and easy to use.

Implementation of Pure.CSS: There are mainly two ways to use this framework. You can either download from purecss.io or you can use CDN. Let’s understand both by using the stacked form.

Stacked Form:  Add the class “pure-form-stacked” to any <form> element to create a stacked form.

Note: Create a default form by adding “pure-form” to <form> class then you can create any particular type of form like stacked, align, etc.



Manually adding the link: Now that you have downloaded the pure.css zip file on your machine. Extract it and place it on your website directory.  You can attach it to your main HTML document using the <link> tag. 

Syntax: 

<link rel = "stylesheet" href: "downloaded_pure_css_file"/> 

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
  
    <!-- Linking the Pure.CSS file that 
        we've downloaded-->
    <link rel="stylesheet" href="pure-min.css" />
  
    <style>
        form {
            margin: auto;
            width: 50%;
            border: 3px solid green;
            padding: 10px;
        }
    </style>
</head>
  
<body>
    <form class="pure-form pure-form-stacked">
  
        <!-- To create an stacked form, add 
            the pure-form-stacked classname
            to a form element alongside 
            pure-form -->
        <fieldset>
            <legend>A Stacked Form</legend>
            <label for="stacked-email">Email</label>
            <input type="email" id="stacked-email" 
                placeholder="Email" />
  
            <span class="pure-form-message"
                This is a required field.
            </span>
            <label for="stacked-password">Password</label>
            <input type="password" id="stacked-password" 
                placeholder="Password" />
            <label for="stacked-state">State</label>
            <select id="stacked-state">
                <option>AL</option>
                <option>CA</option>
                <option>IL</option>
            </select>
            <label for="stacked-remember" class="pure-checkbox">
                <input type="checkbox" id="stacked-remember" />
                Remember me
            </label>
            <button type="submit" class=
                "pure-button pure-button-primary">
                Sign in
            </button>
        </fieldset>
    </form>
</body>
  
</html>

Output:

Stacked Form using Pure.CSS (linking the downloaded css file)

 If we remove pure.css file i.e. if we remove the <link> tag, we get the following output.

Without Pure.CSS

 

Using CDN (Content Delivery Network): Even though both the steps do the same thing, still most people prefer CDN over manually linking the pure.css file because when you use CDN, you always get the latest file. So you don’t have to worry about updating your pure.css file every time.

Syntax:

<link rel = “stylesheet” href: “https://unpkg.com/purecss@2.0.6/build/pure-min.css”/> 
/* Copy the url form pure.css website to get latest version */

Example: 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport" content=
        "width=device-width, initial-scale=1" />
  
    <!-- The only difference is that you have 
        to copy the link from pure.css website 
        instead of linking the downloaded 
        file -->
  
    <link rel="stylesheet" href=
  
    <style>
        form {
            margin: auto;
            width: 50%;
            border: 3px solid green;
            padding: 10px;
        }
    </style>
</head>
  
<body>
    <form class="pure-form pure-form-stacked">
  
        <!-- To create an stacked form, add the 
             pure-form-stacked classname to a 
             <form> element alongside pure-form -->
        <fieldset>
            <legend>A Stacked Form</legend>
            <label for="stacked-email">Email</label>
            <input type="email" id="stacked-email" 
                placeholder="Email" />
            <span class="pure-form-message">
                This is a required field.
            </span>
            <label for="stacked-password">Password</label>
            <input type="password" id="stacked-password" 
                placeholder="Password" />
            <label for="stacked-state">State</label>
            <select id="stacked-state">
                <option>AL</option>
                <option>CA</option>
                <option>IL</option>
            </select>
            <label for="stacked-remember" class="pure-checkbox">
                <input type="checkbox" id="stacked-remember" />
                Remember me
            </label>
            <button type="submit" class=
                "pure-button pure-button-primary">
                Sign in
            </button>
        </fieldset>
    </form>
</body>
  
</html>

Output:

Stacked Form using Pure.CSS (CDN – Adding the url of the pure css file)




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!