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 - Environment Setup
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 −
Advertisements