TutorialsArena

Pure.css Interview Questions and Answers

This section covers frequently asked Pure.css interview questions, focusing on its features, responsive design capabilities, and usage methods.

What is Pure.css?

Pure.css is a small, responsive CSS framework developed by Yahoo. It's designed to create clean, fast, and mobile-friendly websites using only standard CSS (no JavaScript dependencies).

Key Features of Pure.css

  • Free and open-source.
  • Responsive design capabilities (adapts to different screen sizes).
  • Minimal footprint (small file size).
  • Modular design (reusable components).
  • Consistent styling across browsers and devices.

More information on Pure.css features

Standard CSS in Pure.css

Pure.css uses only standard CSS; it does not depend on JavaScript libraries like jQuery, making it lightweight and highly performant.

Using Pure.css: Local Installation vs. CDN

You can use Pure.css in two ways:

  1. Local Installation: Download the pure.css file and include it in your HTML.
  2. CDN (Content Delivery Network): Include the pure.css file directly from a CDN (like yui.yahooapis.com).

Pure.css Responsive Design Classes

Pure.css provides classes for responsive design:

  • .pure-u-*: Specifies the width of a grid unit (e.g., .pure-u-1-2 for 50% width).
  • .pure-u-sm-*, .pure-u-md-*, .pure-u-lg-*, .pure-u-xl-*: Responsive widths for small, medium, large, and extra-large screens.

Pure.css Grids

Pure.css grids use these classes:

  • .pure-g: The grid container.
  • .pure-u-*: Grid units (specify width as a fraction).

Using Pure.css Grids

  1. The grid container has the class pure-g.
  2. Grid units (children of the container) use pure-u-* classes.
  3. Widths are expressed as fractions (e.g., pure-u-1-2 for half width).

Extensibility in Pure.css

Pure.css is designed to be easily extended. You can add your custom styles to modify the default styles without needing to override a large amount of CSS.

Local Installation of Pure.css

Download pure-min.css and link it in your HTML's <head> section. (pure-min.css is a minified version for smaller file size.)

HTML Example

<link rel="stylesheet" href="/css/pure-min.css">

Using Pure.css via CDN

Include the Pure.css file directly from a CDN in your HTML's <head>:

HTML Example

<link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css" integrity="sha384-yHIFecQ9xKXd+dOo8q6m/20/fsH0/j/6W41Q6S9E/6/Uk8bJ68N+K3/m0bV2tP/w=" crossorigin="anonymous">

Pure.css Menus

Pure.css supports vertical and horizontal menus. Add the class pure-menu-horizontal to a menu to make it horizontal.

More information on Pure.css Menus

Pure.css Forms

Pure.css provides styles for creating forms. Classes like pure-form, pure-form-stacked, pure-form-aligned, and pure-input-rounded enhance the look and feel of your forms. It also offers specific styles for buttons, checkboxes, and radio buttons.