Pure.CSS Interview Questions – Set 01

by

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

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.

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.

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.

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.

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

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.

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.

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

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.