Pure.CSS Interview Questions & Answers

4 avg. rating (80% score) - 1 votes

Pure.CSS Interview Questions & Answers

Pure.CSS is one kind of framework in CSS. It is combination of small sets of CSS components or modules that can be used in any application. This is very small in size. Formatting can be done to the text, paragraph etc. This file can be referenced externally as well. This is developed by Yahoo. Compared to CSS, it is very fast and responsive. Having experienced in Pure.CSS is very helpful in giving preference to you. There are number of positions available across all the locations. Wisdomjobs focus on providing interview questions and answers to help you in clearing the interview with ease. Pure.CSS interview questions and answers are useful to attend job interviews and get shortlisted for job position. Check out interview questions page to get more information.

Pure.CSS Interview Questions

Pure.CSS Interview Questions

    1. Question 1. What Is Pure?

      Answer :

      Pure is a Cascading Style Sheet (CSS) developed by YAHOO. It helps in creating faster, beautiful, and responsive websites.

      Some of its salient features are as follows:

      • In-built responsive designing
      • Standard CSS with minimal footprint
      • Set of small, responsive CSS modules
      • Free to use

    2. Question 2. What Is Responsive Design?

      Answer :

      • Pure has in-built responsive designing so that the website created using Pure will redesign itself as per the device size.
      • Pure has a 12 column mobile-first fluid grid that supports responsive classes for small, large, and medium screen sizes.
      • Pure classes are created in such a way that the website can fit any screen size.
      • The websites created using Pure are fully compatible with PC, tablets, and mobile devices.

    3. Question 3. What Is Standard Css?

      Answer :

      • Pure uses standard CSS only and it is very easy to learn.
      • There is no dependency on any external JavaScript library such as jQuery.

    4. Question 4. What Is Extensible?

      Answer :

      • Pure is by design very minimal and flat.
      • It is designed considering the fact that it is much easier to add new CSS rules than to overwrite existing CSS rules.
      • By adding a few lines of CSS, Pure's appearance can be customized to work with an existing web project.
      • It supports shadows and bold colors.
      • The colors and shades remain uniform across various platforms and devices.
      • And most important of all, it is absolutely free to use.

    5. Question 5. How To Use Pure.css?

      Answer :

      There are two ways to use Pure:

      • Local Installation - You can download the pure.css file on your local machine 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. Question 6. What Is Local Installation?

      Answer :

      downloaded pure-min.css file in a directory of your website, e.g. /css.

      Example: Now you can include the css file in your HTML file as follows −

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

    7. Question 7. What Is Cdn Based Version?

      Answer :

      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.

      We are using yui.yahooapis.com CDN version of the library throughout this tutorial.

      Example: Now let us rewrite the above example using pure.css from PureCSS.io CDN.

      <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 #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>

    8. Question 8. What Is Pure.css Responsive Design?

      Answer :

      PURE.CSS has several special classes to create a responsive design.

      1. .pure-u-*: Sets the container to occupy required space on any device.
      2. .pure-u-sm-*: Sets the container to occupy required space on a devices with width ≥ 568px.
      3. .pure-u-md-*: Sets the container to occupy required space on a devices with width ≥ 768px.
      4. .pure-u-lg-*: Sets the container to occupy required space on a devices with width ≥ 1024px.
      5. .pure-u-xl-*: Sets the container to occupy required space on a devices with width ≥ 1280px.

    9. Question 9. What Is Pure.css Grids?

      Answer :

      PURE.CSS provides concept of Pure Grid with two types of classes, pure-g, a grid class and unit classes, pure-u-*. Following are the rules to use Pure 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 to be a part of a grid unit to be rendered properly.

    10. Question 10. What Are Grid Unit Sizes?

      Answer :

      Pure Grid comes with 5th and 24th unit sizes. Following illustrations shows the examples of some of the available units which can be appended to pure-ui-. For example, to create a cell of 50% width, you can use a css style pure-ui-1-2.

    11. Question 11. What Is Pure.css Forms?

      Answer :

      PURE.CSS has a very beautiful and responsive CSS for form designing. The following CSS are used:

      1. pure-form: Represents a compact inline form.
      2. pure-form-stacked: Represents a stacked form with input elements below the labels. To be used with pure-form.
      3. pure-form-aligned: Represents an aligned form with input elements below the labels. To be used with pure-form.
      4. pure-input-rounded: Displays a form control with rounded corners
      5. pure-button: Beautifies a button.
      6. pure-checkbox: Beautifies a checkbox.
      7. pure-radio: Beautifies a radio.

    12. Question 12. What Is Pure.css Buttons?

      Answer :

      PURE.CSS has a very beautiful and responsive CSS for customizing the look of a button. The following CSS are used:

      1. pure-button: Represents a standard button. Can be used to style a link and button as well.
      2. pure-button-disabled: Represents a disabled button. To be used along with pure-button.
      3. pure-button-active: Represents a pressed button. To be used along with pure-button.

    13. Question 13. What Is Pure.css Tables?

      Answer :

      PURE.CSS can be used to display different types of tables using various styles over pure-table.

      1. pure-table: Represents a basic table with any a default padding, border and an emphasized header.
      2. pure-table-bordered: Draws a table with a border across rows.
      3. pure-table-horizontal: Draws a table with horizontal lines.
      4. pure-table-striped: Displays a stripped table.
      5. pure-table-odd: If applied on every other tr,changes the background of the row and creates a zebra-styled effect.

    14. Question 14. What Is Pure.css Images?

      Answer :

      Pure.CSS provides options to display images in responsive way using pure-image as the main class.

      pure-img: Represents a basic styled image without any border. Image grows and shrinks with the content maintaining the correct ratio

    15. Question 15. What Is Pure.css Icons?

      Answer :

      PURE.CSS supports the following popular icon libraries:

      • Font Awesome Icons
      • Google Material Icons
      • Bootstrap Icons

      Usage: To use an icon, put the name of the icon in the class of an HTML <i> element.

    16. Question 16. What Is Vertical Menu?

      Answer :

      Menus are vertical by default. Minimal default styling and low-specificity selectors make them easy to customize. By default, menu items take up 100% of the width of their container, so you may want to limit the menu width or set the menu to display:inline-block.

      eg:

      YAHOO SITES
      Flickr
      Messenger
      Sports
      Finance
      MORE SITES
      Games
      News
      OMG!
      Yahoo Sites

      <style>
      .custom-restricted-width {
          /* To limit the menu width to the content of the menu: */
          display: inline-block;
          /* Or set the width explicitly: */
          /* width: 10em; */
      }
      </style>
      <div class="pure-menu custom-restricted-width">
          <span class="pure-menu-heading">Yahoo Sites</span>
          <ul class="pure-menu-list">
              <li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
              <li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</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>
              <li class="pure-menu-heading">More Sites</li>
              <li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a></li>
              <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">OMG!</a></li>
          </ul>
      </div>

    17. Question 17. What Is Horizontal Menu?

      Answer :

      To create a horizontal menu, add the pure-menu-horizontal class name.

      eg: BRAND |News |Sports | Finance

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

    18. Question 18. What Is Dropdowns?

      Answer :

      We recommend enabling submenus via JavaScript to enable accessibility. To help get you started, an example script written in vanilla JS provides ARIA support, limited submenu arrow-key navigation, and the ability to dismiss menus with an outside event or the ESC key. But you may wish to go further by adding edge detection, comprehensive arrow-key navigation, and polyfills for compatibility with old browsers.

      Even with JavaScript in place, you still might want to display submenus on hover. Just add pure-menu-allow-hover to the pure-menu-has-children list item. This can be nice for desktop users and provides a fallback for users with no JavaScript.

    19. Question 19. What Is Vertical Menu With Submenus?

      Answer :

      The same construct used to create dropdowns works in vertical menus as well. You may nest submenus, but keep in mind that complex menus can present usability challenges on small screens.

    20. Question 20. What Is Scrollable Horizontal Menu?

      Answer :

      To create a scrollable horizontal menu, add the pure-menu-scrollable class name. When there isn't enough room, the menu items can be scrolled or flicked. Dropdown menus are not supported.

    21. Question 21. What Is Scrollable Vertical Menu?

      Answer :

      To create a scrollable vertical menu, limit the height of your menu, and then add the pure-menu-scrollable class name. The menu items can be scrolled or flicked. Submenus are not supported.

Pure.CSS Related Tutorials

Pure.CSS Related Interview Questions

Pure.CSS Related Practice Tests

List of Tutorials

List of Topics

Interview Questions

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Pure.CSS Tutorial