300+ TOP Pure.CSS Interview Questions [UPDATED]

    1. 1. What Is Pure?
      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

 

    1. 2. What Is Responsive Design?
      • 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.

 
XML Interview Questions

    1. 3. What Is Standard Css?
      • Pure uses standard CSS only and it is very easy to learn.
      • There is no dependency on any external JavaScript library such as jQuery.

 
 

    1. 4. What Is Extensible?
      • 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.

 
XML Tutorial

    1. 5. How To Use Pure.css?
      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).

 
CSS3 Interview Questions

    1. 6. What Is Local Installation?
      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 −
       

       

       

       

      First Column

       

      Second Column

       

      Third Column

       

       

       

 
 

    1. 7. What Is Cdn Based Version?
      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.
       

       

       

       

      First Column

       

      Second Column

       

      Third Column

       

       

       
       

 
CSS3 Tutorial
HTML Interview Questions

    1. 8. What Is Pure.css Responsive Design?
      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.

 
 

    1. 9. What Is Pure.css Grids?
      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.

 
Dreamweaver Interview Questions

    1. 10. What Are Grid Unit Sizes?
      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.

 
HTML Tutorial

    1. 11. What Is Pure.css Forms?
      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.

 
UI Developer Interview Questions

    1. 12. What Is Pure.css Buttons?
      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.

 
 
XML Interview Questions

    1. 13. What Is Pure.css Tables?
      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.

 
CSS Tutorial

    1. 14. What Is Pure.css Images?
      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

 
 

    1. 15. What Is Pure.css Icons?
      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 element.

 
CSS Interview Questions

    1. 16. What Is Vertical Menu?
      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

       

      Yahoo Sites
    2. Flickr
    4. Messenger
    6. Sports
    8. Finance
    10. More Sites
    12. Games
    14. News
    16. OMG!
    17.  

 
 
CSS Advanced Tutorial

    1. 17. What Is Horizontal Menu?
      To create a horizontal menu, add the pure-menu-horizontal class name.
      eg: BRAND |News |Sports | Finance

      BRAND
    2. News
    4. Sports
    6. Finance
    7.  

 
CSS Advanced Interview Questions

    1. 18. What Is Dropdowns?
      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.

 
 
CSS3 Interview Questions

    1. 19. What Is Vertical Menu With Submenus?
      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.

 
WordPress Tutorial

    1. 20. What Is Scrollable Horizontal Menu?
      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.

 
 
WordPress Interview Questions

    1. 21. What Is Scrollable Vertical Menu?
      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.