Interview Questions

AJAX Interview Questions Android Interview Questions Angular 2 Interview Questions AngularJs Interview Questions Apache Presto Interview Questions Apache Tapestry Interview Questions Arduino Interview Questions ASP.NET MVC Interview Questions Aurelia Interview Questions AWS Interview Questions Blockchain Interview Questions Bootstrap Interview Questions C Interview Questions C Programming Coding Interview Questions C# Interview Questions C++ Interview Questions Cakephp Interview Questions Cassandra Interview Questions CherryPy Interview Questions Clojure Interview Questions Cobol Interview Questions CodeIgniter interview Questions CoffeeScript Interview Questions Cordova Interview Questions CouchDB interview questions CSS Buttons Interview Questions CSS Interview Questions D Programming Language Interview Questions Dart Programming Language Interview Questions Data structure & Algorithm Interview Questions DB2 Interview Questions DBMS Interview Questions Django Interview Questions Docker Interview Questions DOJO Interview Questions Drupal Interview Questions Electron Interview Questions Elixir Interview Questions Erlang Interview Questions ES6 Interview Questions and Answers Euphoria Interview Questions ExpressJS Interview Questions Ext Js Interview Questions F# Interview Questions Firebase Interview Questions Flask Interview Questions Flex Interview Questions Fortran Interview Questions Foundation Interview Questions Framework7 Interview Questions FuelPHP Framework Interview Questions Go Programming Language Interview Questions Google Maps Interview Questions Groovy interview Questions GWT Interview Questions Hadoop Interview Questions Haskell Interview Questions Highcharts Interview Questions HTML Interview Questions HTTP Interview Questions Ionic Interview Questions iOS Interview Questions IoT Interview Questions Java BeanUtils Interview Questions Java Collections Interview Questions Java Interview Questions Java JDBC Interview Questions Java Multithreading Interview Questions Java OOPS Interview Questions Java Programming Coding Interview Questions Java Swing Interview Questions JavaFX Interview Questions JavaScript Interview Questions JCL (Job Control Language) Interview Questions Joomla Interview Questions jQuery Interview Questions js Interview Questions JSF Interview Questions JSP Interview Questions KnockoutJS Interview Questions Koa Interview Questions Laravel Interview Questions Less Interview Questions LISP Interview Questions Magento Interview Questions MariaDB Interview Questions Material Design Lite Interview Questions Materialize CSS Framework Interview Questions MathML Interview Questions MATLAB Interview Questions Meteor Interview Questions MongoDB interview Questions Moo Tools Interview Questions MySQL Interview Questions NodeJS Interview Questions OpenStack Interview Questions Oracle DBA Interview Questions Pascal Interview Questions Perl interview questions Phalcon Framework Interview Questions PhantomJS Interview Questions PhoneGap Interview Questions Php Interview Questions PL/SQL Interview Questions PostgreSQL Interview Questions PouchDB Interview Questions Prototype Interview Questions Pure CSS Interview Questions Python Interview Questions R programming Language Interview Questions React Native Interview Questions ReactJS Interview Questions RequireJs Interview Questions RESTful Web Services Interview Questions RPA Interview Questions Ruby Interview Questions Ruby on Rails Interview Questions SAS Interview Questions SASS Interview Questions Scala Interview Questions Sencha Touch Interview Questions SEO Interview Questions Servlet Interview Questions SQL Interview Questions SQL Server Interview Questions SQLite Interview Questions Struts Interview Questions SVG Interview Questions Swift Interview Questions Symfony PHP Framework Interview Questions T-SQL(Transact-SQL) Interview Questions TurboGears Framework Interview Questions TypeScript Interview Questions UiPath Interview Questions VB Script Interview Questions VBA Interview Questions WCF Interview Questions Web icon Interview Questions Web Service Interview Questions Web2py Framework Interview Questions WebGL Interview Questions Website Development Interview Questions WordPress Interview Questions Xamarin Interview Questions XHTML Interview Questions XML Interview Questions XSL Interview Questions Yii PHP Framework Interview Questions Zend Framework Interview Questions

Top 15 Pure CSS Interview Questions for 2022

1) What is Pure CSS?

Pure is a CSS (Cascading Style Sheet) framework. It is a collection of small set of responsive CSS modules. We can integrate it to any web application.It is developed byJames Alley and YAHOO. It is design to create faster and responsive websites.

2) How can we use Pure CSS?

We can use Pure CSS by using two ways:
  • CDN Based Version: We can include the pure.css file into our HTML code directly from the Content Delivery Network (CDN).
  • Local Installation: We can download the pure.css file on our local machine and include it in HTML code.

3) What is Responsive Design in Pure CSS?

Responsive design is defined as following:
  • Pure has in-built responsive design. It resizes automatically as per the device size.
  • Pure has 12 columns. Mobile-first fluid supports responsive classes for small, large, and medium screen sizes.
  • Pure classes enable website to fit any screen size.
  • The websites is fully compatible with PC, tablets and mobiledevices.

4) What are the features of PureCSS?

There are various featuresof Pure CSS that are given below.
  • It is used to build responsive design.
  • It has various common table styles.
  • It has standard VSS with minimal footprint.
  • It is a set of small, responsive CSS module.
  • It is free to use.
  • Its file size is 4.5KB

5) What are the default responsive breakpoints in Pure CSS?

In Pure CSS,the default responsive breakpoints are:
KEY CSS Media Query Applies Classname
None None Always .pure-u-*
Sm @media screen and (min-width: 35.5em) ≥ 568px .pure-u-sm-*
Md @media screen and (min-width: 48em) ≥ 768px .pure-u-md-*
Lg @media screen and (min-width: 64em) ≥ 1024px .pure-u-lg-*
Xl @media screen and (min-width: 80em) ≥ 1280px .pure-u-xl-*

6) How can we use row and column in Pure CSS?

In Pure CSS, we can use row and column by using following class:
  • Column: Pure-g class is used.
  • Row: pure-u class is used.
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>

7) What are the different types of Models inPure CSS?

Pure CSS provides following models:
  • Base
  • Grid
  • Forms
  • Buttons
  • Tables
  • Menus etc.

8) How can we include Pure CSS files in HTML files?

We can include Pure CSS file in HTML files by using following steps:
<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>

9) How can we create responsive image in Pure CSS?

We can create responsive image in Pure CSS by using pure-img class. Example
<imgclassimgclass="pure-img"src="purelogo.jpg"alt="html5">

10) What are the various table classes in Pure CSS?

In Pure CSS, following are the table classes.
Table classes Description
pure-table It represents a basic table with any default padding, border and an emphasized header.
pure-table-bordered It is used to draw a table with a border across rows.
pure-table-horizontal It is used to draw a table with horizontal lines.
pure-table-striped It is used to display a stripped table.
pure-table-odd It is used to create a zebra-styled effect.

11) What is Pure CSS button?

Pure CSS provides attractive and responsive buttons. Following are the button classes.
  • Pure-button: It represents a standard button.
  • Pure-button-disabled: Itrepresents a disabled button and it is used along with pure-button.
  • pure-button-active: It represents a pressed button and it is used along with along with pure-button.

12) How can we create horizontal menu in pure CSS?

In Pure.CSS, we can create horizontal menu by using following steps:
<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>

13) What are the form classes in PureCSS?

Pure CSS form classes are tabled below.
Form class Descriptions
Pure-form It is used to represent a compact inline form.
Pure-form-stacked It is used to representfrom with input element.
Pure-form-aligned It is used to represent an aligned from with input elements.
Pure-input-rounded It is used to display a form control with rounded corners.
Pure-button It is used to create attractive button.
Pure-checkbox It is used to create a checkbox.
Pure-radio It is used to create a radio button.

14) What are the icons Libraries supported by Pure CSS?

Pure CSS supports following icon libraries that are:
  • Font Awesome Icons
  • Google Material Icons
  • Bootstrap Icons

15) What are the browsers supported by Pure CSS?

Pure CSS supports following updated browsers that are given below:
  • IE 8+
  • Latest Stable: Firefox, Chrome and Safari



ADVERTISEMENT
ADVERTISEMENT