Opt-in Typography

gistfile1.css

/*----------------------------------------------------------------------------------------*/
/* Opt-in typography - http://goo.gl/H6sGd
 * Zero off common semantic elements to stop re-definition
 * Use .text class on the parent of anything requiring text styles
/*----------------------------------------------------------------------------------------*/
$baseline: 1.5em;

@mixin zero-text-elements {

	h1, h2, h3, h4, h5, h6, blockquote, pre,
	p, ul, ol, dl { margin-top: 0; margin-bottom: 0; }
	blockquote { margin-left: 0; margin-right: 0; }
	ul, ol { margin-left: 0; padding-left: 0; list-style: none; }
	dd { margin-left: 0; }
	hr { margin: 0 0 -1px 0; }
	
}

// Reset typographic styles
@include zero-text-elements;

// Allow opt-out resetting
.unset-text {
	@include zero-text-elements; }

// Allow opt-in type styles
.text {

	h1, h2, h3, h4, h5, h6 { margin-bottom: .65em; }
	p, ul, ol, li, dl, blockquote, pre, table { margin-bottom: $baseline; }
	ol, ul { margin-left: 2em; }
	ol, .list-numbers { list-style: decimal; }
	ul, .list-bullets { list-style: disc; }
	li { margin-bottom: .5em; }
	dt { font-weight: bold; }
	dd { margin-bottom: $baseline / 2; font-style: italic; }
	hr { margin: $baseline 0; }
	
	// Ambiguous predictions - these may need changing
	// Can't be overwritten by unset-text due to specificity
	> h2, > h3, > h4, > h5, > h6 { margin-top: $baseline; }
	li ul, li ol { margin-top: .75em; margin-bottom: 0; }
	li ul { list-style: circle; }	
	form ol, form ul { list-style: none; margin-left: 0; margin-bottom: .5em; }
	blockquote p + .source { margin-top: -$baseline; }
	blockquote > :last-child, ul > :last-child, ol > :last-child, dl > :last-child { margin-bottom: 0; }
	
}