Pure.CSS Interview Quetions

1) What is Pure.CSS?

Pure.CSS is a Cascading Style Sheet (CSS) framework developed by Yahoo. It is used to make website faster, beautiful and responsive.

2) Which are the important features of Pure.CSS?

It is free.
It has in-built responsive designing.
It uses satandard CSS with minimal footprint.
It is a collection of small, responsive CSS modules.
It supports shadow and bold colors.
The colors and shades remain uniform across various platforms and devices.

For more Information: Click Here

3) What do you mean by Standard CSS?

Standard CSS is very easy to lean and there is no dependency on any external JavaScript library such as jQuery. Standard CSS is used by Pure.CSS.

4) How to use Pure.CSS?

There are two methods to use Pure.CSS:

Local Installation: You can download the pure.css file on your system and include it in your HTML code.
CDN Based Version: You can include the pure.css file into your HTML code directly from the Content Delivery Network (CDN).

5) What do you understand by Pure.CSS Responsive Design?

PURE.CSS provides several special classes to create a responsive design:

.pure-u-*: It is used to set the container to occupy required space on any device.
.pure-u-sm-*: It is used to set the container to occupy required space on a devices with width ? 568px.
.pure-u-md-*: It is used to set the container to occupy required space on a devices with width ? 768px.
.pure-u-lg-*: It is used to set the container to occupy required space on a devices with width ? 1024px.
.pure-u-xl-*: It is used to set the container to occupy required space on a devices with width ? 1280px.

6) What is Pure.CSS grids?

PURE.CSS provides concept of Pure Grid with two types of classes:

pure-g: A grid class
pure-u-*: A unit class

7) How do you Pure.CSS grid?

Following are the rules to use Pure.CSS Grids:

Widths of Units are in fractions. For example, pure-u-1-2 represents 1/2 or 50% width, pure-u-2-5 represents 2/5 or 40% width and so on.
Children of Pure Grid (element with pure-g class) must be using pure-u or pure-u-* classnames.
All content should be a part of a grid unit to be rendered properly.

8) What do you mean by the term extensible in Pure.CSS?

Pure is elegant, simple, and lightweight. It is very easy to work with. The biggest advantage of using Pure CSS is it is built to be extensible. You can simply add a few styles in your own CSS and change the look to your website.

9) What is local installation of Pure.CSS?

Local installation is a process of downloading pure-min.css file in a directory of your website, e.g. /css and then use the CSS file in your HTML page.

Example:

<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 yellow;
            border-bottom: 1px solid red; 
            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>

10) How do you use CDN based version of Pure.CSS?

You can include the Pure.CSS file into your HTML code directly from the Content Delivery Network (CDN). yui.yahooapis.com provides content for the latest version.

Example:

<html>
   <head>
      <title>The PURE.CSS Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
  
  <style>
.grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid yellow;
            border-bottom: 1px solid red; 
            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>

11) What is Pure.CSS Menus?

There are two types of menus in Pure.CSS:

Vertical menu
Horizontal menu

Pure.CSS provides vertical menus by default. You can change the vertical menu to horizontal menu by adding the class name "pure-menu-horizontal".

For more Information: Click Here

12) What is Pure.CSS form?

Pure.CSS has a very easy and responsive CSS to design a form. You can create different types of forms using Pure.CSS. Following is a list of some classnames:

pure-form: It specifies a compact inline form.
pure-form-stacked: It represents a stacked form with input elements below the labels. To be used with pure-form.
pure-form-aligned: It represents an aligned form with input elements below the labels. To be used with pure-form.
pure-input-rounded: It is used to display a form control with rounded corners
pure-button: It is used to beautify a button.
pure-checkbox: It is used to beautify a checkbox.
pure-radio: It is used to beautify a radio.