Pure.CSS is one kind of framework in CSS. It is combination of small sets of CSS components or modules that can be used in any application. This is very small in size. Formatting can be done to the text, paragraph etc. This file can be referenced externally as well. This is developed by Yahoo. Compared to CSS, it is very fast and responsive. Having experienced in Pure.CSS is very helpful in giving preference to you. There are number of positions available across all the locations. Wisdomjobs focus on providing interview questions and answers to help you in clearing the interview with ease. Pure.CSS interview questions and answers are useful to attend job interviews and get shortlisted for job position. Check out interview questions page to get more information.
Answer :
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:
Question 2. What Is Responsive Design?
Answer :
Question 3. What Is Standard Css?
Answer :
Question 4. What Is Extensible?
Answer :
Question 5. How To Use Pure.css?
Answer :
There are two ways to use Pure:
Question 6. What Is Local Installation?
Answer :
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>
Question 7. What Is Cdn Based Version?
Answer :
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>
Question 8. What Is Pure.css Responsive Design?
Answer :
PURE.CSS has several special classes to create a responsive design.
Question 9. What Is Pure.css Grids?
Answer :
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.
Question 10. What Are Grid Unit Sizes?
Answer :
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.
Question 11. What Is Pure.css Forms?
Answer :
PURE.CSS has a very beautiful and responsive CSS for form designing. The following CSS are used:
Question 12. What Is Pure.css Buttons?
Answer :
PURE.CSS has a very beautiful and responsive CSS for customizing the look of a button. The following CSS are used:
Question 13. What Is Pure.css Tables?
Answer :
PURE.CSS can be used to display different types of tables using various styles over pure-table.
Question 14. What Is Pure.css Images?
Answer :
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
Question 15. What Is Pure.css Icons?
Answer :
PURE.CSS supports the following popular icon libraries:
Usage: To use an icon, put the name of the icon in the class of an HTML <i> element.
Question 16. What Is Vertical Menu?
Answer :
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>
Question 17. What Is Horizontal Menu?
Answer :
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>
Question 18. What Is Dropdowns?
Answer :
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.
Question 19. What Is Vertical Menu With Submenus?
Answer :
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.
Question 20. What Is Scrollable Horizontal Menu?
Answer :
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.
Question 21. What Is Scrollable Vertical Menu?
Answer :
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.
Pure.CSS Related Tutorials |
|
---|---|
XML Tutorial | CSS3 Tutorial |
HTML Tutorial | CSS Tutorial |
CSS Advanced Tutorial | WordPress Tutorial |
Pure.CSS Tutorial | XHTML Tutorial |
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.