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 meant as a very base stylesheet that can be used so you don’t have to start over every time.

Here’s the Code:

/**
 * Start Vanilla CSS 1.0.2 
 */ 
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
*/

And Here’s the Minified Version:

/*** Start Vanilla CSS 1.0.2 */ 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
@