Vanilla CSS Un-Reset



The Vanilla CSS ‘Un-Reset’, by Joen Asmussen of NoScope is designed to work in tandem with any other CSS Reset, by effectively redefining those styles that were previously wiped clean with your resetting weapon of choice.

As you probably know already, by using a CSS Reset script in your stylesheet you can “level the playing field”, and remove all those quirky default browser (user agent) CSS styles. This ensures a consistent cross-platform experience.

Great. It’s reset everything. Now what?

After using a CSS Reset, there is a certain amount of groundwork needed, just to un-reset the reset browser styles, such as defining typography, headers, basic HTML elements, lists, forms and margins etc. – this repetitive process can be highly time consuming.

Enter Vanilla.

Vanilla is meant to be pasted into your CSS stylesheet, then adjusted and tweaked as needed. It’s a very basic stylesheet, that takes away a little of the groundwork when starting a new project.

It’s a great concept, but it’s highly likely that it (plus a CSS Reset) alone won’t serve you very far without a bit of customisation and setup. However, if you customise the code to fit your needs, taking into account the aspects of a stylesheet that are common to all your projects, this is well worth the time invested…

Comment up with your feedback and ways you’ve used, abused or improved this code!

Vanilla CSS Full Version (1.9KB)

/**
 * Vanilla CSS 1.0.2
 * http://cssreset.com
 */
body {
	font: 9pt/1.5em sans-serif;
}
pre, code, tt {
	font: 1em/1.5em 'Andale Mono', 'Lucida Console', monospace;
}
h1, h2, h3, h4, h5, h6, b, strong {
	font-weight: bold;
}
em, i, dfn {
	font-style: italic;
}
dfn {
	font-weight:bold;
}
p, code, pre, kbd {
	margin:0 0 1.5em 0;
}
blockquote {
	margin:0 1.5em 1.5em 1.5em;
}
cite {
	font-style: italic;
}
li ul, li ol {
	margin:0 1.5em;
}
ul, ol {
	margin:0 1.5em 1.5em 1.5em;
}
ul {
	list-style-type:disc;
}
ol {
	list-style-type:decimal;
}
ol ol {
	list-style: upper-alpha;
}
ol ol ol {
	list-style: lower-roman;
}
ol ol ol ol {
	list-style: lower-alpha;
}
dl {
	margin:0 0 1.5em 0;
}
dl dt {
	font-weight:bold;
}
dd {
	margin-left:1.5em;
}
table {
	margin-bottom:1.4em;
	width:100%;
}
th {
	font-weight:bold;
}
th, td, caption {
	padding:4px 10px 4px 5px;
}
tfoot {
	font-style:italic;
}
sup, sub {
	line-height:0;
}
abbr, acronym {
	border-bottom: 1px dotted;
}
address {
	margin:0 0 1.5em;
	font-style:italic;
}
del {
	text-decoration: line-through;
}
pre {
	margin:1.5em 0;
	white-space:pre;
}
img.centered, .aligncenter, div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
img.alignright {
	display: inline;
}
img.alignleft {
	display: inline;
}
.alignright {
	float: right;
	margin-left: 10px;
}
.alignleft {
	float: left;
	margin-right: 10px;
}
img {
	max-width: 100%;
}
* html .clearfix {
    height: 1%;
}
* + html .clearfix {
	display: inline-block;
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
* html .group {
    height: 1%;
}
* + html .group {
	display: inline-block;
}
.group:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/**
* End Vanilla CSS
*/

Vanilla CSS Minified Version (1.45KB)

/** Vanilla CSS 1.0.2 - http://cssreset.com */ 
body{font:9pt/1.5em sans-serif;}pre,code,tt{font:1em/1.5em ‘Andale Mono’,'Lucida Console’,monospace;}h1,h2,h3,h4,h5,h6,b,strong{font-weight:bold;}em,i,dfn{font-style:italic;}dfn{font-weight:bold;}p,code,pre,kbd{margin:0 0 1.5em 0;}blockquote{margin:0 1.5em 1.5em 1.5em;}cite{font-style:italic;}li ul,li ol{margin:0 1.5em;}ul,ol{margin:0 1.5em 1.5em 1.5em;}ul{list-style-type:disc;}ol{list-style-type:decimal;}ol ol{list-style:upper-alpha;}ol ol ol{list-style:lower-roman;}ol ol ol ol{list-style:lower-alpha;}dl{margin:0 0 1.5em 0;}dl dt{font-weight:bold;}dd{margin-left:1.5em;}table{margin-bottom:1.4em;width:100%;}th{font-weight:bold;}th,td,caption{padding:4px 10px 4px 5px;}tfoot{font-style:italic;}sup,sub{line-height:0;}abbr,acronym{border-bottom:1px dotted;}address{margin:0 0 1.5em;font-style:italic;}del{text-decoration:line-through;}pre{margin:1.5em 0;white-space:pre;}img.centered,.aligncenter,div.aligncenter{display:block;margin-left:auto;margin-right:auto;}img.alignright{display:inline;}img.alignleft{display:inline;}.alignright{float:right;margin-left:10px;}.alignleft{float:left;margin-right:10px;}img { max-width: 100%; }* html .clearfix{height:1%;}*+html .clearfix{display:inline-block;}.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}* html .group{height:1%;}*+html .group{display:inline-block;}.group:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}
2 thoughts on “Vanilla CSS Un-Resetadd yours
  1. This is a really good idea. I have my own “CSS standards” that I implement after my resets. I’ll start modifying this instead as it’s far more complete.

    • Joss said: #

      Exactly! I actually use my own set of “CSS un-reset” styles, modified from the HTML5 Boilerplate’s CSS stylesheet. Text-selection highlight colour FTW!

Leave a reply
this will never be published
@