Do you know Pure CSS responsive design?
Understanding Pure CSS Responsive Design?
What is Pure.CSS?
Pure.CSS is a CSS framework that allows developers to create responsive web designs. It contains various predefined classes to make web pages responsive. It also includes predefined styles for grids, forms, tables, https://coder-cafe.com/wp-content/uploads/2025/09/images, icons, buttons, and more.
It makes it easy for developers to create responsive web pages.
What is responsive web design? Before starting responsive web design, you can open the TutorialsPoint.com website on desktop, mobile, and tablet devices. Users can see how well it looks on different devices.
Thus, responsive web design means that web pages can adapt to any device size. No content on a web page should overflow or be covered by content from other pages.
What are the benefits of using Pure.CSS over regular CSS?
There are many benefits to using pure.css over regular CSS, which we’ll outline here.
- The streamlined pure.CSS is very compact, weighing only 4 KB.
-
Due to its small size, pure.css is faster and easier to manage.
-
It includes predefined styles for tables, forms, buttons, https://coder-cafe.com/wp-content/uploads/2025/09/images, icons, grids, and more.
-
It’s based on a 12-grid layout for styling web pages.
-
It has predefined class names that make HTML elements responsive to media queries.
Pure.CSS Class Table
Pure.CSS contains the class names for our media queries explained in a table format.
| key | Media Inquiries | 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 table above, we have different class names for pure.css. If the user wants to use half of the screen on a larger screen, they should use ‘pure-u-lg-1-2’ as the class name. Similarly, users should use the class name “pure-u-lg-1-3” to occupy one-third of the screen.
The following example shows how to use pure.css classes to create responsive web pages.
Example 1
In the following example, we create four div elements. We assign the first div the class name “pure-u-1-1” and it will always occupy 100% of the screen width. The second and third divs have the class name “pure-u-1-3” and will occupy one-third of the screen width. The final div has the class name “pure-u-1-4” and will occupy one-quarter of the screen width.
<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>Use <i> pure.CSS </i> 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 first column. </div>
<div class = "pure-u-1-3"> This is the second row and second column. </div>
<div class = "pure-u-1-4"> This is the second row and third column. </div>
</div>
</body>
Example 2
In the following example, we create multiple HTML div elements and assign them different pure.CSS class names.
In the output, users can observe the first two The div elements take up one-third of the screen. The third div always takes up one-quarter of the screen. The fourth div always takes up the entire screen width.
The fifth div takes up one-fifth of the screen, the sixth div takes up one-third of the screen, and the final div takes up one-sixth of the screen.
<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>Create responsive web designs using <i> pure.CSS </i> </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 following example, we have a title and description div element. We change the size of the div element based on the screen size. For small screens, it takes up the entire width of the screen, for medium screens, it takes up half the width. Furthermore, it takes up one-third the width on 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> Create responsive web designs with <i> Pure.CSS </i> . </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 for quickly creating web pages. It is designed to be minimalist and flexible, allowing developers to easily customize the style and layout to suit their needs. Pure.CSS provides responsive grid systems, typography, forms, buttons, tables, and menus. </p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You learned how to create responsive web designs using pure.CSS. In the first two examples, we had fixed div element dimensions based on screen size. In the final example, we used pure.css classes to change the dimensions of the div element based on screen size.