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.
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.
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.
Follow Us: