Pure.CSS Overview

What is Pure?

Pure is a Cascading Style Sheet (CSS) developed by YAHOO. It helps in creating faster, beautiful, and responsive websites.
Some of its salient features are as follows:

• In-built responsive designing
• Standard CSS with minimal footprint
• Set of small, responsive CSS modules
• Free to use
  

Pure.CSS Environment Setup

How to Use PURE.CSS?

There are two ways to use Pure:

• Local Installation - You can download the pure.css file on your local machine and include it in your HTML code.
• CDN Based Version - You can include the pure.css file into your HTML code directly from the Content Delivery Network (CDN).
  

Pure.CSS Responsive Design

PURE.CSS has several special classes to create a responsive design.

S.N.	Class Name & Description
1	.pure-u-* Sets the container to occupy required space on any device.
2	.pure-u-sm-* Sets the container to occupy required space on a devices with width ≥ 568px.
3	.pure-u-md-*

Pure.CSS Grids

PURE.CSS provides concept of Pure Grid with two types of classes, pure-g, a grid class and unit classes, pure-u-*. Following are the rules to use Pure Grids.

1. Widths of Units are in fractions. For example, pure-u-1-2 represents 1/2 or 50% width, pure-u-2-5 represents 2/5 or 40% width and so on.
   

Pure.CSS Forms

PURE.CSS has a very beautiful and responsive CSS for form designing. The following CSS are used:

S.N.	Class Name & Description
1	pure-form Represents a compact inline form.
2	pure-form-stacked Represents a stacked form with input elements below the labels. To be used with pure-form.
3	pure-form-aligned

Pure.CSS Buttons

PURE.CSS has a very beautiful and responsive CSS for customizing the look of a button. The following CSS are used:

S.N.	Class Name & Description
1	pure-button Represents a standard button. Can be used to style a link and button as well.
2	pure-button-disabled

Pure.CSS Tables

PURE.CSS can be used to display different types of tables using various styles over pure-table.

S.N.	Class Name & Description
1	pure-table Represents a basic table with any a default padding, border and an emphasized header.
2	pure-table-bordered Draws a table with a border across rows.

Pure.CSS Images

Pure.CSS provides options to display images in responsive way using pure-image as the main class.

S.N.	Class Name & Description
1	pure-img Represents a basic styled image without any border. Image grows and shrinks with the content maintaining the correct ratio

Pure.CSS Icons

PURE.CSS supports the following popular icon libraries:

• Font Awesome Icons
• Google Material Icons
• Bootstrap Icons

Usage

To use an icon, put the name of the icon in the class of an HTML <i> element.

Pure.CSS Quick Guide

Pure.CSS Overview

What is Pure?

Pure is a Cascading Style Sheet (CSS) developed by YAHOO. It helps in creating faster, beautiful, and responsive websites.
Some of its salient features are as follows:

• In-built responsive designing
• Standard CSS with minimal footprint
• Set of small, responsive CSS modules
• Free to use
  

Pure.CSS Useful Resources

If you want to list down your website, book or any other resource on this page then please contact at webmaster@tutorialspoint.com

Websites on Pure.CSS

• Pure.CSS - Pure.CSS official home page

Discuss Pure.CSS

Pure is a Cascading Style Sheet (CSS) developed by YAHOO. It helps in creating faster, beautiful, and responsive websites. It is very space savvy and is very tiny in size comparable to 4 KB.

---