Advertisement

Advertisement


Pure.CSS Responsive Design

We have studied about the responsive nature of Pure but the question is how to implement the responsiveness, its very simple we use predefined classes of different grid sizes. These responsive Pure CSS modules are implemented in every web project. Just add those classes with a bit of personalization according to your need and its done.

Note: You have to add CDN path for the responsive grid seperately along with the Pure CSS CDN path which we had discussed in the previous tutorial. You can look at it in the example below.

Let's see the classes, Pure uses the following classes to create a responsive design:

Class Name Description
.pure-u-* Sets the container to occupy required space on any device, on any screen size.
.pure-u-sm-* Sets the container to occupy required space on a device with width ≥ 568px.
.pure-u-md-* Sets the container to occupy required space on a device with width ≥ 768px.
.pure-u-lg-* Sets the container to occupy required space on a device with width ≥ 1024px.
.pure-u-xl-* Sets the container to occupy required space on a device with width ≥ 1280px.

In the table above, you saw asterik(*) sign at the end of classes, it is nothing but a place where you will enter the required width of the grids and the number of columns in the grid. Like if you enter '1-2' i.e. '1/2' the div will cover the 50% of the total width as '1/2' means 50%. Same for 25% you will use '1-4' i.e. '1/4'. So you should have knowledge of fractions to use these grids. Don't worry if you haven't understood, just stay with us and look at the example below to have a glimpse of how the grids work.

In the example below, a responsive grid is created with a row having four columns. The columns will take full space on small screens, should take up 50% width on medium-sized screens, and should 25% width on large screens.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> PURE.CSS Responsive</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/grids-responsive-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 10px auto;
font-family: Roboto, 'Liberation Mono', Courier, monospace;
text-align: center;
}
.graybox {
background: rgb(240, 240, 240);
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-1-1">
<div 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>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class = "graybox">
<p>First Column</p>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="graybox">
<p>Second Column</p>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class="graybox">
<p>Third Column</p>
</div>
</div>
<div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
<div class = "graybox">
<p>Fourth Column</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-1">
<div class = "graybox">
<p>This column is to occupy the complete space of a row.</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-2-5">
<div class = "graybox">
<p>This column is to occupy the two-fifth of the space of a row.</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-3-5">
<div class = "graybox">
<p>This column is to occupy the three-fifth of the space of a row.</p>
</div>
</div>
</div>
</div>
<div class = "grids-example">
<div class = "pure-g">
<div class = "pure-u-1-3">
<div class = "graybox">
<p>Column 1: This column is to occupy the one-third of the
space of a row on all devices.
</p>
</div>
</div>
<div class = "pure-u-1-3">
<div class = "graybox">
<p>Column 2: This column is to occupy the one-third of the space
of a row on all devices.
</p>
</div>
</div>
<div class = "pure-u-1-3">
<div class = "graybox">
<p>Column 3: This column is to occupy the one-third of the space of a
row on all devices.
</p>
</div>
</div>
</div>
</div>
</body>
</html>

Output

PURE.CSS Responsive

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.

First Column

Second Column

Third Column

Fourth Column

This column is to occupy the complete space of a row.

This column is to occupy the two-fifth of the space of a row.

This column is to occupy the three-fifth of the space of a row.

Column 1: This column is to occupy the one-third of the space of a row on all devices.

Column 2: This column is to occupy the one-third of the space of a row on all devices.

Column 3: This column is to occupy the one-third of the space of a row on all devices.

The class .pure-u-1 is used for small screens for 100% width, .pure-u-md-1-2 is used for medium sized screens for 50% width and .pure-u-lg-1-4 for large screens for 25% width. Use the try-it editor in landscape mode and resize the window to see the effects.

In the next tutorial, we will go a bit deeper in the grid concept and after that you will be able to alter the classes according to your grid needs.









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.