Updated June 14, 2023
Definition of Pure CSS
The pure.css is a responsive, compact, and speedy CSS framework for web design. The pure.css is a cascading style sheet framework to create a flexible, tiny, space-manageable web design. It is a cascading style sheet (CSS) module designed to create websites that adapt to all screen sizes. It is a space-saving and lightweight framework that enables the development of responsive websites using layouts, styles, HTML elements, and UI components. Pure.css was developed by Yahoo specifically for working with mobile and other screen size devices.
Why do we need pure.css?
Pure.css is a tiny and lightweight framework with a file size of less than 4.8KB when zipped. It is essential for ensuring websites easily adapt to various screen sizes, particularly on mobile devices. By incorporating the Normalize.css base, Pure.css helps eliminate cross-browser compatibility issues. It offers a minimalistic appearance and provides one-click customization options through its skin builder. Pure.css caters not only to responsive frameworks but also includes non-responsive modules within its framework. It does not rely on any JavaScript or jQuery libraries, contributing to its flat design and minimal module requirements. The framework includes prebuilt main elements such as buttons, dropdown menus, forms, grids, and tables. Pure.css maintains consistent colors and shades across different platforms. Furthermore, Pure.css is user-friendly and straightforward, as it does not require any installation process.
How pure.css works?
There are two pure.css links in the framework. These responsive and non-responsive links are below.
- The pure.css responsive framework link is adding to the HTML files.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/base-min.css">- The pure.css non-responsive framework link is adding in the HTML files.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-nr-min.css">- The pure.css alternate CDNs file for the responsive framework is add in the HTML files.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.3/pure-min.css"/>- The pure.css responsive framework for the base link is add in the HTML files.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/base-min.css"/>- The pure.css responsive framework for button links is add in the HTML files.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/buttons-min.css"/>- The pure.css framework for responsive form link is add in the HTML files.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/forms-min.css "/>- The pure.css framework for non-responsive form link is add in the HTML files.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/forms-nr-min.css"/>- The pure.css framework for basic grids links added in the HTML files.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-min.css"/>- The pure.css framework for responsive grids links is add in the HTML files.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-min.css"/>- The pure.css framework for responsive menu links is add in the HTML files.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/menus-min.css"/>- The pure.css framework for the table’s link is add in the HTML files.
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/tables-min.css"/>How do responsive features work in pure.css?
The pure.css class for the basic responsive framework is below.
class ="pure-u-*(grid system)"- The pure.css small screen devices are useful for up to 568px size screen devices.
- The pure.css class is below.
class ="pure-u-sm-*(grid system)"- The pure.css medium screen devices are useful for up to 768px size screen devices.
- The pure.css class is below.
class ="pure-u-md-*(grid system)"- The pure.css large screen devices are using for up to 1024px size screen devices.
- The pure.css class is below.
class ="pure-u-lg-*(grid system)"- The pure.css extra-large screen devices are using for up to 1280px size screen devices.
- The pure.css class is below.
class ="pure-u-xl-*(grid system)"- The pure.css is creating a responsive and mobile-first framework using the below link.
<html>
</head> <meta name = "viewport" content = "width=device-width, initial-scale = 1"> </head>
</html>- The basic pure.css procedure demo is below.
<html>
<head>
<title> pure.css </title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-min.css">
<style>
.pure-u-1-1{
border: 1px solid orange;
}
</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-3">
<p> Second columns of the pure.css | </p>
</div>
<div class = "pure-u-1-3">
<p> Third columns of the pure.css </p>
</div>
<div class = "pure-u-1-1">
<p> only one columns of the pure.css </p>
</div>
</div>
</body>
</html>Advantages and disadvantages
Advantages
Pure.css allows the creation of unique websites without relying on cookie-cutter templates. It is a free responsive framework that supports advanced SEO optimization for websites. Pure.css is easy to use as it does not require any installation process. It does not depend on JavaScript and jQuery libraries for simple validation tasks. Additionally, Pure.css allows for the addition of extra modules and elements without encountering any errors.
Disadvantages
Pure.css can utilize JavaScript libraries for complex responsive designs. However, it has limitations when it comes to choosing templates and design patterns for web design. Additionally, Pure.css has a relatively small development community and limited technical support available for designing purposes. It is a minimal and simple framework, but it does not provide built-in support for Font Awesome icons by default.
Usage
Pure.css is a useful framework for creating simple and mobile-friendly websites and web designs. It is capable of fitting web applications into various device sizes based on screen width. It facilitates the creation of responsive tables, buttons, forms, and dropdown lists within web applications. Additionally, Pure.css supports the implementation of styles, bold colors, and shadows within the framework. It serves as an alternative to the Bootstrap framework and allows for the creation of classes for responsive web applications.
Career path for pure.css
- The websites or web application designing part is done by pure.css framework.
- The frontend developer and web designer needed a pure.css framework for website style and design.
- The UI designer and UI developer needed pure.css for web applications.
- The pure.css is creating a different template for web application and become a website developer.
Conclusion
Pure.css is a user-friendly, attractive, and elegant framework for website design. It provides a responsive layout that works seamlessly across laptops, desktops, tablets, and mobile devices. Pure.css is particularly useful for creating tiny, space-saving websites and web applications, catering to the specific requirements of users.
Recommended Articles
We hope that this EDUCBA information on “Pure CSS” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
