Pure.CSS Tutorial
Selected Reading
- Pure.CSS - Discussion
- Pure.CSS - Useful Resources
- Pure.CSS - Quick Guide
- Pure.CSS - Icons
- Pure.CSS - Images
- Pure.CSS - Tables
- Pure.CSS - Buttons
- Pure.CSS - Forms
- Pure.CSS - Grids
- Pure.CSS - Responsive Design
- Pure.CSS - Environment Setup
- Pure.CSS - Overview
- Pure.CSS - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Pure.CSS - Quick Guide
Pure.CSS - Quick Guide
Pure.CSS - Overview
Pure is a Cascading Style Sheet (CSS) developed by YAHOO. It helps in creating faster, beautiful, and responsive websites.
Some of its sapent 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 pbrary 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 pnes 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 Depvery Network (CDN).
Local Installation
Go to 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 −
<html>
<head>
<title>The PURE.CSS Example</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel="stylesheet" href="pure-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
border-top: 1px sopd #ddd;
border-bottom: 1px sopd #ddd;
font-family: Consolas, Liberation Mono , Courier, monospace;
text-apgn: center;
}
</style>
</head>
<body>
<span class="grids-example">
<span class="pure-g">
<span class="pure-u-1-3"><p>First Column</p></span>
<span class="pure-u-1-3"><p>Second Column</p></span>
<span class="pure-u-1-3"><p>Third Column</p></span>
</span>
</span>
</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 Depvery Network (CDN). yui.yahooapis.com provides content for the latest version.
We are using yui.yahooapis.com CDN version of the pbrary 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">
<pnk 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 sopd #ddd;
border-bottom: 1px sopd #ddd;
font-family: Consolas, Liberation Mono , Courier, monospace;
text-apgn: center;
}
</style>
</head>
<body>
<span class = "grids-example">
<span class = "pure-g">
<span class = "pure-u-1-3"><p>First Column</p></span>
<span class = "pure-u-1-3"><p>Second Column</p></span>
<span class = "pure-u-1-3"><p>Third Column</p></span>
</span>
</span>
</body>
</html>
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
<html>
<head>
<title>The PURE.CSS Containers</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<pnk 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-apgn: center;
}
.graybox {
background: rgb(240, 240, 240);
border: 1px sopd #ddd;
}
</style>
</head>
<body>
<span class = "grids-example">
<span class = "pure-g">
<span class = "pure-u-1-1">
<span 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>
</span>
</span>
<span class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<span class = "graybox">
<p>First Column</p>
</span>
</span>
<span class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<span class="graybox">
<p>Second Column</p>
</span>
</span>
<span class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<span class="graybox">
<p>Third Column</p>
</span>
</span>
<span class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<span class = "graybox">
<p>Fourth Column</p>
</span>
</span>
</span>
</span>
<span class = "grids-example">
<span class = "pure-g">
<span class = "pure-u-1">
<span class = "graybox">
<p>This column is to occupy the complete space of a row.</p>
</span>
</span>
</span>
</span>
<span class = "grids-example">
<span class = "pure-g">
<span class = "pure-u-2-5">
<span class = "graybox">
<p>This column is to occupy the two-fifth of the space of a row.</p>
</span>
</span>
</span>
</span>
<span class = "grids-example">
<span class = "pure-g">
<span class = "pure-u-3-5">
<span class = "graybox">
<p>This column is to occupy the three-fifth of the space of a row.</p>
</span>
</span>
</span>
</span>
<span class = "grids-example">
<span class = "pure-g">
<span class = "pure-u-1-3">
<span class = "graybox">
<p>Column 1: This column is to occupy the one-third of the
space of a row on all devices.</p>
</span>
</span>
<span class = "pure-u-1-3">
<span class = "graybox">
<p>Column 2: This column is to occupy the one-third of the space
of a row on all devices.</p>
</span>
</span>
<span class = "pure-u-1-3">
<span class = "graybox">
<p>Column 3: This column is to occupy the one-third of the space of a
row on all devices.</p>
</span>
</span>
</span>
</span>
</body>
</html>
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
<html>
<head>
<title>The PURE.CSS Grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<pnk rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<pnk 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-apgn: 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>
<span class="grids-example">
<span class="grid-unit pure-g">
<span class="grid-unit-width pure-u">1-5</span>
<span class="grid-unit-details pure-u-1">
<span class="pure-g">
<span class="grid-unit-bar pure-u-1-5"></span>
</span>
</span>
</span>
<span class="grid-unit pure-g">
<span class="grid-unit-width pure-u">2-5</span>
<span class="grid-unit-details pure-u-1">
<span class="pure-g">
<span class="grid-unit-bar pure-u-2-5"></span>
</span>
</span>
</span>
<span class="grid-unit pure-g">
<span class="grid-unit-width pure-u">3-5</span>
<span class="grid-unit-details pure-u-1">
<span class="pure-g">
<span class="grid-unit-bar pure-u-3-5"></span>
</span>
</span>
</span>
<span class="grid-unit pure-g">
<span class="grid-unit-width pure-u">4-5</span>
<span class="grid-unit-details pure-u-1">
<span class="pure-g">
<span class="grid-unit-bar pure-u-4-5"></span>
</span>
</span>
</span>
<span class="grid-unit pure-g">
<span class="grid-unit-width pure-u">1</span>
<span class="grid-unit-details pure-u-1">
<span class="pure-g">
<span class="grid-unit-bar pure-u-1"></span>
</span>
</span>
</span>
<span class="grid-unit pure-g">
<span class="grid-unit-width pure-u">1-1</span>
<span class="grid-unit-details pure-u-1">
<span class="pure-g">
<span class="grid-unit-bar pure-u-1-1"></span>
</span>
</span>
</span>
</span>
</body>
</html>
Result
Verify the result.
24th Based Units
purecss_24th_based.htm
<html>
<head>
<title>The PURE.CSS Grid</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<pnk 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-apgn: 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>
<span class = "grids-example">
<span class = "grid-unit pure-g">
<span class = "grid-unit-width pure-u">1-24</span>
<span class = "grid-unit-details pure-u-1">
<span class = "pure-g">
<span class = "grid-unit-bar pure-u-1-24"></span>
</span>
</span>
</span>
<span class = "grid-unit pure-g">
<span class = "grid-unit-width pure-u">1-12</span>
<span class = "grid-unit-details pure-u-1">
<span class = "pure-g">
<span class = "grid-unit-bar pure-u-1-12"></span>
</span>
</span>
</span>
<span class = "grid-unit pure-g">
<span class = "grid-unit-width pure-u">2-24</span>
<span class = "grid-unit-details pure-u-1">
<span class = "pure-g">
<span class = "grid-unit-bar pure-u-2-24"></span>
</span>
</span>
</span>
<span class = "grid-unit pure-g">
<span class = "grid-unit-width pure-u">3-24</span>
<span class = "grid-unit-details pure-u-1">
<span class = "pure-g">
<span class = "grid-unit-bar pure-u-3-24"></span>
</span>
</span>
</span>
<span class = "grid-unit pure-g">
<span class = "grid-unit-width pure-u">1-8</span>
<span class = "grid-unit-details pure-u-1">
<span class = "pure-g">
<span class = "grid-unit-bar pure-u-1-8"></span>
</span>
</span>
</span>
<span class = "grid-unit pure-g">
<span class = "grid-unit-width pure-u">4-24</span>
<span class = "grid-unit-details pure-u-1">
<span class = "pure-g">
<span class = "grid-unit-bar pure-u-4-24"></span>
</span>
</span>
</span>
<span class = "grid-unit pure-g">
<span class = "grid-unit-width pure-u">1-6</span>
<span class = "grid-unit-details pure-u-1">
<span class = "pure-g">
<span class = "grid-unit-bar pure-u-1-6"></span>
</span>
</span>
</span>
<span class = "grid-unit pure-g">
<span class = "grid-unit-width pure-u">5-24</span>
<span class = "grid-unit-details pure-u-1">
<span class = "pure-g">
<span class = "grid-unit-bar pure-u-5-24"></span>
</span>
</span>
</span>
<span class = "grid-unit pure-g">
<span class = "grid-unit-width pure-u">1-4</span>
<span class = "grid-unit-details pure-u-1">
<span class = "pure-g">
<span class = "grid-unit-bar pure-u-1-4"></span>
</span>
</span>
</span>
<span class = "grid-unit pure-g">
<span class = "grid-unit-width pure-u">6-24</span>
<span class = "grid-unit-details pure-u-1">
<span class = "pure-g">
<span class = "grid-unit-bar pure-u-6-24"></span>
</span>
</span>
</span>
<span class = "grid-unit pure-g">
<span class = "grid-unit-width pure-u">7-24</span>
<span class = "grid-unit-details pure-u-1">
<span class = "pure-g">
<span class = "grid-unit-bar pure-u-7-24"></span>
</span>
</span>
</span>
<span class = "grid-unit pure-g">
<span class = "grid-unit-width pure-u">1-3</span>
<span class = "grid-unit-details pure-u-1">
<span class = "pure-g">
<span class = "grid-unit-bar pure-u-1-3"></span>
</span>
</span>
</span>
<span class = "grid-unit pure-g">
<span class = "grid-unit-width pure-u">22-24</span>
<span class = "grid-unit-details pure-u-1">
<span class = "pure-g">
<span class = "grid-unit-bar pure-u-22-24"></span>
</span>
</span>
</span>
<span class = "grid-unit pure-g">
<span class = "grid-unit-width pure-u">23-24</span>
<span class = "grid-unit-details pure-u-1">
<span class = "pure-g">
<span class = "grid-unit-bar pure-u-23-24"></span>
</span>
</span>
</span>
<span class = "grid-unit pure-g">
<span class = "grid-unit-width pure-u">1</span>
<span class ="grid-unit-details pure-u-1">
<span class="pure-g">
<span class="grid-unit-bar pure-u-1"></span>
</span>
</span>
</span>
<span class="grid-unit pure-g">
<span class="grid-unit-width pure-u">1-1</span>
<span class="grid-unit-details pure-u-1">
<span class="pure-g">
<span class="grid-unit-bar pure-u-1-1"></span>
</span>
</span>
</span>
<span class="grid-unit pure-g">
<span class="grid-unit-width pure-u">24-24</span>
<span class="grid-unit-details pure-u-1">
<span class="pure-g">
<span class="grid-unit-bar pure-u-24-24"></span>
</span>
</span>
</span>
</span>
</body>
</html>
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 inpne form. |
| 2 | pure-form-stacked Represents a stacked form with input elements below the labels. To be used with pure-form. |
| 3 | pure-form-apgned Represents an apgned 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
<html>
<head>
<title>The PURE.CSS Forms</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<form class = "pure-form pure-form-apgned">
<fieldset>
<span class = "pure-control-group">
<label for = "name">Username</label>
<input id = "name" type = "text" placeholder = "Username" required>
</span>
<span class = "pure-control-group">
<label for = "email">Email</label>
<input id = "email" type = "text" placeholder = "Email Address" required>
</span>
<span class = "pure-control-group">
<label for = "comments">Comments</label>
<input id = "comments" type="text" placeholder = "Comments">
</span>
<span 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>
</span>
<span 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>
</span>
</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 −
| Sr.No. | Class Name & Description |
|---|---|
| 1 | pure-button Represents a standard button. Can be used to style a pnk 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
<html>
<head>
<title>The PURE.CSS Forms</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk 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); /* pght 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">Cpck Me</button>
<button class = "pure-button pure-button-active">Cpck 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
| 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 pnes. |
| 4 | pure-table-striped Displays a stripped table. |
| 5 | pure-table-odd If appped 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">
<pnk 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 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
<html>
<head>
<title>The W3.CSS Images</title>
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<pnk rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<h2>Images Demo</h2>
<hr/>
<span class = "pure-g">
<span class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
</span>
<span class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</span>
<span class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
</span>
<span class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</span>
<span class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</span>
<span class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</span>
<span class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
</span>
<span class = "pure-u-1-4 pure-u-lg-1-8">
<img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
</span>
</span>
</body>
</html>
Result
Verify the result.
Pure.CSS - Icons
Pure.CSS supports the following popular icon pbraries −
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 <i> element.
Example
purecss_icons.htm
<html>
<head>
<title>The PURE.CSS Icons</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<pnk rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<pnk rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/pbs/font-awesome/4.4.0/css/font-awesome.min.css">
<pnk rel = "stylesheet" href="https://fonts.googleapis.com/icon?family = Material+Icons">
<pnk 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.
Advertisements