Pure.CSS Freshers Advanced Technical Interview Questions And Answers
Pure CSS Most Frequently Asked Latest Interview Questions Answers
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
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.
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.
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.
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).
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 −
<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>
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.
<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-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>
What Is Pure.css Responsive Design?
PURE.CSS has several special classes to create a responsive design.
.pure-u-*: Sets the container to occupy required space on any device.
.pure-u-sm-*: Sets the container to occupy required space on a devices with width ≥ 568px.
.pure-u-md-*: Sets the container to occupy required space on a devices with width ≥ 768px.
.pure-u-lg-*: Sets the container to occupy required space on a devices with width ≥ 1024px.
.pure-u-xl-*: Sets the container to occupy required space on a devices with width ≥ 1280px.
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.
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.
What Is Pure.css Forms?
PURE.CSS has a very beautiful and responsive CSS for form designing. The following CSS are used:
pure-form: Represents a compact inline form.
pure-form-stacked: Represents a stacked form with input elements below the labels. To be used with pure-form.
pure-form-aligned: Represents an aligned form with input elements below the labels. To be used with pure-form.
pure-input-rounded: Displays a form control with rounded corners
pure-button: Beautifies a button.
pure-checkbox: Beautifies a checkbox.
pure-radio: Beautifies a radio.
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:
pure-button: Represents a standard button. Can be used to style a link and button as well.
pure-button-disabled: Represents a disabled button. To be used along with pure-button.
pure-button-active: Represents a pressed button. To be used along with pure-button.
What Is Pure.css Tables?
PURE.CSS can be used to display different types of tables using various styles over pure-table.
pure-table: Represents a basic table with any a default padding, border and an emphasized header.
pure-table-bordered: Draws a table with a border across rows.
pure-table-horizontal: Draws a table with horizontal lines.
pure-table-striped: Displays a stripped table.
pure-table-odd: If applied on every other tr,changes the background of the row and creates a zebra-styled effect.
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
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 <i> element.
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
<style>
.custom-restricted-width {
/* To limit 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>
What Is Horizontal Menu?
To create a horizontal menu, add the pure-menu-horizontal class name.
eg: BRAND |News |Sports | Finance
<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>
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.
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.
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.
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.
https://mytecbooks.blogspot.com/2018/10/pure-css-most-frequently-asked-latest.html