Top 100+ Pure.css Interview Questions And Answers
Question 1. What Is Pure?
Answer :
Pure is a Cascading Style Sheet (CSS) evolved through YAHOO. It helps in creating quicker, beautiful, and responsive web sites.
Some of its salient features are as follows:
In-built responsive designing
Standard CSS with minimum footprint
Set of small, responsive CSS modules
Free to use
Question 2. What Is Responsive Design?
Answer :
Pure has in-constructed responsive designing in order that the internet site created the usage of Pure will redesign itself as consistent with the tool length.
Pure has a 12 column cellular-first fluid grid that supports responsive instructions for small, large, and medium display sizes.
Pure lessons are created in one of these way that the website can in shape any display size.
The web sites created the use of Pure are absolutely like minded with PC, capsules, and cellular gadgets.
XML Interview Questions
Question 3. What Is Standard Css?
Answer :
Pure makes use of wellknown CSS handiest and it's miles very clean to learn.
There isn't any dependency on any external JavaScript library together with jQuery.
Question 4. What Is Extensible?
Answer :
Pure is via layout very minimal and flat.
It is designed thinking about the reality that it's far a lot easier to add new CSS regulations than to overwrite existing CSS policies.
By adding a few traces of CSS, Pure's look can be custom designed to work with an present web assignment.
It supports shadows and formidable colours.
The colorings and sun shades stay uniform throughout numerous systems and devices.
And most crucial of all, it's miles definitely free to apply.
XML Tutorial
Question five. How To Use Pure.Css?
Answer :
There are two ways to use Pure:
Local Installation - You can download the natural.Css document in your local gadget and include it on your HTML code.
CDN Based Version - You can encompass the pure.Css file into your HTML code directly from the Content Delivery Network (CDN).
CSS3 Interview Questions
Question 6. What Is Local Installation?
Answer :
downloaded pure-min.Css file in a listing of your internet site, e.G. /css.
Example: Now you can include the css report for your HTML report 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
historical past: rgb(250, 250, 250);
margin: 2em car;
border-top: 1px stable #ddd;
border-bottom: 1px strong #ddd;
font-own family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: middle;
</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>
Question 7. What Is Cdn Based Version?
Answer :
You can include the natural.Css file into your HTML code at once from the Content Delivery Network (CDN). Yui.Yahooapis.Com presents content for the cutting-edge version.
We are the use of yui.Yahooapis.Com CDN model of the library at some stage in this academic.
Example: Now allow us to 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-instance
background: rgb(250, 250, 250);
margin: 2em car;
border-top: 1px strong #ddd;
border-backside: 1px strong #ddd;
font-own family: Consolas, 'Liberation Mono', Courier, monospace;
text-align: middle;
</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>
CSS3 Tutorial HTML Interview Questions
Question 8. What Is Pure.Css Responsive Design?
Answer :
PURE.CSS has several special training to create a responsive layout.
.Pure-u-*: Sets the field to occupy required area on any tool.
.Natural-usa-*: Sets the box to occupy required area on a devices with width ≥ 568px.
.Natural-u-md-*: Sets the field to occupy required space on a devices with width ≥ 768px.
.Natural-u-lg-*: Sets the box to occupy required space on a devices with width ≥ 1024px.
.Natural-u-xl-*: Sets the container to occupy required area on a devices with width ≥ 1280px.
Question 9. What Is Pure.Css Grids?
Answer :
PURE.CSS offers idea of Pure Grid with forms of training, pure-g, a grid class and unit instructions, natural-u-*. Following are the regulations to use Pure Grids.
Widths of Units are in fractions. For example, pure-u-1-2 represents half or 50% width, natural-u-2-five represents 2/5 or 40% width and so on.
Children of Pure Grid (element with natural-g elegance) ought to be the use of natural-u or natural-u-* classnames.
All content need to to be a part of a grid unit to be rendered well.
Dreamweaver Interview Questions
Question 10. What Are Grid Unit Sizes?
Answer :
Pure Grid comes with 5th and twenty fourth unit sizes. Following illustrations shows the examples of some of the to be had devices which may be appended to pure-ui-. For instance, to create a cellular of fifty% width, you may use a css fashion pure-ui-1-2.
HTML Tutorial
Question 11. What Is Pure.Css Forms?
Answer :
PURE.CSS has a totally stunning and responsive CSS for shape designing. The following CSS are used:
natural-form: Represents a compact inline form.
Natural-form-stacked: Represents a stacked form with input elements beneath the labels. To be used with pure-shape.
Natural-form-aligned: Represents an aligned form with input factors beneath the labels. To be used with natural-form.
Natural-input-rounded: Displays a shape control with rounded corners
pure-button: Beautifies a button.
Pure-checkbox: Beautifies a checkbox.
Pure-radio: Beautifies a radio.
UI Developer Interview Questions
Question 12. What Is Pure.Css Buttons?
Answer :
PURE.CSS has a completely stunning and responsive CSS for customizing the appearance of a button. The following CSS are used:
natural-button: Represents a preferred button. Can be used to style a hyperlink and button as properly.
Pure-button-disabled: Represents a disabled button. To be used in conjunction with natural-button.
Pure-button-energetic: Represents a pressed button. To be used along with natural-button.
XML Interview Questions
Question thirteen. What Is Pure.Css Tables?
Answer :
PURE.CSS can be used to show special varieties of tables the usage of diverse patterns over natural-table.
Pure-desk: Represents a simple table with any a default padding, border and an emphasized header.
Pure-table-bordered: Draws a table with a border throughout rows.
Natural-desk-horizontal: Draws a desk with horizontal traces.
Pure-table-striped: Displays a stripped table.
Natural-desk-peculiar: If carried out on every other tr,modifications the background of the row and creates a zebra-styled impact.
CSS Tutorial
Question 14. What Is Pure.Css Images?
Answer :
Pure.CSS provides options to show snap shots in responsive way the use of pure-photo as the primary class.
Pure-img: Represents a basic styled picture without any border. Image grows and shrinks with the content retaining the suitable ratio
Question 15. What Is Pure.Css Icons?
Answer :
PURE.CSS supports the following famous 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> detail.
CSS Interview Questions
Question 16. What Is Vertical Menu?
Answer :
Menus are vertical by way of default. Minimal default styling and low-specificity selectors cause them to clean to customise. By default, menu objects soak up one hundred% of the width of their container, so that you can also need to restrict the menu width or set the menu to show:inline-block.
Eg:
YAHOO SITES
Flickr
Messenger
Sports
Finance
MORE SITES
Games
News
OMG!
Yahoo Sites
<style>
.Custom-limited-width
/* To restrict 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>
CSS Advanced Tutorial
Question 17. What Is Horizontal Menu?
Answer :
To create a horizontal menu, add the natural-menu-horizontal class name.
Eg: BRAND endorse allowing submenus thru JavaScript to enable accessibility. To assist get you started, an instance script written in vanilla JS provides ARIA assist, confined submenu arrow-key navigation, and the capacity to dismiss menus with an outside event or the ESC key. But you can want to move further via including side detection, complete arrow-key navigation, and polyfills for compatibility with old browsers.
Even with JavaScript in area, you still would possibly need to display submenus on hover. Just upload natural-menu-allow-hover to the natural-menu-has-youngsters listing item. This can be first-class for computer users and offers a fallback for customers with out a JavaScript.
CSS3 Interview Questions
Question 19. What Is Vertical Menu With Submenus?
Answer :
The identical construct used to create dropdowns works in vertical menus as nicely. You may additionally nest submenus, however take into account that complicated menus can present usability challenges on small screens.
WordPress Tutorial
Question 20. What Is Scrollable Horizontal Menu?
Answer :
To create a scrollable horizontal menu, upload the natural-menu-scrollable class call. When there isn't sufficient room, the menu objects can be scrolled or flicked. Dropdown menus aren't supported.
WordPress Interview Questions
Question 21. What Is Scrollable Vertical Menu?
Answer :
To create a scrollable vertical menu, limit the height of your menu, and then add the natural-menu-scrollable magnificence call. The menu items can be scrolled or flicked. Submenus aren't supported.
