Pure - responsive CSS modules,framework from Yahoo yui for your web projects
Objective
This tutorial is an introduction to the Pure, a set of responsive CSS modules build by YUI team. We will discuss what is the basic idea behind the creation of this, what are the different components and finally how to implement it on your web projects.
Why Pure
There are several awesome CSS frameworks available (namely Twitter Bootstrap, Zurb Foundation). But they are heavy since they include lots of CSS code. On top that, your own style, which you need to customize the vanilla CSS code, makes it more stuffy. And then you also consume a lot of unused CSS rules.
Pure intends to fix this by making only compulsory CSS modules required by almost all the web projects. You may write your own style for customization on top of that. Moreover, you may use a combination of Pure, a CSS framework, and your own customize CSS. Which indeed makes sense. Gzipped and minified version of Pure sizes only 5.7KB, pretty tiny compared to other CSS frameworks.
Unlike other established CSS frameworks (like Bootstrap or Zurb Foundation), Pure does not come with any JavaScript Plugin out of the box. In fact, there only a few instance where it uses JavaScript, like drop down menus and fixed top menu.
Components
Almost every web project requires following modules, which is included by Pure:
- Base: which is for normalization. Setting CSS rules for typography, headings, code elements, link, img etc comes under this.
- Grids: A responsive Grid to set the layout.
- Forms: Style for default, stacked, Aligned and Multi-Column form; Grouped Inputs, Input Sizing and some more related stuff comes under this module.
- Navigation: This module comprises of Horizontal Menu, Menu with Headings, Vertical Menu, Dropdowns, Menus with Disabled Items and Paginations.
- Tables: Style for Default, Bordered, with Horizontal Borders and Striped tables are included in this module.
- Buttons: This module includes styles for Default, Disabled, Active, Primary and several customized buttons.
Using Pure
Add the following code within the head section of your HTML page. That will include all of the modules described above to your web project.
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
Like to get it on your own machine? You may download a zipped version of it from it's Github Repo.
Once downloaded and unzipped, the organization of files may look like following:
.
|-- bower.json
|-- Gruntfile.js
|-- HISTORY.md
|-- LICENSE.md
|-- package.json
|-- README.md
`-- src
|-- base
| |-- bower.json
| |-- css
| | |-- normalize-context.css
| | `-- normalize.css
| |-- LICENSE.md
| |-- README.md
| `-- tests
| `-- manual
| `-- test.html
|-- buttons
| |-- css
| | |-- buttons-core.css
| | `-- buttons.css
| `-- tests
| `-- manual
| `-- button.html
|-- forms
| |-- css
| | |-- forms-core.css
| | |-- forms.css
| | `-- forms-r.css
| `-- tests
| `-- manual
| `-- forms.html
|-- grids
| |-- css
| | |-- grids-core.css
| | |-- grids-r.css
| | `-- grids-units.css
| `-- tests
| `-- manual
| `-- responsive.html
|-- menus
| |-- css
| | |-- menus-core.css
| | |-- menus.css
| | |-- menus-paginator.css
| | `-- menus-r.css
| `-- tests
| `-- manual
| `-- menus.html
`-- tables
|-- css
| `-- tables.css
`-- tests
`-- manual
`-- tables.html
25 directories, 30 files
Application
We will create a simple Layout now. We have included the pure css. But added our own custom CSS also.
This layout includes a horizontal top menu, responsive grid, form, table and buttons. All the modules used in the Pure css.
Live demo
You may also view the example in a separate browser window.
Custom CSS:
body {
margin-top: 30px
}
#top-menu, #footer {
background: #42a2ce;
}
#footer{
padding: 2%;
color: #FFFFFF;
}
#footer h3{
margin-left: 35px;
}
#footer ul {
list-style: none;
}
#footer ul a{
text-decoration: none;
color: #260887;
}
#footer li {
margin-bottom: 8px;
}
#top-menu a, #footer a{
color: #ffffff;
}
#top-menu a:hover{
color: #030663;
}
.pure-u-1.leaderboard {
background: #4b6c9c;
color: #FFFFFF;
}
.brand {
padding: 20px;
}
.call-to-action {
background: #ec8007;
color: #fff;
}
.call-to-action_two {
background: #5f6cda;
color: #fff;
}
.header-next h1, .header-next h3{
text-align: center
}
.content.pure-u-1.support {
background-color:#f6f3eb;
border-top: 1px #b6ae8f solid;
border-bottom: 1px #b6ae8f solid;
}
.content.pure-u-1.guaranty {
background-color: #000000;
color: #FFFFFF;
}
.brand > table {
margin-bottom: 20px;
}
.pure-form label{
color:#FFFFFF;
}
HTML Code:
<!doctype html>
<!-- all the images used in this page are under Creative Common License and taken from Flicker and Google Images -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ">
<title>An example layout with Pure css</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<div class="content pure-u-1">
<div class="pure-g-r">
<div class="content pure-g-r">
<div class="header pure-u-1">
<div class="pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal" id="top-menu">
<a class="pure-menu-heading" href="">Your Site</a>
<ul>
<li class="pure-menu-selected"><a href="home.html">Home</a></li>
<li><a href="">Pricing</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</div>
<div class="pure-u-1 leaderboard">
<div class="pure-g-r">
<div class="pure-u-1-3">
<div class="brand">
<img src="images/7446897394_06cbc34b70.jpg"
alt="Vitage Car picture one">
</div>
</div>
<div class="pure-u-2-3">
<h1>
This is the Landing Page Heading
</h1>
<form class="pure-form pure-form-stacked">
<fieldset>
<div class="pure-g-r">
<div class="pure-u-1-3">
<label for="first-name">First Name</label>
<input id="first-name" type="text">
</div>
<div class="pure-u-1-3">
<label for="last-name">Last Name</label>
<input id="last-name" type="text">
</div>
<div class="pure-u-1-3">
<label for="email">E-Mail</label>
<input id="email" type="email" required>
</div>
<div class="pure-u-1-3">
<label for="city">City</label>
<input id="city" type="text">
</div>
<div class="pure-u-1-3">
<label for="state">State</label>
<select id="state" class="pure-input-medium">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
</div>
<label for="terms" class="pure-checkbox">
<input id="terms" type="checkbox"> I've read the terms and conditions
</label>
<button type="submit" class="pure-button call-to-action">Submit</button>
</fieldset>
</form> </div>
</div>
</div>
</div>
<!-- test -->
<div class="content pure-u-1">
<div class="pure-g-r">
<div class="pure-u-1-2"><div class="brand">
<h2>Lorem ipsum dolor sit amet, consectetuer.</h2>
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
<th>Place</th>
<th>Description</th>
<th>Pricing</th>
</tr>
</thead>
<tbody>
<tr class="pure-table-odd">
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
<td>Berlin</td>
<td>Lorel Ipsum</td>
<td>USD$$$</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
<td>Budapest</td>
<td>Lorel Ipsum</td>
<td>USD$$$</td>
</tr>
<tr class="pure-table-odd">
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
<td>Rome</td>
<td>Lorel Ipsum</td>
<td>USD$$$</td>
</tr>
<tr>
<td>4</td>
<td>Ford</td>
<td>Focus</td>
<td>2008</td>
<td>Paris</td>
<td>Lorel Ipsum</td>
<td>USD$$$</td>
</tr>
<tr class="pure-table-odd">
<td>5</td>
<td>Nissan</td>
<td>Sentra</td>
<td>2011</td>
<td>Abu dhabi</td>
<td>Lorel Ipsum</td>
<td>USD$$$</td>
</tr>
<tr>
<td>6</td>
<td>BMW</td>
<td>M3</td>
<td>2009</td>
<td>London</td>
<td>Lorel Ipsum</td>
<td>USD$$$</td>
</tr>
<tr class="pure-table-odd">
<td>7</td>
<td>Honda</td>
<td>Civic</td>
<td>2010</td>
<td>Oslo</td>
<td>Lorel Ipsum</td>
<td>USD$$$</td>
</tr>
<tr>
<td>8</td>
<td>Kia</td>
<td>Soul</td>
<td>2010</td>
<td>Miami</td>
<td>Lorel Ipsum</td>
<td>USD$$$</td>
</tr>
</tbody>
</table><a class="pure-button pure-button-secondary call-to-action_two">Bid this now</a></div></div>
<div class="pure-u-1-2"><div class="brand"><img src="images/6890478543_c4bb441f22.jpg"
alt="Vitage Car picture two"></div></div>
</div>
<!-- 2nd row -->
<div class="pure-g-r">
<div class="pure-u-1-2"><div class="brand"><img src="images/5328836699_7d97f81e9f.jpg"
alt="Vitage Car picture three"></div></div>
<div class="pure-u-1-2"><div class="brand"><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.</p><a class="pure-button pure-button-secondary call-to-action_two">Bid this now</a></div></div>
</div>
<!-- 3rd row -->
<div class="pure-g-r">
<div class="pure-u-1-2"><div class="brand"><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.</p><a class="pure-button pure-button-secondary call-to-action_two">Bid this now</a></div></div>
<div class="pure-u-1-2"><div class="brand"><img src="images/5442376738_542b02b5be.jpg"
alt="Vitage Car picture four"></div></div>
</div>
</div>
<div class="content pure-u-1 support">
<div class="pure-g-r">
<div class="pure-u-1 header-next">
<div class="brand">
<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h1>
<h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h3>
</div>
</div>
</div>
<div class="pure-g-r">
<div class="pure-u-1-6">
<div class="brand">
<p>
<img src="images/3086132328_e2041be795.jpg" id="picone">
</p>
<h3>Lorem ipsum dolor</h3>
</div>
</div>
<div class="pure-u-1-6">
<div class="brand">
<p>
<img src="images/3717404335_90ed081ca8.jpg">
</p>
<h3>Lorem ipsum dolor</h3>
</div>
</div>
<div class="pure-u-1-6">
<div class="brand">
<p>
<img src="images/3353936487_2599d7b8dc.jpg">
</p>
<h3>Lorem ipsum dolor</h3>
</div>
</div>
<div class="pure-u-1-6">
<div class="brand">
<p>
<img src="images/5688591090_f34179502e.jpg">
</p>
<h3>Lorem ipsum dolor</h3>
</div>
</div>
<div class="pure-u-1-6">
<div class="brand">
<p>
<img src="images/6312937936_cebaf2feb9.jpg">
</p>
<h3>Lorem ipsum dolor</h3>
</div>
</div>
<div class="pure-u-1-6">
<div class="brand">
<p>
<img src="images/4883281674_8428f07e53_z.jpg">
</p>
<h3>Lorem ipsum dolor</h3>
</div>
</div>
</div>
</div>
<div class="content pure-u-1 guaranty">
<div class="pure-g-r">
<div class="pure-u-1-4">
<p><img src="images/gurranty.png"></p>
</div>
<div class="pure-u-3-4">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit.</p>
</div>
</div>
</div>
<div class="content pure-u-1" id="footer">
<div class="pure-g-r">
<div class="pure-u-1-5">
<h3>Company</h3>
<ul>
<li><a href="#">Lorel ipsum</a></li>
<li><a href="#">Lorel ipsum</a></li>
<li><a href="#">Lorel ipsum</a></li>
<li><a href="#">Lorel ipsum</a></li>
</ul>
</div>
<!--2nd col -->
<div class="pure-u-1-5">
<h3>Products</h3>
<ul>
<li><a href="#">Lorel ipsum</a></li>
<li><a href="#">Lorel ipsum</a></li>
<li><a href="#">Lorel ipsum</a></li>
<li><a href="#">Lorel ipsum</a></li>
</ul>
</div>
<!--3rd col -->
<div class="pure-u-1-5">
<h3>Policy</h3>
<ul>
<li><a href="#">Lorel ipsum</a></li>
<li><a href="#">Lorel ipsum</a></li>
<li><a href="#">Lorel ipsum</a></li>
<li><a href="#">Lorel ipsum</a></li>
</ul>
</div>
<!--4th col -->
<div class="pure-u-1-5">
<h3>Support</h3>
<ul>
<li><a href="#">Lorel ipsum</a></li>
<li><a href="#">Lorel ipsum</a></li>
<li><a href="#">Lorel ipsum</a></li>
<li><a href="#">Lorel ipsum</a></li>
</ul>
</div>
<!--5th col -->
<div class="pure-u-1-5">
<h3>Social</h3>
<ul>
<li><a href="#"><img src="images/gplus.png"></a></li>
<li><a href="#"><img src="images/facebook.png"></a></li>
<li><a href="#"><img src="images/twitter.png"></a></li>
<li><a href="#"><img src="images/rss.png"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src="http://yui.yahooapis.com/3.10.1/build/yui/yui-min.js"></script>
<script>
YUI().use('node-base', 'node-event-delegate', function (Y) {
// This just makes sure that the href="#" attached to the <a> elements
// don't scroll you back up the page.
Y.one('.content').delegate('click', function (e) {
e.preventDefault();
}, 'a[href="#"]');
});
</script>
</body>
</html>
You may download the Code here.
We are going to publish a series of tutorials on each of the modules. Please bookmark this page or subscriber to our RSS.
Next: A tutorial on Responsive and unresponsive Grids by Pure CSS
It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.
https://www.w3resource.com/pure/
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics