Wednesday, 25 January 2017

Pure CSS

Pure.CSS Tutorial

Prerequisites

Before proceeding with this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, Document Object Model (DOM), and any text editor. In addition, it will help if you know how web-based applications work.

<html>
   <head>
      <title>The PURE.CSS Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   
   <style>
  .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;   
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;     
   }
   </style>
   
  </head>
  
  
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body></html>

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

Responsive Design

  • Pure has in-built responsive designing so 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

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

Local Installation

  • Go to http://purecss.io/start/ to download the latest version available.
  • Then, put the downloaded pure-min.css file in a directory of your website, e.g. /css.

Example

Now you can include the css file in your HTML file as follows −
<html>
   <head>
      <title>The PURE.CSS Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="pure-min.css">
   
   <style>
  .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;   
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;     
   }
   </style>
   
  </head>
  
  
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>
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.
<html>
   <head>
      <title>The PURE.CSS Example</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   
   <style>
  .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;   
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;     
   }
   </style>
   
  </head>
  
  
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>
It will produce the following result −

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-*
Sets the container to occupy required space on a devices with width ≥ 768px.
4.pure-u-lg-*
Sets the container to occupy required space on a devices with width ≥ 1024px.
5.pure-u-xl-*
Sets the container to occupy required space on a devices with width ≥ 1280px.
In below example, we're going to create a responsive grid with a row with 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 the .pure-u-1 class for small screens, .pure-u-md-1-2 for medium-sized screens, and .pure-u-lg-1-4 for large screens. Resize the page to see the grid respond to the screen size.

Example

purecss_responsive_design.htm
<html>
   <head>
      <title>The PURE.CSS Containers</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;     
         } 

         .graybox {
            background: rgb(240, 240, 240);
            border: 1px solid #ddd;   
         }  
      </style>
   </head>
   <body>         
      <div class="grids-example">          
         <div class="pure-g">
      <div class="pure-u-1-1"><div class="graybox"><p>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.</p></div></div>
            <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="graybox"><p>First Column</p></div></div>
            <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="graybox"><p>Second Column</p></div></div>
            <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="graybox"><p>Third Column</p></div></div>
            <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="graybox"><p>Fourth Column</p></div></div>
         </div>
      </div>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1"><div class="graybox"><p>This column is to occupy the complete space of a row.</p></div></div>
         </div>
      </div>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-2-5"><div class="graybox"><p>This column is to occupy the two-fifth of the space of a row.</p></div></div>
         </div>
      </div>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-3-5"><div class="graybox"><p>This column is to occupy the three-fifth of the space of a row.</p></div></div>
         </div>
      </div>   
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><div class="graybox"><p>Column 1: This column is to occupy the one-third of the space of a row on all devices.</p></div></div>
            <div class="pure-u-1-3"><div class="graybox"><p>Column 2: This column is to occupy the one-third of the space of a row on all devices.</p></div></div>
            <div class="pure-u-1-3"><div class="graybox"><p>Column 3: This column is to occupy the one-third of the space of a row on all devices.</p></div></div>
         </div>
         </div> 
   </body>
</html>

Result

Verify the result.

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.
  2. Children of Pure Grid (element with pure-g class) must be using pure-u or pure-u-* classnames.
  3. 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 shows 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.

5ths-Based Units

purecss_5th_based.htm
<html>
   <head>
      <title>The PURE.CSS Grid</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;     
         } 
         .grid-unit {
            margin: 0.25em 0;
            padding-left: 4.5em;
         }
         .grid-unit .grid-unit-width {
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
         }
         .grid-unit-bar {
            height: 2em;
            background: #eee;
         }
      </style>
   </head>
   <body>         
      <div class="grids-example">          
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-5"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">2-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-2-5"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">3-5</div>
            <div class="grid-unit-details pure-u-1">
              <div class="pure-g">
                  <div class="grid-unit-bar pure-u-3-5"></div>
            </div>
         </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">4-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-4-5"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-1"></div>
               </div>
            </div>
         </div>
      </div> 
   </body>
</html>

24ths-Based Units

purecss_24th_based.htm
<html>
   <head>
      <title>The PURE.CSS Grid</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;     
         } 
         .grid-unit {
            margin: 0.25em 0;
            padding-left: 4.5em;
         }
         .grid-unit .grid-unit-width {
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
         }
         .grid-unit-bar {
            height: 2em;
            background: #eee;
         }
      </style>
   </head>
   <body>         
      <div class="grids-example">          
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-24</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-24"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-12</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-12"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">2-24</div>
            <div class="grid-unit-details pure-u-1">
              <div class="pure-g">
                  <div class="grid-unit-bar pure-u-2-24"></div>
            </div>
         </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">3-24</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-3-24"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-8</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-8"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">4-24</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-4-24"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-6</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-6"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">5-24</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-5-24"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-4</div>
            <div class="grid-unit-details pure-u-1">
              <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-4"></div>
            </div>
         </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">6-24</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-6-24"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">7-24</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-7-24"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-3</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-3"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">22-24</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-22-24"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">23-24</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-23-24"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-1"></div>
               </div>
            </div>
         </div>
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">24-24</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-24-24"></div>
               </div>
            </div>
         </div>
      </div> 
   </body>
</html>

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
1pure-form
Represents a compact inline form.
2pure-form-stacked
Represents a stacked form with input elements below the labels. To be used with pure-form.
3pure-form-aligned
Represents an aligned form with input elements below the labels. To be used with pure-form.
4pure-input-rounded
Displays a form control with rounded corners
5pure-button
Beautifies a button.
6pure-checkbox
Beautifies a checkbox.
7pure-radio
Beautifies a radio.

Example

purecss_forms.htm
<html>
   <head>
      <title>The PURE.CSS Forms</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   <body> 
      <form class="pure-form pure-form-aligned">
         <fieldset>
            <div class="pure-control-group">      
               <label for="name">Username</label>
               <input id="name" type="text" placeholder="Username" required>          
            </div>
            <div class="pure-control-group">      
               <label for="email">Email</label>
               <input id="email" type="text" placeholder="Email Address" required>       
            </div>
            <div class="pure-control-group">      
               <label for="comments">Comments</label>
               <input id="comments" type="text" placeholder="Comments">       
            </div>
            <div class="pure-controls">
               <label  for="married" class="pure-checkbox">
                  <input id="married" type="checkbox" checked="checked">
                  Married
               </label>
               <br>
               <label  for="single" class="pure-checkbox">
                  <input id="single" type="checkbox">
                  Single
               </label>
               <br>
               <label for="dontknow" class="pure-checkbox">
                  <input id="dontknow" type="checkbox" disabled>
                  Don't know (Disabled)
               </label>               
               <br>
               <br>
            </div>
            <div class="pure-controls">
               <label for="male" class="pure-radio">
                  <input id="male" type="radio" name="gender" value="male" checked>
                  Male
               </label>
               <br>
               <label for="female" class="pure-radio">
                  <input id="female" type="radio" name="gender" value="female">
                  Female
               </label>
               <br>
               <label for="dontknow1" class="pure-radio">
                  <input id="dontknow1" type="radio" name="gender" value="female" disabled>
                  Don't know (Disabled)
               </label>
               <button type="submit" class="pure-button pure-button-primary">Submit</button>
            </div>
         </fieldset>
      </form>       
   </body>
</html>

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:
S.N.Class Name & Description
1pure-button
Represents a standard button. Can be used to style a link and button as well.
2pure-button-disabled
Represents a disabled button. To be used along with pure-button.
3pure-button-active
Represents a pressed button. To be used along with pure-button.

Example

purecss_buttons.htm
<html>
   <head>
      <title>The PURE.CSS Forms</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <style>
         .success,
         .error,
         .warning,
         .secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
         }
         
         .success {
            background: rgb(28, 184, 65); /* green */
         }

         .error {
            background: rgb(202, 60, 60); /* maroon */
         }

         .warning {
            background: rgb(223, 117, 20); /* orange */
         }

         .secondary {
            background: rgb(66, 184, 221); /* light blue */
         }

         .xsmall {
            font-size: 70%;
         }

         .small {
            font-size: 85%;
         }

         .large {
            font-size: 110%;
         }

         .xlarge {
            font-size: 125%;
         }
      </style>      
   </head>
   <body> 
      <h2>Standard Buttons</h2>
      <button class="pure-button">Click Me</button>
      <button class="pure-button pure-button-active">Click Me</button>
      <button class="pure-button pure-button-disabled">I am disabled</button>

      <h2>Links as Buttons</h2>
      <a class="pure-button">Link</a>
      <a class="pure-button pure-button-active">Link</a>
      <a class="pure-button pure-button-disabled">Disabled Link</a>

      <h2>Primary Button</h2>
      <a class="pure-button pure-button-primary">Submit</a>    

      <h2>Customized button</h2>
      <button class="pure-button success">Success</button>
   <button class="pure-button error">Error</button>
   <button class="pure-button warning">Warning</button>
   <button class="pure-button secondary">Secondary</button>
   
   <h2>Different Sized button</h2>
      <button class="pure-button xsmall">Extra Small</button>
   <button class="pure-button small">Small</button>
   <button class="pure-button large">Large</button>
   <button class="pure-button xlarge">Extra Large</button>
   </body>
</html>

Result

Verify the result.

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
1pure-table
Represents a basic table with any a default padding, border and an emphasized header.
2pure-table-bordered
Draws a table with a border across rows.
3pure-table-horizontal
Draws a table with horizontal lines.
4pure-table-striped
Displays a stripped table.
5pure-table-odd
If applied on every other tr,changes the background of the row and creates a zebra-styled effect.

Example

purecss_tables.htm
<html>
   <head>
      <title>The PURE.CSS Tables</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   <body> 
      <h2>Tables Demo</h2>
   <hr/>
   <h3>Simple Table</h3>
      <table class="pure-table">
         <thead>
            <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
         </thead>
         <tbody>
            <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
            <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
            <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
         </tbody>
      </table>
      <h3>Bordered Table</h3>
      <table class="pure-table pure-table-bordered">
         <thead>
            <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
         </thead>
         <tbody>
            <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
            <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
            <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
         </tbody>
      </table>     
   <h3>Table with Horizontal Borders</h3>
      <table class="pure-table pure-table-horizontal">
         <thead>
            <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
         </thead>
         <tbody>
            <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
            <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
            <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
         </tbody>
      </table>     
   <h3>Stripped Table</h3>
      <table class="pure-table pure-table-striped">
         <thead>
            <tr><th>Student</th><th>Class</th><th>Grade</th></tr>
         </thead>
         <tbody>
            <tr><td>Mahesh Parashar</td><td>VI</td><td>A</td></tr>
            <tr><td>Rahul Sharma</td><td>VI</td><td>B</td></tr>
            <tr><td>Mohan Sood</td><td>VI</td><td>A</td></tr>
         </tbody>
      </table>
   </body>
</html>

Result

Verify the result.

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
1pure-img
Represents a basic styled image without any border. Image grows and shrinks with the content maintaining the correct ratio

Example

purecss_images.htm
<html>
   <head>
      <title>The W3.CSS Images</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   <body> 
      <h2>Images Demo</h2>
      <hr/>   
      <div class="pure-g">   
         <div class="pure-u-1-4 pure-u-lg-1-8">
            <img class="pure-img" src="html5-mini-logo.jpg" alt="html5">
         </div>
         <div class="pure-u-1-4 pure-u-lg-1-8">
            <img class="pure-img" src="html5-mini-logo.jpg" alt="html5">
         </div>
         <div class="pure-u-1-4 pure-u-lg-1-8">
            <img class="pure-img" src="html5-mini-logo.jpg" alt="html5">
         </div>
         <div class="pure-u-1-4 pure-u-lg-1-8">
            <img class="pure-img" src="html5-mini-logo.jpg" alt="html5">
         </div>
         <div class="pure-u-1-4 pure-u-lg-1-8">
            <img class="pure-img" src="html5-mini-logo.jpg" alt="html5">
         </div>
         <div class="pure-u-1-4 pure-u-lg-1-8">
            <img class="pure-img" src="html5-mini-logo.jpg" alt="html5">
         </div>
         <div class="pure-u-1-4 pure-u-lg-1-8">
            <img class="pure-img" src="html5-mini-logo.jpg" alt="html5">
         </div>
         <div class="pure-u-1-4 pure-u-lg-1-8">
            <img class="pure-img" src="html5-mini-logo.jpg" alt="html5">
         </div>   
      </div>
   </body>
</html>

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, put the name of the icon in the class of an HTML <i> element.

Example

purecss_icons.htm
<html>
   <head>
      <title>The PURE.CSS Icons</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <style>  
         .xsmall {
            font-size: 70%;
         }
         .small {
            font-size: 85%;
         }
         .large {
            font-size: 110%;
         }
         .xlarge {
            font-size: 125%;
         }
      </style>
   </head>
   <body> 
      <h2>Icons Demo</h2>
      <hr/>
      <h3>Font Awesome Icon Demo</h3>
      <i class="fa fa-cloud xsmall"></i>
      <i class="fa fa-cloud small"></i>
   <i class="fa fa-cloud"></i>
      <i class="fa fa-cloud large"></i>
      <i class="fa fa-cloud xlarge"></i>
      <h3>Google Material Design Icon Demo</h3>      
      <i class="material-icons xsmall">cloud</i> 
      <i class="material-icons small">cloud</i>
      <i class="material-icons large">cloud</i>
      <i class="material-icons xlarge">cloud</i>
   <i class="material-icons">cloud</i>
      <h3>Bootstrap Icon Demo</h3>
      <i class="glyphicon glyphicon-cloud xsmall"></i>
      <i class="glyphicon glyphicon-cloud small"></i>
   <i class="glyphicon glyphicon-cloud"></i>
      <i class="glyphicon glyphicon-cloud large"></i>
      <i class="glyphicon glyphicon-cloud xlarge"></i>
   <h3>Button with Icon Demo</h3>
      <button class="pure-button"><i class="fa fa-cog"></i> Settings</button>
      <a class="pure-button" href="#"><i class="fa fa-shopping-cart fa-lg"></i> Checkout</a>
   </body>
</html>

Result

Verify the result.


No comments:

Post a Comment