1) What is Pure CSS?
Pure is a CSS (Cascading Style Sheet) framework. It is a collection of small set of responsive CSS modules. We can integrate it to any web application.It is developed byJames Alley and YAHOO.
It is design to create faster and responsive websites.
2) How can we use Pure CSS?
We can use Pure CSS by using two ways:
- CDN Based Version: We can include the pure.css file into our HTML code directly from the Content Delivery Network (CDN).
- Local Installation: We can download the pure.css file on our local machine and include it in HTML code.
3) What is Responsive Design in Pure CSS?
Responsive design is defined as following:
- Pure has in-built responsive design. It resizes automatically as per the device size.
- Pure has 12 columns. Mobile-first fluid supports responsive classes for small, large, and medium screen sizes.
- Pure classes enable website to fit any screen size.
- The websites is fully compatible with PC, tablets and mobiledevices.
4) What are the features of PureCSS?
There are various featuresof Pure CSS that are given below.
- It is used to build responsive design.
- It has various common table styles.
- It has standard VSS with minimal footprint.
- It is a set of small, responsive CSS module.
- It is free to use.
- Its file size is 4.5KB
5) What are the default responsive breakpoints in Pure CSS?
In Pure CSS,the default responsive breakpoints are:
| KEY |
CSS Media Query |
Applies |
Classname |
| None |
None |
Always |
.pure-u-* |
| Sm |
@media screen and (min-width: 35.5em) |
≥ 568px |
.pure-u-sm-* |
| Md |
@media screen and (min-width: 48em) |
≥ 768px |
.pure-u-md-* |
| Lg |
@media screen and (min-width: 64em) |
≥ 1024px |
.pure-u-lg-* |
| Xl |
@media screen and (min-width: 80em) |
≥ 1280px |
.pure-u-xl-* |
6) How can we use row and column in Pure CSS?
In Pure CSS, we can use row and column by using following class:
- Column: Pure-g class is used.
- Row: pure-u class is used.
Example:
<div class = "pure-g">
<div class = "pure-u-1-3"><p>First Column</p></div>
<div class = "pure-u-1-3"><p>Second Column</p></div>
<div class = "pure-u-1-3"><p>Third Column</p></div>
</div>
7) What are the different types of Models inPure CSS?
Pure CSS provides following models:
- Base
- Grid
- Forms
- Buttons
- Tables
- Menus etc.
8) How can we include Pure CSS files in HTML files?
We can include Pure CSS file in HTML files by using following steps:
<html>
<head>
<title>The PURE.CSS Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="pure-min.css">
<style>
.grids-example {
background: rgb(250, 250, 250);
margin: 2em auto;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
font-family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: center;
}
</style>
</head>
<body>
<div class="grids-example">
<div class="pure-g">
<div class="pure-u-1-3"><p>First Column</p></div>
<div class="pure-u-1-3"><p>Second Column</p></div>
<div class="pure-u-1-3"><p>Third Column</p></div>
</div>
</div>
</body>
</html>
9) How can we create responsive image in Pure CSS?
We can create responsive image in Pure CSS by using
pure-img class.
Example
<imgclassimgclass="pure-img"src="purelogo.jpg"alt="html5">
10) What are the various table classes in Pure CSS?
In Pure CSS, following are the table classes.
| Table classes |
Description |
| pure-table |
It represents a basic table with any default padding, border and an emphasized header. |
| pure-table-bordered |
It is used to draw a table with a border across rows. |
| pure-table-horizontal |
It is used to draw a table with horizontal lines. |
| pure-table-striped |
It is used to display a stripped table. |
| pure-table-odd |
It is used to create a zebra-styled effect. |
11) What is Pure CSS button?
Pure CSS provides attractive and responsive buttons. Following are the button classes.
- Pure-button: It represents a standard button.
- Pure-button-disabled: Itrepresents a disabled button and it is used along with pure-button.
- pure-button-active: It represents a pressed button and it is used along with along with pure-button.
12) How can we create horizontal menu in pure CSS?
In Pure.CSS, we can create horizontal menu by using following steps:
<div class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">BRAND</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
</ul>
</div>
13) What are the form classes in PureCSS?
Pure CSS form classes are tabled below.
| Form class |
Descriptions |
| Pure-form |
It is used to represent a compact inline form. |
| Pure-form-stacked |
It is used to representfrom with input element. |
| Pure-form-aligned |
It is used to represent an aligned from with input elements. |
| Pure-input-rounded |
It is used to display a form control with rounded corners. |
| Pure-button |
It is used to create attractive button. |
| Pure-checkbox |
It is used to create a checkbox. |
| Pure-radio |
It is used to create a radio button. |
|
|
14) What are the icons Libraries supported by Pure CSS?
Pure CSS supports following icon libraries that are:
- Font Awesome Icons
- Google Material Icons
- Bootstrap Icons
15) What are the browsers supported by Pure CSS?
Pure CSS supports following updated browsers that are given below:
- IE 8+
- Latest Stable: Firefox, Chrome and Safari
