Top Pure.CSS Interview Questions and Answers-(2024)

1 .

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 supports shadow and bold colors.
* It uses satandard CSS with minimal footprint.
* It is a collection of small, responsive CSS modules.

* The colors and shades remain uniform across various platforms and devices.

3 .

What Is Responsive Design in Pure.CSS?

* Pure has in-constructed responsive designing in order that the internet site created the usage of Pure will redesign itself as consistent with the tool length.

* Pure has a 12 column cellular-first fluid grid that supports responsive instructions for small, large, and medium display sizes.

* Pure lessons are created in one of these way that the website can in shape any display size.

* The web sites created the use of Pure are absolutely like minded with PC, capsules, and cellular gadgets.

4 .

What Is 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.

5 .

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).

6 .

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>

7 .

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>

8 .

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.

9 .

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

10 .

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.

11 .

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.

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.

13 .

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".

14 .

What Is Vertical Menu?

Menus are vertical by way of default. Minimal default styling and low-specificity selectors cause them to clean to customise. By default, menu objects soak up one hundred% of the width of their container, so that you can also need to restrict the menu width or set the menu to show:inline-block.

15 .

What is Horizontal Menu?

A horizontal website navigation bar is a list of links at the top of each page. It may be above, below, to the left or to the right of the header or logo, but it is always placed before the main content of the page and is consistent on every page.