What to understand Pure CSS Responsive Design ?
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 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:
CSS Media Query
|sm||.pure-u-sm-*||@media screen and (min-width: 35.5em)|
|md||.pure-u-md-*||@media screen and (min-width: 48em)|
|lg||.pure-u-lg-*||@media screen and (min-width: 64em)|
|xl||.pure-u-xl-*||@media screen and (min-width: 80em)|
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.
Output: From the below output, we can see that for different window sizes, the content doesn’t affected as it sets to specific device width.