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 flexible, tiny, space manageable web design. The pure.css is a set of the cascading style sheet (CSS) module to make websites for all screen size devices. The pure.css is a space-saving, lightweight framework to create a responsive website using layout, style, HTML elements, and UI components. The pure.css is developed by yahoo for working with mobile and other screen size devices.
Why do we need pure.css?
- The pure.css is a tiny and lightweight framework and the file size is less than 4.8KB with the zipped file.
- The pur.css is necessary for websites to fit easily layout and elements on all screen size devices and especially on mobile.
- The pure.css is helping to remove the cross-browser compatibility issue because of the Normalize.css base.
- The pure.css is a minimum look with easy and one-click customize using skin builder.
- The pure.css not only for responsive framework but also non-responsive module available in the framework.
- The pure.css is not dependent on any JavaScript and jQuery library but the design is flat and minimum modules requirements.
- The pure.css has prebuilt main elements like buttons, dropdown menu, forms, grids, and tables.
- The pure.css keeps steady or constant colors and shades across the many platforms.
- The pure.css is easy and user friendly because this framework does not require any installation.
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 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 of the pure.css are below.
-
- The pure.css creates websites without making cookie-cutter.
- The pure.css is free for using a responsive framework.
- The pure.css is supported by advanced SEO optimization for websites.
- The pure.css is easy to use because it does not need any installation.
- The pure.css does not depend on JavaScript and JQuery library for simple validation.
- The pure.css added an extra module and element without any error.
- The disadvantages of pure.css are below.
-
- The pure.css can use the JavaScript library for complicated responsive design.
- The pure.css has a restriction for choosing the template and design pattern of the web design.
- The pure.css has a small scale of the development community and little technical support for designing.
- The pure.css has a minimal, simple framework, and font awesome does not support by default in the framework.
Usage of pure.css
- The pure.css is useful for simple and mobile-friendly websites and web design.
- The pure.css is a fit web application into all types of device size as per screen width.
- The pure.css is creating responsive tables, buttons, form, and dropdown list in the web app.
- The pure.css is supporting to make style, bold color, shadows in the framework.
- The pure.css is an alternative to the bootstrap framework to create a class for a responsive web application.
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
The pure.css is user friendly, attractive, and elegant framework for website design. The pure.css is a laptop, desktop, tablet, and mobile-friendly module for users. The pure.css is useful for tiny, space-saving websites and web applications as per the user’s requirement.
Recommended Articles
This is a guide to Pure CSS. Here we discuss the Introduction, Syntax, How pure.css works?, Why do we need pure.css? and example with code implementation. You may also have a look at the following articles to learn more –
