- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What to Understand Pure CSS Responsive Design?
What is Pure.CSS?
The pure.CSS is a CSS framework that allows developers to create a responsive web design. It contains various pre-defined classes to make web pages responsive. Also, it contains pre-style grids, forms, tables, images, icons, buttons, etc.
It makes it easy to create responsive web pages for developers.
What is Responsive web Design?
Before starting the responsive web design, open the TutorialsPoint.com website on desktop, mobile, and tablet devices. Here, users can observe that it looks fine on every device with different styles.
So, responsive web design means web pages should fit on any device with whatever dimensions. Any content of the web pages shouldn’t overflow or be overridden by other content of pages.
What are the Benefits of Using Pure.CSS Over Normal CSS?
There are lots of benefits of using pure.css over normal CSS, which we have explained here.
The size of minified pure.CSS is very compact, which is only 4 kb.
The pure.css is faster and easy to manage due to its compact size.
It contains a pre-styled table, forms, buttons, images, icons, grids, etc.
It styles the web pages based on the 12-grid layout.
It has pre-defined class names to make HTML elements responsive over media queries.
Class Table of Pure.CSS
The pure.CSS contains the class names over the media queries we have explained in the table format.
| Key | Media Query | Class Name |
|---|---|---|
| none | none | pure-u-* |
| sm | @media screen and (min-width: 568px) | pure-u-sm-* |
| md | @media screen and (min-width: 768px) | pure-u-md-* |
| lg | @media screen and (min-width: 1024px) | pure-u-lg-* |
| xl | @media screen and (min-width: 1280px) | pure-u-xl* |
In the above table, we have different class names of pure.CSS. If users want to use the half part of the screen for a larger screen, they should use ‘pure-u-lg-1-2’ as a class name. Similarly, users should use the ‘pure-u-lg-1-3’ as a class name to use one-third of the screen.
We will understand via the examples below how to use pure.css classes to make responsive web pages.
Example 1
In the example below, we have created four div elements. We have given the ‘pure-u-1-1’ class name to the first div element, which will always take 100% of space as a screen width. The second and third div contain the ‘pure-u-1-3’ class name, which will take one-third of the screen width. The last div contains the ‘pure-u-1-4’ class name, which will take one-fourth of the class name.
<html>
<head>
<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>
.pure-g [class *="pure-u"] {
background-color: aqua;
border: 1px solid #ddd;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<h2>Using the <i> pure.CSS </i> to create a responsive web design.</h2>
<div class = "pure-g">
<div class = "pure-u-1-1"> This is the first row. </div>
<div class = "pure-u-1-3"> This is the second row and the first column. </div>
<div class = "pure-u-1-3"> This is a second row and second column. </div>
<div class = "pure-u-1-4"> This is a second row and second column. </div>
</div>
</body>
</html>
Example 2
In the example below, we have created multiple HTML div elements and given different class names of the pure.CSS.
In the output, users can observe that the first two div elements take one-third of space, and the third div always takes one-fourth of space. The fourth div takes full width always.
The fifth div takes one-fifth of the screen, the sixth div takes one-third of the div, and the last one takes one-sixth.
<html>
<head>
<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>
.pure-g [class *="pure-u"] {
border: 1px solid #ddd;
padding: 10px;
margin: 10px;
text-align: center;
}
.pure-u-1-3 { background-color: #e65a5a; border: 2px dotted yellow;}
.pure-u-1-4 { background-color: #5a5ae6; border: 2px solid green;}
.pure-u-1-5 { background-color: #5ae65a; border: 2px solid red;}
.pure-u-1-6 { background-color: #e6e65a; border: 2px solid blue;}
.pure-u-1-1 { background-color: #5a5ae6; border: 2px solid green; }
</style>
</head>
<body>
<h2>Using the <i> pure.CSS </i> to create a responsive web design</h2>
<div class = "pure-g">
<div class = "pure-u-1-3"> TypeScript </div>
<div class = "pure-u-1-3"> HTML </div>
<div class = "pure-u-1-4"> CSS </div>
<div class = "pure-u-1-1"> JavaScript </div>
<div class = "pure-u-1-5"> Pure.CSS </div>
<div class = "pure-u-1-3"> Github </div>
<div class = "pure-u-1-6"> Python </div>
</div>
</body>
</html>
Example 3
In the example below, we have a title and description div elements. We change the dimensions of the div elements according to the screen size. For the small screens, it takes full width, and for the medium screen, it takes half-width. Furthermore, it takes one-third width of the large screens.
<html>
<head>
<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>
.header { background-color: #333; color: #fff; padding: 10px; }
.container { max-width: 960px; margin: 0 auto; padding: 0 10px;}
.content { margin: 20px 0; padding: 10px; border: 1px solid #ccc;}
</style>
</head>
<body>
<div class = "pure-g">
<div class = "pure-u-sm-1-1 pure-u-md-1-2 pure-u-lg-1-3">
<div class="header">
<h1> Using the <i> Pure.CSS </i> to create a responsive web design. </h1>
</div>
</div>
</div>
<div class = "pure-g">
<div class = "pure-u-sm-1-1 pure-u-md-1-2 pure-u-lg-1-3">
<div class = "container">
<div class = "content">
<p> Pure.css is a lightweight and responsive CSS framework that provides a set of CSS modules to
quickly create web pages.
It is designed to be minimalistic and flexible, allowing developers to easily customize the
styles and layout to meet their needs.
Pure.css offers a responsive grid system, typography styles, forms, buttons, tables, and menus,
among other features. </p>
</div>
</div>
</div>
</div>
</body>
</html>
Users learned to use the pure.CSS to create a responsive web design. In the first two examples, we have a fixed dimension of the div element according to the screen size. In the final example, we change the dimensions of the div element according to the screen size using the classes of pure.css.
81 Views
