What to understand Pure CSS Responsive Design ?

Last Updated : 31 Oct, 2021

In this article, we will learn about Pure.CSS responsive design. It is a collection of responsive CSS modules that can be included in any web application to create faster, beautiful, and responsive websites. In simple words, it is a framework of CSS that is used to build a beautiful and responsive website in less time. Pure CSS is a CSS framework that is developed by yahoo. It has six modules named base, grid, forms, buttons, tables, and menus.

Features of Pure.CSS:

It is a Faster and Easier way for Web-Development.
It is a free and open-source tool collection.
It creates Platform-independent web pages.
It is easy to learn & use.
It has an inbuilt Responsive design for web pages as well as for mobile devices.

Responsive Design:

Responsive means to respond and web design means to design a website. Responsive design is an approach that simply reflows, adjust, reposition, resize overall content and images according to the width of the browser or screen size. In simple words, responsive designs are designed to be accessed across all devices regardless of the size of the device screen. Some screen sizes or device widths that should be kept in mind while creating responsive websites are desktops, laptops, mobile phones, and tablets. Responsive layout is the built-in characteristic of Pure.CSS. It has an internally 12 column mobile-first fluid grid that helps responsive designs for small, large, and medium display screen sizes.

Pure.CSS facilitates the 4 different keywords, sm, md, lg, xl & these keywords are attached with the Pure grid unit classes(pure-u) that can be used to generate a media query according to the screen width. The ‘pure-u’ or ‘pure-u-*’ helps us to divide the width of the display screen into fractions. For instance, in order to occupy the 3/4th part of the display screen then we need to include the class ‘pure-u-3-4’ to that specific div. The condition and media query for all these classes are given below:

Key	Classname	CSS Media Query	Applies
none	.pure-u-*	none	always
sm	.pure-u-sm-*	@media screen and (min-width: 35.5em)	≥ 568px
md	.pure-u-md-*	@media screen and (min-width: 48em)	≥ 768px
lg	.pure-u-lg-*	@media screen and (min-width: 64em)	≥ 1024px
xl	.pure-u-xl-*	@media screen and (min-width: 80em)	≥ 1280px

To generate the default media query, the ’em’ is used instead of ‘px’ so that the media queries respond to the zoom of the webpage accordingly.

Example: This example describes the use of Pure CSS to design the responsive page for different device widths.

HTML

<html> 
  
<head> 
    <title> pure.css </title> 
    <meta name="viewport" 
          content="width=device-width, initial-scale = 1"> 
    <link rel="stylesheet" 
          href= 
"https://unpkg.com/purecss@2.0.3/build/pure-min.css"> 
    <link rel="stylesheet" 
          href= 
"https://unpkg.com/purecss@2.0.3/build/grids-responsive-min.css"> 
    <style> 
    body { 
        text-align: center; 
    } 
      
    .pure-u-1-1 { 
        border: 5px solid green; 
    } 
      
    .pure-u-1-3 { 
        background-color: aqua; 
    } 
      
    .pure-u-1-2 { 
        background-color: blue; 
    } 
      
    .pure-u-1-1 { 
        background-color: lightgreen; 
    } 
    </style> 
</head> 
  
<body> 
    <div class="pure-g"> 
        <div class="pure-u-1-3"> 
            <p> First columns of the pure.css ||</p> 
  
        </div> 
        <div class="pure-u-1-2"> 
            <p> Second columns of the pure.css || </p> 
  
        </div> 
        <div class="pure-u-1-1"> 
            <p> GeeksforGeeks </p> 
  
        </div> 
        <div class="pure-u-1-1"> 
            <p>A computer science portal for geeks</p> 
  
        </div> 
    </div> 
</body> 
  
</html>