Pure CSS

Last Updated : 16 Jun, 2024
Comments
Improve
Suggest changes
Like Article
Like
Save
Share
Report

Pure CSS is a CSS framework. It is a set of free and open-source tools for building responsive websites and web applications. Yahoo developed this, which is used to make websites that are quicker, more elegant, and more responsive. It is a viable alternative to Bootstrap. Pure CSS is designed with keeping responsive design in mind. So we get prebuilt responsive styles that stay the same on all platforms.

Pure CSS

Pure CSS

Why Pure CSS?

  • It designs responsive web pages for mobile devices.
  • It is a Free and open-source framework available on https://purecss.io/
  • No dependency on JavaScript and its library.
  • It also supports shadows and colors.
  • A great alternative to Bootstrap.
  • It is a Faster and Easier way for Web-Development.
Primer CSS

Primer CSS

Steps to Install Pure CSS

There are two methods by which we can install and run the code.

Using NPM Install

You can add Pure CSS to your project through npm. This is our recommended way to integrate styles into your project’s build process and toolchain. To run this command, first, need to install the node.

$ npm install purecss --save

Using CDN Link

You can add Pure CSS to your web page via the free unpkg CDN link. Just add the following <link> element into your page <head> section, 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”>

Now let’s understand the working of pure CSS using an example.

Example: The following example shows a simple dropdown menu and a drop-down with different background colors created by using the background-color property of CSS.

HTML 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@2.0.5/build/pure-min.css"
        integrity=
"sha384-LTIDeidl25h2dPxrB2Ekgc9c7sEC3CWGM6HeFmuDNUjX76Ert4Z4IY714dhZHPLd"
        crossorigin="anonymous">
</head>
 
<body>
    <center>
        <h2 style="color:green;">
            GeeksforGeeks
        </h2>
    </center>
 
    <div class="pure-menu pure-menu-horizontal">
        <ul class="pure-menu-list">
            <li class="pure-menu-item pure-menu-selected">
                <a href="#" class="pure-menu-link">Home</a>
            </li>
            <li class="pure-menu-item pure-menu-has-children
                    pure-menu-allow-hover">
                <a href="#" class="pure-menu-link">Courses</a>
                <ul class="pure-menu-children">
                    <li class="pure-menu-item">
                        <a href="#" class="pure-menu-link">
                            Placement 100</a>
                    </li>
                    <li class="pure-menu-item">
                        <a href="#" class="pure-menu-link">
                            Complete Interview Preparation</a>
                    </li>
                    <li class="pure-menu-item">
                        <a href="#" class="pure-menu-link">
                            Android Bootcamp</a>
                    </li>
                </ul>
            </li>
            <li class="pure-menu-item pure-menu-has-children
                pure-menu-allow-hover"
                    style="background-color: green;">
 
                <a href="#" class="pure-menu-link"
                    style="color:white;">
                    Contact US
                </a>
                 
                <ul class="pure-menu-children">
                    <li class="pure-menu-item">
                        <a href="#" class="pure-menu-link">
                            At Office
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href="#" class="pure-menu-link">
                            At Headquarter
                        </a>
                    </li>
                    <li class="pure-menu-item">
                        <a href="#" class="pure-menu-link">
                            Via mail
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
 
</html>

Output:



H
hardiksm73
Improve
Next Article
Pure CSS Introduction

Similar Reads

Pure CSS Horizontal Menu
We come across horizontal menus on almost every website. Pure CSS helps us implement such menus with ease by using the pure-menu class. Pure-menu class by default creates a vertical menu which we can simply convert into a horizontal one by adding the class pure-menu-horizontal. One of the most common uses of a horizontal menu is in navigation bars
2 min read
What are the important features of Pure.CSS ?
Pure.css is just another framework of CSS what separates it apart is its tiny size. It's a mere 3.7kb, hence making it a good contender to compete against Bootstrap. Features: First and foremost, It's FREE.It has several important prebuilt common elements as followsBase: Elements like &lt;p&gt;, &lt;h1...h6&gt;, topography etc.Grids: Responsive gri
4 min read
Pure CSS Responsive Grids
Pure CSS is a free and open-source framework of CSS. CSS Grid Layout is a method designed for the two-dimensional layout of items with rows and columns. It consists of both unresponsive and responsive modules. Responsive design's function is to display the contents of the website automatically across all screen resolutions and sizes, and prevents u
4 min read
Pure CSS Menus Complete Reference
Pure CSS is a popular framework &amp; an open-source tool, developed by Yahoo, for creating responsive websites &amp; web applications by making use of the responsive CSS modules, that help to develop a better user experience with high efficiency. It can be used as an alternative to Bootstrap. The Menus contains the linked pages that help to naviga
1 min read
Design a close button using Pure CSS
The task is to make the close button using Pure CSS. There are two approaches that are discussed below. Approach 1: Create a &lt;div&gt; inside another &lt;div&gt; which has alphabet 'X' in it which helps in displaying the close button. When the "click" event occurs on 'X', then perform the operation. In this example the outer &lt;div&gt; has been
2 min read
How to use buttons with icons using Pure CSS?
Incorporating icon fonts with Pure buttons is a simple task using Pure CSS. Since Pure CSS does not come with its own icon pack, we are using icon fonts from Font Awesome. Before creating buttons with icons first we must include the pure.css file into our HTML file directly from CDN. Then link the Font Awesome CSS files to your page. Example 1: The
2 min read
Design a Vertical and Horizontal menu using Pure CSS
Menu is a very important component in any website. It is a user interface element within a webpage that contains links to other sections of the website. It can be displayed horizontally or vertically before the main content of the webpage or header. For Creating Vertical Menu: Menus are vertical by default in Pure CSS. It is easy to customize becau
2 min read
How to design a dropdown menu using pure CSS ?
The Dropdown Menu is a common UI pattern that we have seen on the web nowadays. It is useful in displaying related information in pieces without overwhelming the user with buttons, texts, and options. Most of the time it is seen inside the navigation bar or headers of websites. With the help of Pure CSS, we can easily create such dropdown menus. Ap
3 min read
Pure CSS Buttons
Buttons are one of the most common UI elements. They made it possible for users to interact with a system and take action by making selections. We can create different types of buttons with the help of Pure CSS. Pure CSS Buttons Classes: Default ButtonsDisabled buttonsPrimary buttonsActive buttonsCustomizing buttons Default Buttons: Add the "pure-b
4 min read
Pure CSS Forms
Forms are essential in websites to collect data or information for various purposes. Using Pure CSS we can create different types of forms. Pure CSS Forms Classes: Default Form Stacked Form Aligned Form Grouped Inputs Default Form: Add the class "pure-form" to any &lt;form&gt; element to create a default form. This form will be inline in nature. Sy
4 min read
Article Tags :
three90RightbarBannerImg