Google News
logo
Pure.CSS Interview Questions
Pure.CSS is a Cascading Style Sheet (CSS) framework developed by Yahoo. It is used to make website faster, beautiful and responsive.
* 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.
* 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.
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.
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).
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> 
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>
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.
PURE.CSS provides concept of Pure Grid with two types of classes:
 
pure-g : A grid class

pure-u-* : A unit class
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.