Pure CSS Introduction

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.

Why we use Pure CSS?

It is a Faster and Easier way for Web-Development.
It creates Platform-independent web-pages.
It creates Responsive Web-pages.
It designs responsive web pages for mobile devices too.
It is Free and open-source framework available on https://purecss.io/

Pure CSS Components: The Pure CSS has the collection of the following components:

How to use Pure CSS in webpage?

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

Using NPM Install
Using CDN Link

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

2. 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/purecss@2.0.5/build/pure-min.css” integrity=”sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd” crossorigin=”anonymous”>

Example: In this example, we are using the pure-table class of Pure CSS to make a table. These tables are just like the normal HTML tables, but with padding and border added to table elements and with an emphasized header. To create a default table add class “pure-table” to the <table> element.

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <!--Import Pure CSS files-->

    <link rel="stylesheet" 

href="https://unpkg.com/purecss@2.0.5/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>Default Table: </h2> 

    <!-- Add class "pure-table" -->

    <table class="pure-table"> 

        <thead> 

            <tr> 

                <th>Sr no.</th> 

                <th>Employee Name</th> 

                <th>Age</th> 

                <th>Salary</th> 

            </tr> 

        </thead> 

        <tbody> 

            <tr> 

                <td>1</td> 

                <td>John</td> 

                <td>27</td> 

                <td>45000</td> 

            </tr> 

            <tr> 

                <td>2</td> 

                <td>Mike</td> 

                <td>29</td> 

                <td>36000</td> 

            </tr> 

        </tbody> 

    </table> 

</body> 

</html>

Output:

Article Tags :

CSS

Misc

Web Technologies

Pure CSS