Javatpoint Logo
Javatpoint Logo

Pure.CSS Responsive Design

Pure.CSS uses the following classes to create a responsive design.

Index Class Name Description
1) .pure-u-* It is used to set the container to occupy required space on any device (compatibale for all devices).
2) .pure-u-sm-* It is used for small screens. It sets the container to occupy required space on a device with width ? 568px.
3) .pure-u-md-* It is used for medium screens. It sets the container to occupy required space on a device with width ? 768px.
4) .pure-u-lg-* It is used for large screens. It sets the container to occupy required space on a device with width ? 1024px.
5) .pure-u-xl-* It is used for extra-large screens. It sets the container to occupy required space on a device with width ? 1280px.

Example

Let's create a responsive grid with a row having four columns. The columns should stack on small screens, should take up width: 50% on medium-sized screens, and should take up width: 25% on large screens.

For small screen we add: .pure-u-1 class

For medium sized screens we add: .pure-u-md-1-2

and for large sized screen: .pure-u-lg-1-4

See this example:

Test it Now

It will be look like this:

Output:

PureCSS Responsive Design 1
Next TopicPure.CSS Buttons




Help Others, Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA