Login Register

Pure.CSS Tutorial

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 design
  • Standard CSS with minimal footprint
  • Set of small, responsive CSS modules
  • Free to use

Responsive Design

Pure has an in-built responsive design such that the website created using Pure will redesign itself as per the device size. Pure has a 12 column mobile-first fluid grid that supports responsive classes for small, large, and medium screen sizes.

Pure classes are created in such a way that the website can fit any screen size. The websites created using Pure are fully compatible with PC, tablets, and mobile devices.

Standard CSS

Pure uses standard CSS only and it is very easy to learn. There is no dependency on any external JavaScript library such as jQuery.

Extensible

Pure is by design very minimal and flat. It is designed considering the fact that it is much easier to add new CSS rules than to overwrite existing CSS rules. By adding a few lines of CSS, Pure's appearance can be customized to work with an existing web project.

It supports shadows and bold colors. The colors and shades remain uniform across various platforms and devices. And most important of all, it is absolutely free to use.

Pure.CSS - Environment Setup

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

Local Installation

  • Go to https://purecss.io/start/ to download the latest version available.

  • Place the downloaded pure-min.css file in a directory of your website, e.g. /css.

Example

You can include the css file in your HTML file as follows −

Live Demo

   
      </span><span class="pln">The PURE.CSS Example</span><span class="tag">
       name = "viewport" content = "width = device-width, initial-scale = 1">
       rel="stylesheet" href="pure-min.css">
	  
      
	  
   
  
  
  
       class="grids-example">
          class="pure-g">
             class="pure-u-1-3">

First Column

class="pure-u-1-3">

Second Column

class="pure-u-1-3">

Third Column

It will produce the following result −

CDN Based Version

You can include the pure.css file into your HTML code directly from the Content Delivery Network (CDN). yui.yahooapis.com provides content for the latest version.

We are using yui.yahooapis.com CDN version of the library throughout this tutorial.

Example

Now let us rewrite the above example using pure.css from PureCSS.io CDN.

Live Demo

   
      </span><span class="pln">The PURE.CSS Example</span><span class="tag">
       name = "viewport" content = "width = device-width, initial-scale = 1">
       rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	  
      
   
  
   
       class = "grids-example">
          class = "pure-g">
             class = "pure-u-1-3">

First Column

class = "pure-u-1-3">

Second Column

class = "pure-u-1-3">

Third Column

It will produce the following result −

Pure.CSS - Responsive Design

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

Sr.No. 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 device with width ≥ 568px.

3

.pure-u-md-*

Sets the container to occupy required space on a device with width ≥ 768px.

4

.pure-u-lg-*

Sets the container to occupy required space on a device with width ≥ 1024px.

5

.pure-u-xl-*

Sets the container to occupy required space on a device with width ≥ 1280px.

In the following example, we're going to create a responsive grid with a row having four columns. The columns should stack on small screens, should take up width: 50% on medium-sized screens, and should take up width: 25% on large screens.

This is done by adding .pure-u-1 class for small screens, .pure-u-md-1-2 for mediumsized screens, and .pure-u-lg-1-4 for large screens. Resize the page to see the grid response to the screen size.

Example

purecss_responsive_design.htm

Live Demo

   
      </span><span class="pln">The PURE.CSS Containers</span><span class="tag">
       name = "viewport" content = "width = device-width, initial-scale = 1">
       rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
       rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

      
   
    
   
       class = "grids-example">       	  
          class = "pure-g">
             class = "pure-u-1-1">
                class = "graybox">
                  

These four columns should stack on small screens, should take up width: 50% on medium-sized screens, and should take up width: 25% on large screens.

class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> class = "graybox">

First Column

class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> class="graybox">

Second Column

class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> class="graybox">

Third Column

class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> class = "graybox">

Fourth Column

class = "grids-example"> class = "pure-g"> class = "pure-u-1"> class = "graybox">

This column is to occupy the complete space of a row.

class = "grids-example"> class = "pure-g"> class = "pure-u-2-5"> class = "graybox">

This column is to occupy the two-fifth of the space of a row.

class = "grids-example"> class = "pure-g"> class = "pure-u-3-5"> class = "graybox">

This column is to occupy the three-fifth of the space of a row.

class = "grids-example"> class = "pure-g"> class = "pure-u-1-3"> class = "graybox">

Column 1: This column is to occupy the one-third of the space of a row on all devices.

class = "pure-u-1-3"> class = "graybox">

Column 2: This column is to occupy the one-third of the space of a row on all devices.

class = "pure-u-1-3"> class = "graybox">

Column 3: This column is to occupy the one-third of the space of a row on all devices.

Result

Verify the result.

Pure.CSS - Grids

Pure.CSS provides the 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.

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

  • Children of Pure Grid (element with pure-g class) must be using pure-u or pure-u-* classnames.

  • All content should to be a part of a grid unit to be rendered properly.

Grid Unit Sizes

Pure Grid comes with 5th and 24th unit sizes. Following illustrations show the examples of some of the available units, which can be appended to pure-ui-. For example, to create a cell of 50% width, you can use a css style pure-ui-1-2.

5th Based Units

purecss_5th_based.htm

Live Demo

   
      </span><span class="pln">The PURE.CSS Grid</span><span class="tag">
       name="viewport" content="width=device-width, initial-scale=1">
       rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
       rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
      
   
	
    
	
       class="grids-example">       	  
          class="grid-unit  pure-g">
             class="grid-unit-width pure-u">1-5
             class="grid-unit-details pure-u-1">
                class="pure-g">
                   class="grid-unit-bar pure-u-1-5">
               
            
         
         
          class="grid-unit  pure-g">
             class="grid-unit-width pure-u">2-5
             class="grid-unit-details pure-u-1">
                class="pure-g">
                   class="grid-unit-bar pure-u-2-5">
               
            
         
         
          class="grid-unit  pure-g">
             class="grid-unit-width pure-u">3-5
             class="grid-unit-details pure-u-1">
                class="pure-g">
                   class="grid-unit-bar pure-u-3-5">
               
            
         
         
          class="grid-unit pure-g">
             class="grid-unit-width pure-u">4-5
             class="grid-unit-details pure-u-1">
                class="pure-g">
                   class="grid-unit-bar pure-u-4-5">
               
            
         
         
          class="grid-unit pure-g">
             class="grid-unit-width pure-u">1
             class="grid-unit-details pure-u-1">
                class="pure-g">
                   class="grid-unit-bar pure-u-1">
               
            
         
         
          class="grid-unit pure-g">
             class="grid-unit-width pure-u">1-1
             class="grid-unit-details pure-u-1">
                class="pure-g">
                   class="grid-unit-bar pure-u-1-1">
               
            
         
      	
   

Result

Verify the result.

24th Based Units

purecss_24th_based.htm

Live Demo

   
      </span><span class="pln">The PURE.CSS Grid</span><span class="tag">
       name = "viewport" content = "width = device-width, initial-scale = 1">
       rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
       rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
      
   
	
    
	
       class = "grids-example">       	  
          class = "grid-unit  pure-g">
             class = "grid-unit-width pure-u">1-24
             class = "grid-unit-details pure-u-1">
			       class = "pure-g">
                   class = "grid-unit-bar pure-u-1-24">
               
            
         
		 
          class = "grid-unit  pure-g">
             class = "grid-unit-width pure-u">1-12
             class = "grid-unit-details pure-u-1">
                class = "pure-g">
                   class = "grid-unit-bar pure-u-1-12">
               
            
         
		 
          class = "grid-unit  pure-g">
             class = "grid-unit-width pure-u">2-24
             class = "grid-unit-details pure-u-1">
                class = "pure-g">
                   class = "grid-unit-bar pure-u-2-24">
               
            
         
		 
          class = "grid-unit  pure-g">
             class = "grid-unit-width pure-u">3-24
             class = "grid-unit-details pure-u-1">
                class = "pure-g">
                   class = "grid-unit-bar pure-u-3-24">
               
            
         
		 
          class = "grid-unit  pure-g">
             class = "grid-unit-width pure-u">1-8
             class = "grid-unit-details pure-u-1">
                class = "pure-g">
                   class = "grid-unit-bar pure-u-1-8">
               
            
         
		 
          class = "grid-unit  pure-g">
             class = "grid-unit-width pure-u">4-24
             class = "grid-unit-details pure-u-1">
                class = "pure-g">
                   class = "grid-unit-bar pure-u-4-24">
               
            
         
		 
          class = "grid-unit  pure-g">
             class = "grid-unit-width pure-u">1-6
             class = "grid-unit-details pure-u-1">
                class = "pure-g">
                   class = "grid-unit-bar pure-u-1-6">
               
            
         
		 
          class = "grid-unit  pure-g">
             class = "grid-unit-width pure-u">5-24
             class = "grid-unit-details pure-u-1">
                class = "pure-g">
                   class = "grid-unit-bar pure-u-5-24">
               
            
         
		 
          class = "grid-unit  pure-g">
             class = "grid-unit-width pure-u">1-4
             class = "grid-unit-details pure-u-1">
                class = "pure-g">
                   class = "grid-unit-bar pure-u-1-4">
               
            
         
		 
          class = "grid-unit  pure-g">
             class = "grid-unit-width pure-u">6-24
             class = "grid-unit-details pure-u-1">
                class = "pure-g">
                   class = "grid-unit-bar pure-u-6-24">
               
            
         
		 
          class = "grid-unit  pure-g">
             class = "grid-unit-width pure-u">7-24
             class = "grid-unit-details pure-u-1">
                class = "pure-g">
                   class = "grid-unit-bar pure-u-7-24">
               
            
         
		 
          class = "grid-unit  pure-g">
             class = "grid-unit-width pure-u">1-3
             class = "grid-unit-details pure-u-1">
                class = "pure-g">
                   class = "grid-unit-bar pure-u-1-3">
               
            
         
		 
          class = "grid-unit  pure-g">
             class = "grid-unit-width pure-u">22-24
             class = "grid-unit-details pure-u-1">
                class = "pure-g">
                   class = "grid-unit-bar pure-u-22-24">
               
            
         
		 
          class = "grid-unit  pure-g">
             class = "grid-unit-width pure-u">23-24
             class = "grid-unit-details pure-u-1">
                class = "pure-g">
                   class = "grid-unit-bar pure-u-23-24">
               
            
         
		 
          class = "grid-unit  pure-g">
             class = "grid-unit-width pure-u">1
             class ="grid-unit-details pure-u-1">
                class="pure-g">
                   class="grid-unit-bar pure-u-1">
               
            
         
		 
          class="grid-unit  pure-g">
             class="grid-unit-width pure-u">1-1
             class="grid-unit-details pure-u-1">
                class="pure-g">
                   class="grid-unit-bar pure-u-1-1">
               
            
         
		 
          class="grid-unit  pure-g">
             class="grid-unit-width pure-u">24-24
             class="grid-unit-details pure-u-1">
                class="pure-g">
                   class="grid-unit-bar pure-u-24-24">
               
            
         
      	
   

Result

Verify the result.

Pure.CSS - Forms

Pure.CSS has a very beautiful and responsive CSS for form designs. The following CSS are used −

Sr.No. 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

Represents an aligned form with input elements below the labels. To be used with pure-form.

4

pure-input-rounded

Displays a form control with rounded corners

5

pure-button

Beautifies a button.

6

pure-checkbox

Beautifies a checkbox.

7

pure-radio

Beautifies a radio.

Example

purecss_forms.htm

Live Demo

   
      </span><span class="pln">The PURE.CSS Forms</span><span class="tag">
       name = "viewport" content = "width = device-width, initial-scale = 1">
       rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   
   
    
       class = "pure-form pure-form-aligned">
         
class = "pure-control-group"> for = "name">Username id = "name" type = "text" placeholder = "Username" required> class = "pure-control-group"> for = "email">Email id = "email" type = "text" placeholder = "Email Address" required> class = "pure-control-group"> for = "comments">Comments id = "comments" type="text" placeholder = "Comments"> class = "pure-controls"> for = "married" class = "pure-checkbox"> id = "married" type = "checkbox" checked = "checked"> Married
for = "single" class = "pure-checkbox"> id = "single" type = "checkbox"> Single
for = "dontknow" class = "pure-checkbox"> id = "dontknow" type = "checkbox" disabled> Don't know (Disabled)

class = "pure-controls"> for = "male" class = "pure-radio"> id = "male" type = "radio" name = "gender" value = "male" checked> Male
for = "female" class= "pure-radio"> id = "female" type = "radio" name = "gender" value = "female"> Female
for = "dontknow1" class = "pure-radio"> id = "dontknow1" type = "radio" name = "gender" value = "female" disabled> Don't know (Disabled) type = "submit" class = "pure-button pure-button-primary">Submit

Result

Verify the result.

Pure.CSS - Buttons

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

Sr.No. 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

Represents a disabled button. To be used along with pure-button.

3

pure-button-active

Represents a pressed button. To be used along with pure-button.

Example

purecss_buttons.htm

Live Demo

   
      </span><span class="pln">The PURE.CSS Forms</span><span class="tag">
       name = "viewport" content = "width = device-width, initial-scale = 1">
       rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      	  	  
   
	
    
      

Standard Buttons

class = "pure-button">Click Me class = "pure-button pure-button-active">Click Me class = "pure-button pure-button-disabled">I am disabled

Links as Buttons

class = "pure-button">Link class = "pure-button pure-button-active">Link class = "pure-button pure-button-disabled">Disabled Link

Primary Button

class = "pure-button pure-button-primary">Submit

Customized button

class = "pure-button success">Success class = "pure-button error">Error class = "pure-button warning">Warning class = "pure-button secondary">Secondary

Different Sized button

class = "pure-button xsmall">Extra Small class = "pure-button small">Small class = "pure-button large">Large class = "pure-button xlarge">Extra Large

Result

Verify the result.

Pure.CSS - Tables

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

Sr.No. 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.

3

pure-table-horizontal

Draws a table with horizontal lines.

4

pure-table-striped

Displays a stripped table.

5

pure-table-odd

If applied on every other tr,changes the background of the row and creates a zebra-styled effect.

Example

purecss_tables.htm

Live Demo

   
      </span><span class="pln">The PURE.CSS Tables</span><span class="tag">
       name = "viewport" content = "width = device-width, initial-scale = 1">
       rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   
   
    
      

Tables Demo


Simple Table

class = "pure-table"> Student Class Grade Mahesh Parashar VI A Rahul Sharma VI B Mohan Sood VI A

Bordered Table

class="pure-table pure-table-bordered"> < th>Student Class Grade Mahesh Parashar VI A Rahul Sharma VI B Mohan Sood VI A

Table with Horizontal Borders

class="pure-table pure-table-horizontal"> Student Class Grade Mahesh Parashar VI A Rahul Sharma VI B Mohan Sood VI A

Stripped Table

class = "pure-table pure-table-striped"> Student Class Grade Mahesh Parashar VI A Rahul Sharma VI B Mohan Sood VI A

Result

Verify the result.

Pure.CSS - Images

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

Sr.No. 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.

Example

purecss_images.htm

Live Demo

   
      </span><span class="pln">The W3.CSS Images</span><span class="tag">
       name = "viewport" content = "width=device-width, initial-scale=1">
       rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   
   
    
      

Images Demo


class = "pure-g"> class = "pure-u-1-4 pure-u-lg-1-8"> class = "pure-img" src = "html5-mini-logo.jpg" alt="html5"> class = "pure-u-1-4 pure-u-lg-1-8"> class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5"> class = "pure-u-1-4 pure-u-lg-1-8"> class = "pure-img" src = "html5-mini-logo.jpg" alt="html5"> class = "pure-u-1-4 pure-u-lg-1-8"> class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5"> class = "pure-u-1-4 pure-u-lg-1-8"> class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5"> class = "pure-u-1-4 pure-u-lg-1-8"> class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5"> class = "pure-u-1-4 pure-u-lg-1-8"> class = "pure-img" src = "html5-mini-logo.jpg" alt="html5"> class = "pure-u-1-4 pure-u-lg-1-8"> class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">

Result

Verify the result.

Pure.CSS - Icons

Pure.CSS supports the following popular icon libraries −

  • Font Awesome Icons
  • Google Material Icons
  • Bootstrap Icons

Usage

To use an icon, place the name of the icon in the class of an HTML element.

Example

purecss_icons.htm

Live Demo


   
   
      </span><span class="pln">The PURE.CSS Icons</span><span class="tag">
	  
       name = "viewport" content = "width = device-width, initial-scale = 1">
	  
       rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	  
       rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
	  
       rel = "stylesheet" href="https://fonts.googleapis.com/icon?family = Material+Icons">
	  
       rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	  
      
	  
   
   
    
      

Icons Demo


Font Awesome Icon Demo

class = "fa fa-cloud xsmall">
class = "fa fa-cloud small"> class = "fa fa-cloud"> class = "fa fa-cloud large"> class = "fa fa-cloud xlarge">

Google Material Design Icon Demo

class = "material-icons xsmall">cloud class = "material-icons small">cloud class = "material-icons large">cloud class = "material-icons xlarge">cloud class = "material-icons">cloud

Bootstrap Icon Demo

class = "glyphicon glyphicon-cloud xsmall"> class = "glyphicon glyphicon-cloud small"> class = "glyphicon glyphicon-cloud"> class = "glyphicon glyphicon-cloud large"> class = "glyphicon glyphicon-cloud xlarge">

Button with Icon Demo

class = "pure-button"> class = "fa fa-cog"> Settings class = "pure-button" href = "#"> class = "fa fa-shopping-cart fa-lg"> Checkout

Result

Verify the result.