Pure.CSS Responsive Design - Pure.CSS

How responsive design is created?

PURE.CSS has various special classes which helps in creating responsive designs.

S.No.
Class Name & Description
1
.pure-u-*
It Sets the container to occupy required space on any device.
2
.pure-u-sm-*
It Sets the container to occupy required space on a devices with width ≥ 568px.
3
.pure-u-md-*
It Sets the container to occupy required space on a devices with width ≥ 768px.
4
.pure-u-lg-*
It Sets the container to occupy required space on a devices with width ≥ 1024px.
5
.pure-u-xl-*
It Sets the container to occupy required space on a devices with width ≥ 1280px.

In the example given below, we will be creating a responsive grid with a row and four columns. These columns stack on small screens, takes up width with 50% on medium-sized screens, and takes up width of 25% on larger screens.

This can be achieved by adding the .pure-u-1 class for smaller screens, and .pure-u-md-1-2 for medium-sized screens, and .pure-u-lg-1-4 for larger screens. By resizing the page, we can see the grid respond to the screen size selected.

Example:

purecss_responsive_design.htm


Result

Verify the result.

Pure.CSS Responsive Design Output

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Pure.CSS Topics