Yahoo! YUI 3 is a next-generation JavaScript / CSS library, written collectively by the Yahoo! Developer Network, which also powers the Yahoo! homepage. It incorporates over five years of dedicated library development by Yahoo!, and includes core CSS/JS components, a full suite of utilities, Widget Infrastructure, and a few default Widgets.
It’s completely open source under the BSD-license, and Yahoo! provides a dependable hosted API like to the YUI Reset, as well as its other modules.
The YUI 3 CSS Reset mitigates the inconsistent styling of HTML elements by browsers, in the same way as any other CSS Reset, to create a dependably flat foundation upon which to build out websites and webapps.
Where it really comes into its own is when coupled with the other CSS modules, which are also available via reliable hosted API links. Here are the official descriptions of the three extra available modules:
cssbase.css
CSS Base is an optional CSS file that complements YUI’s core CSS foundation (CSS Reset and CSS Fonts). CSS Base applies a style foundation for HTML elements that is consistent for A-grade browsers.
CSS Base may also be useful as a template for your own base file, or a snippets library for styling HTML elements.
cssfonts.css
The foundational CSS Fonts provides cross-browser typographical normalization and control while still allowing users to choose and adjust their font size. Both Standards and Quirks modes are supported in A-grade browsers.
cssgrids.css (beta)
The foundational CSS Grids provides a simple system for layout out content. The basic components are “grids” and “units”. A “grid” (yui3-g) contains one or more “units” (yui3-g). The type of “unit” chosen describes how it should be sized (e.g. “yui3-u-1-2” takes up half the grid, “yui3-u-1-3” takes up one-third, et cetera).
The three modules listed above are available at the Yahoo! YUI Website linked above. To try out the basic YUI CSS library, you could write the following at the top of your stylesheet to pull in the minified (compressed) versions:
@include url('http://yui.yahooapis.com/3.5.0/build/cssreset/cssreset-min.css');
@include url('http://yui.yahooapis.com/3.5.0/build/cssbase/cssbase-min.css');
@include url('http://yui.yahooapis.com/3.5.0/build/cssfonts/cssfonts-min.css');
However, for what it’s worth, I’d recommend copy/pasting them into your own stylesheet if you’re interested in hacking them or seeing how they work.
Now, the code!
Yahoo! YUI 3 CSS Reset – Full Version (1.64KB)
/**
* YUI 3.5.0 - reset.css (http://developer.yahoo.com/yui/3/cssreset/)
* https://cssdeck.com/blog/
* Copyright 2012 Yahoo! Inc. All rights reserved.
* http://yuilibrary.com/license/
*/
/*
TODO will need to remove settings on HTML since we can't namespace it.
TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
color:#000;
background:#FFF;
}
/*
TODO remove settings on BODY since we can't namespace it.
*/
/*
TODO test putting a class on HEAD.
- Fails on FF.
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,
img {
border:0;
}
/*
TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
font-style:normal;
font-weight:normal;
}
ol,
ul {
list-style:none;
}
caption,
th {
text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size:100%;
font-weight:normal;
}
q:before,
q:after {
content:'';
}
abbr,
acronym {
border:0;
font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
vertical-align:text-top;
}
sub {
vertical-align:text-bottom;
}
input,
textarea,
select {
font-family:inherit;
font-size:inherit;
font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
color:#000;
}
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssreset { display: none; }
Yahoo! YUI 3 CSS Reset – Minified (0.7KB)
/* YUI 3.5.0 reset.css (http://developer.yahoo.com/yui/3/cssreset/) - https://cssdeck.com/blog/ */
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
A Note About Contexts
The Yahoo! YUI CSS Modules (Reset, Base, Fonts and Grids) by default apply to every HTML element, regardless of context. But what if you want to only apply the reset to a certain section, subsection or specific element (and its children) of the page or application?
Well, Yahoo!’s got your back. You can load a contextual CSS Reset (or contextual versions of any of the other modules), which only apply to elements with a certain CSS class in the markup – and their descendants. Check out their documentation for details!