Pure CSS

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

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
News
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
Pure CSS Inputs
Inputs are important in any webpage form. It is used to take various inputs from the user which are essential in collecting data or information. Following are the various types of inputs in Pure CSS: Required InputsDisabled InputsRead Only InputsRounded InputsCheckboxes and Radios Required Inputs: If you want to mark a form control as required add
3 min read
Pure CSS Tables
Introduction: Before starting with Pure we must know the basics of plain CSS. Basically, Pure CSS is a Cascading Style Sheet framework developed by YAHOO. The main reason for developing Pure CSS is used to develop responsive and reactive websites like Bootstrap which is also compatible with mobile devices and it is an open-source CSS framework and
5 min read
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.
2 min read
Pure CSS Grids on Mobile
Pure CSS is a free and open-source CSS framework. It is a set of resources for building dynamic websites and online applications. This was created by Yahoo and is used to create websites that load more quickly, have a better user experience, and look better. It effectively takes the place of Bootstrap. The responsive design was considered when crea
4 min read
Pure CSS Aligned Form
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, more beautiful, and more responsive websites. It can be used as an alternative to Bootstrap. Pure CSS Aligned Form is a type of HTML form that is used to
2 min read
Pure CSS using Google AMP
Pure CSS refers to the use of Cascading Style Sheets (CSS) to control the appearance and layout of a web page without relying on any scripting language, such as JavaScript. The use of Pure CSS helps keep web pages lightweight and fast-loading. It can also improve accessibility by allowing users to control the presentation of a page through their br
4 min read
Wave inside Text using pure CSS
Wave inside Text is one of the coolest text effects that is used for text decoration on websites. This animation is an extraordinary illustration of a wave inside the text that grabs your eye. This effect can be used to create waves inside the text, UI, and water wave effect on Text. Approach: The methodology is to put animation on 2nd child using
3 min read
Pure CSS Installation and Uses
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 way
2 min read
Pure CSS Dropdown
Pure CSS is a CSS framework. 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. Dropdowns are one of the most important parts of an interactive website. A
2 min read
Pure CSS Images
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. Pure CSS provides class pure-img that makes the image responsive. This
2 min read
Pure CSS Rounded Inputs
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. Pure CSS provides a "pure-input-rounded" class name is used to display
1 min read
Pure CSS Responsive Horizontal-to-Vertical Menu Layout
To create a responsive horizontal-to-vertical menu layout using only CSS, you can use media queries to apply different styles to the menu based on the width of the viewport. Example 1: This will create a horizontal menu with evenly distributed menu items on larger screens, and a vertical menu with full-width menu items on smaller screens. You can a
3 min read
Pure.CSS Required Inputs
In some cases when we ask someone to fill a form and few things are optional and few things are a must to fill in that form. In that case, we can use the HTML required in Pure CSS as well. This attribute works with other types of input like radio, checkbox, number, text, etc. Syntax: &lt;input required&gt; Example 1: In this example, we will use th
1 min read
Pure CSS Icons
In this article, we will learn how to use icons in Pure CSS &amp; will understand its implementation through examples. Pure CSS does not have any icon component, there are so many icon packages available that can be used in Pure CSS. In all of those icon packages, there are 3 most and easy use icons packages that are described below: Font Awesome I
3 min read
Pure CSS Disabled Inputs
In this article, we will see how to disable the input field in Pure CSS. In some cases, when we ask someone to fill a form few things are activated as well a few things are disabled for their previous choices. In that case, we can use HTML disabled in Pure CSS as well. This attribute works with other types of input like radio, checkbox, number, tex
2 min read
Pure CSS Checkboxes and Radio Buttons
In Pure CSS, we do not have any particular layout for Checkboxes and Radio Button type inputs. But we can use those types of inputs by using the Pure CSS classes. The below-mentioned classes are used for checkboxes and radio buttons. Checkbox: To use checkboxes, we can apply the input tag inside of a label tag and use the pure-checkbox class inside
2 min read
Pure CSS Grids
While creating a genuine responsive website layout the grid system is a crucial tool for web developers. A grid is a set of classes that helps us to divide the width of the screen or display into smaller units and make the website look responsive on various devices. Pure.CSS also comes up with such a grid system. Pure CSS Grids Classes: Grid Classe
4 min read
Pure CSS Menus
In this article we will learn about Pure CSS Menus, Menus are the main tools for visitors to navigate throughout a website. Pure.CSS comes up with very simple vertical and horizontal menus that can be easily customized by the developer. Pure CSS Menu Classes: Vertical MenuHorizontal MenuSelected and Disabled Items Inside a MenuDropdown MenuVertical
5 min read
Pure CSS Vertical Menu with Submenus
Menus are the main tools for visitors to navigate throughout a website. Pure.CSS comes up with very simple vertical and horizontal menus that can be easily customized by the developer. Vertical Menu with Submenus is as similar as nested vertical menu. Pure CSS Vertical Menu Classes: pure-menu-heading: It is the class that is added for the headings
5 min read
What to understand Pure CSS Responsive Design ?
In this article, we will learn about Pure.CSS responsive design. It is a collection of responsive CSS modules that can be included in any web application to create faster, beautiful, and responsive websites. In simple words, it is a framework of CSS that is used to build a beautiful and responsive website in less time. Pure CSS is a CSS framework t
3 min read
Article Tags :