Pure.CSS Tutorial provides basic and advanced concepts of Pure.CSS. Our Pure.CSS Tutorial is designed for beginners and professionals both.
Pure is a Cascading Style Sheet (CSS) developed by YAHOO. It helps in creating faster, beautiful, and responsive websites. It is very space savvy and is very tiny in size comparable to 4 KB. This tutorial explains all the fundamental concepts of Pure.
What is Pure.CSS
Pure.CSS is a framework of CSS. It is a collection of small sets of responsive CSS modules which can be used in any web application. It is used to create faster, beautiful and responsive websites. It can be used as an alternative of Bootstrap.
Pure.CSS is developed by Yahoo.
Pure.CSS is composed of follwoing modules:
- Base
- Grid
- Forms
- Buttons
- Tables
- Menus
Pure is based on Normalize.css which is a library that renders elements more consistently and in line with modern standards and also works in older browsers.
<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>
0 comments:
Post a Comment