- Pure CSS is a lightweight styles collection by Yahoo.
- It is responsive in a nature.
- This framework is created on Small mobile devices screen in mind.
- It is easy to extend to create your own custom styles.
- This CSS library can be downloaded or included from CDN.
- The link is below :-
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
- In this Demo, “We will explore the Grids Layout provided by the pure css”.
- Pure Grids, pure-g/pure-g-r is the parent class of every grid.The child classes can be pure-u-1-2,pure-u-1-3,pure-u-1-4…
- Below code shows pure-g example.It provides only grid Layout feature.But Its is not responsive in nature.Texts overlaps each other after certain width.
Use pure-g class (pure-g-not-responsive.html),
<html>
<head>
<title>Yahoo's Pure Css Use : g-r Responsive</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
<style>
.my-style{
border: 1px solid green;
border-right: 1px solid green;
border-top: 1px solid green;
border-bottom: 1px solid green;
}
</style>
</head>
<body>
<div class="pure-g-r">
<div class="pure-u-1-4">
<p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
</div>
<div class="pure-u-1-4">
<p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
</div>
<div class="pure-u-1-4">
<p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
</div>
<div class="pure-u-1-4">
<p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
</div>
</div>
</body>
</html>
- Output in Browser
- If we will reduce the width of Browser window, then the text will start overlapping others,
Use of pure-g-r class(pure-g-r-responsive.html),
<html>
<head>
<title>Yahoo's Pure Css Use : g-r Responsive</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
<style>
.my-style{
border: 1px solid green;
border-right: 1px solid green;
border-top: 1px solid green;
border-bottom: 1px solid green;
}
</style>
</head>
<body>
<div class="pure-g-r">
<div class="pure-u-1-4">
<p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
</div>
<div class="pure-u-1-4">
<p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
</div>
<div class="pure-u-1-4">
<p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
</div>
<div class="pure-u-1-4">
<p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
</div>
</div>
</body>
</html>
- Output in Browser,
- pure-g-r class is pure responsive in nature. If we will reduce the width of the browser window, you can see it is not overlapping any grid or text unlike pure-g.
