ORB reset and HTML5 normalisation

dabblet.css

/**
 * ORB reset and HTML5 normalisation

    - Based on:
    ----- blq-rst.
    ----- Eric Meyers reset v2.0.
    ----- Kaeligs normalisation.
    ----- Parts of normalize.css v2.0.1.
    - TODO Add License info
           e.g. ! normalize.css v2.0.1 | MIT License | git.io/normalize
    - TODO Can we change b-n to b-f for forms if other rules are made global


    ----------------------------------------
    ORB utility class keys
    ----------------------------------------
    - 'b-'  = Barlesque utility hook.
    - 'b-r' = Resets.
    - 'b-f' = Form Normalisation.
    ----------------------------------------
    
    Changelog:
    
    2012-09-12 - Kaelig:
        Remove hgroup (not in HTML5 spec anymore)
        Alphabetize elements
        Put `var` back in the `.b-r` scope
        Fix various syntax errors
        Make documentation more readable (thought for 78 chars / line)
        Remove text-size-adjust on body tag:
            We want it only on mobiles since it creates
            usability issues on desktop Safari
            (cf bug <https://bugs.webkit.org/show_bug.cgi?id=56543>)
        Put body font styles after the reset rules

*/

/*
 * Force vertical scrollbar space to be preserved
*/
html {
    overflow-y: scroll;
}

/*
 * Better image resizing in IE7 and IE8 (Kaelig)
*/
img {
    -ms-interpolation-mode: bicubic;
}

/* http://meyerweb.com/eric/tools/css/reset/
 v2.0 | 20110126
 License: none (public domain)
*/
html,
body,
.b-r a,
.b-r abbr,
.b-r acronym,
.b-r address,
.b-r applet,
.b-r article,
.b-r aside,
.b-r audio,
.b-r b,
.b-r big,
.b-r blockquote,
.b-r canvas,
.b-r caption,
.b-r center,
.b-r cite,
.b-r code,
.b-r dd,
.b-r del,
.b-r details,
.b-r dfn,
.b-r div,
.b-r dl,
.b-r dt,
.b-r em,
.b-r embed,
.b-r fieldset,
.b-r figcaption,
.b-r figure,
.b-r footer,
.b-r form,
.b-r h1,
.b-r h2,
.b-r h3,
.b-r h4,
.b-r h5,
.b-r h6,
.b-r header,
.b-r i,
.b-r iframe,
.b-r img,
.b-r ins,
.b-r kbd,
.b-r label,
.b-r legend,
.b-r li,
.b-r mark,
.b-r menu,
.b-r nav,
.b-r object,
.b-r ol,
.b-r output,
.b-r p,
.b-r pre,
.b-r q,
.b-r ruby,
.b-r s,
.b-r samp,
.b-r section,
.b-r small,
.b-r span,
.b-r strike,
.b-r strong,
.b-r sub,
.b-r summary,
.b-r sup,
.b-r table,
.b-r tbody,
.b-r td,
.b-r tfoot,
.b-r th,
.b-r thead,
.b-r time,
.b-r tr,
.b-r tt,
.b-r u,
.b-r ul,
.b-r var,
.b-r video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/*
 * 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
*/
.b-r button,
.b-r input,
.b-r optgroup,
.b-r select,
.b-r textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/* HTML5 display-role reset for older browsers */
.b-r article,
.b-r aside,
.b-r details,
.b-r figcaption,
.b-r figure,
.b-r footer,
.b-r header,
.b-r menu,
.b-r nav,
.b-r section {
    display: block;
}
.b-r blockquote,
.b-r q {
    quotes: none;
}
.b-r blockquote:before,
.b-r blockquote:after,
.b-r q:before,
.b-r q:after {
    content: '';
    content: none;
}
.b-r table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*
 * Solve a IE 8 bug (Kaelig)
*/
.b-f button {
    width: auto;
    overflow: visible;
}



/*
    ----------------------------------------
    Form normalisation
    ----------------------------------------
*/

/*
 * Removes inner padding and border in Firefox 4+.
*/
.b-f input::-moz-focus-inner,
.b-f button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
*/
.b-f button,
.b-f input[type="button"], /* 1 */
.b-f input[type="reset"],
.b-f input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/*
 * Re-set default cursor for disabled elements.
*/
.b-f button[disabled],
.b-f input[disabled] {
    cursor: default;
}

/*
 * 1. Addresses box sizing set to `content-box` in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
*/
.b-f input[type="checkbox"],
.b-f input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/*
 * 1. Removes default vertical scrollbar in IE 8/9.
 * 2. Improves readability and alignment in all browsers.
*/
.b-f textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

body {
    line-height: 1; /* normalise starting point ratio: lineheight/fontsize */
    font-family: Arial, Helvetica, freesans, sans-serif; /* added freesans for various linux distros */
}

dabblet.html

<style>
	body { /* Giving a little bit of space */
		padding: 1em 2em; }
</style>
<h1>1. WITH scoped reset:</h1>
<div class="b-r">
	<h1>This is a H1 element.</h1>
	<h2>This is a H2 element.</h2>
	<h3>This is a H3 element.</h3>
	<h4>This is a H4 element.</h4>
	<h5>This is a H5 element.</h5>
	<h6>This is a H6 element.</h6>

	<ul>
		<li>This is a LI in a UL</li>
	</ul>

	<ol>
		<li>This is a LI in a UL</li>
	</ol>

	<dl>
		<dt>This is a DT in a DL</dt>
		<dd>This is a DD in a DL</dd>
	</dl>

	<form class="b-f">
		<input type="text" value="This is an INPUT type TEXT in a FORM"/>

		<select>
			<option>This is an OPTION in a SELECT</option>
			<option>This is an OPTION in a SELECT</option>
			<optgroup>
				<option>This is an OPTION in a OPTGROUP in a SELECT</option>
				<option>This is an OPTION in a OPTGROUP in a SELECT</option>
			</optgroup>
			<option>This is an OPTION in a SELECT</option>
		</select>

		<textarea name="ta1">This is text in a TEXTAREA in a FORM</textarea>

		<fieldset>
			<textarea name="ta2">This is text in a TEXTAREA in a FIELDSET in a FORM</textarea>
		</fieldset>

		<button>This is a BUTTON</button>

	</form>

	<p>This paragraph contains a bunch of phrase elements. Up first in an <a href="test">[A]nchor</a>, followed by an <abbr title="test">ABBR with a title value</abbr>, followed by an <acronym title="test">ACRONYM with a title value</acronym>, followed by an <address>ADDRESS</address>, followed by a <cite>CITE</cite> element, followed by a <code>CODE</code> element, followed by a <del>DEL</del> element, followed by a <em>EM</em> element, followed by a <ins>INS</ins> element, followed by a <kbd>KBD</kbd> element, followed by a <q>Q</q> element, followed by a <samp>SAMP</samp> element, followed by a <span>SPAN</span> element, followed by a <strong>STRONG</strong> element, followed by a <tt>TT</tt> element, followed by a <var>VAR</var> element, all within a containing P.</p>

	<blockquote>This is a BLOCKQUOTE element.</blockquote>

	<table>
		<caption>This is a CAPTION in a TABLE</caption>
		<thead>
			<tr>
				<th>This is a TH in a TR in a THEAD in a TABLE</th>
				<td>This is a TD in a TR in a THEAD in a TABLE</td>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<th>This is a TH in a TR in a TFOOT in a TABLE</th>
				<td>This is a TD in a TR in a TFOOT in a TABLE</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<th>This is a TH in a TR in a TBODY in a TABLE</th>
				<td>This is a TD in a TR in a TBODY in a TABLE</td>
			</tr>
		</tbody>
	</table>
</div>
<hr />
<h1>2. WITHOUT scoped reset:</h1>
<div>
	<h1>This is a H1 element.</h1>
	<h2>This is a H2 element.</h2>
	<h3>This is a H3 element.</h3>
	<h4>This is a H4 element.</h4>
	<h5>This is a H5 element.</h5>
	<h6>This is a H6 element.</h6>

	<ul>
		<li>This is a LI in a UL</li>
	</ul>

	<ol>
		<li>This is a LI in a UL</li>
	</ol>

	<dl>
		<dt>This is a DT in a DL</dt>
		<dd>This is a DD in a DL</dd>
	</dl>

	<form>
		<input type="text" value="This is an INPUT type TEXT in a FORM"/>

		<select>
			<option>This is an OPTION in a SELECT</option>
			<option>This is an OPTION in a SELECT</option>
			<optgroup>
				<option>This is an OPTION in a OPTGROUP in a SELECT</option>
				<option>This is an OPTION in a OPTGROUP in a SELECT</option>
			</optgroup>
			<option>This is an OPTION in a SELECT</option>
		</select>

		<textarea name="ta1">This is text in a TEXTAREA in a FORM</textarea>

		<fieldset>
			<textarea name="ta2">This is text in a TEXTAREA in a FIELDSET in a FORM</textarea>
		</fieldset>

		<button>This is a BUTTON</button>

	</form>

	<p>This paragraph contains a bunch of phrase elements. Up first in an <a href="test">[A]nchor</a>, followed by an <abbr title="test">ABBR with a title value</abbr>, followed by an <acronym title="test">ACRONYM with a title value</acronym>, followed by an <address>ADDRESS</address>, followed by a <cite>CITE</cite> element, followed by a <code>CODE</code> element, followed by a <del>DEL</del> element, followed by a <em>EM</em> element, followed by a <ins>INS</ins> element, followed by a <kbd>KBD</kbd> element, followed by a <q>Q</q> element, followed by a <samp>SAMP</samp> element, followed by a <span>SPAN</span> element, followed by a <strong>STRONG</strong> element, followed by a <tt>TT</tt> element, followed by a <var>VAR</var> element, all within a containing P.</p>

	<blockquote>This is a BLOCKQUOTE element.</blockquote>

	<table>
		<caption>This is a CAPTION in a TABLE</caption>
		<thead>
			<tr>
				<th>This is a TH in a TR in a THEAD in a TABLE</th>
				<td>This is a TD in a TR in a THEAD in a TABLE</td>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<th>This is a TH in a TR in a TFOOT in a TABLE</th>
				<td>This is a TD in a TR in a TFOOT in a TABLE</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<th>This is a TH in a TR in a TBODY in a TABLE</th>
				<td>This is a TD in a TR in a TBODY in a TABLE</td>
			</tr>
		</tbody>
	</table>
</div>
<hr />
<h1>3. PARTIAL scoped reset:</h1>
<style>
.partial-test h1 {
	font-size: 30px;
}
.partial-test ol {
	background: #ffd;
}
</style>
<div class="partial-test">
	<div class="b-r">
		<h1>This is a H1 element. Doesn't reset.</h1>
		<h2>This is a H2 element.</h2>
		<h3>This is a H3 element.</h3>
		<h4>This is a H4 element.</h4>
		<h5>This is a H5 element.</h5>
		<h6>This is a H6 element.</h6>
		<ul>
			<li>This is a LI in a UL</li>
		</ul>
	
		<ol>
			<li>This is a LI in a UL</li>
		</ol>
	</div>


	<dl>
		<dt>This is a DT in a DL</dt>
		<dd>This is a DD in a DL</dd>
	</dl>

	<form>
		<input type="text" value="This is an INPUT type TEXT in a FORM"/>

		<select>
			<option>This is an OPTION in a SELECT</option>
			<option>This is an OPTION in a SELECT</option>
			<optgroup>
				<option>This is an OPTION in a OPTGROUP in a SELECT</option>
				<option>This is an OPTION in a OPTGROUP in a SELECT</option>
			</optgroup>
			<option>This is an OPTION in a SELECT</option>
		</select>

		<textarea name="ta1">This is text in a TEXTAREA in a FORM</textarea>

		<fieldset>
			<textarea name="ta2">This is text in a TEXTAREA in a FIELDSET in a FORM</textarea>
		</fieldset>

		<button>This is a BUTTON</button>

	</form>

	<p>This paragraph contains a bunch of phrase elements. Up first in an <a href="test">[A]nchor</a>, followed by an <abbr title="test">ABBR with a title value</abbr>, followed by an <acronym title="test">ACRONYM with a title value</acronym>, followed by an <address>ADDRESS</address>, followed by a <cite>CITE</cite> element, followed by a <code>CODE</code> element, followed by a <del>DEL</del> element, followed by a <em>EM</em> element, followed by a <ins>INS</ins> element, followed by a <kbd>KBD</kbd> element, followed by a <q>Q</q> element, followed by a <samp>SAMP</samp> element, followed by a <span>SPAN</span> element, followed by a <strong>STRONG</strong> element, followed by a <tt>TT</tt> element, followed by a <var>VAR</var> element, all within a containing P.</p>

	<blockquote>This is a BLOCKQUOTE element.</blockquote>

	<table>
		<caption>This is a CAPTION in a TABLE</caption>
		<thead>
			<tr>
				<th>This is a TH in a TR in a THEAD in a TABLE</th>
				<td>This is a TD in a TR in a THEAD in a TABLE</td>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<th>This is a TH in a TR in a TFOOT in a TABLE</th>
				<td>This is a TD in a TR in a TFOOT in a TABLE</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<th>This is a TH in a TR in a TBODY in a TABLE</th>
				<td>This is a TD in a TR in a TBODY in a TABLE</td>
			</tr>
		</tbody>
	</table>
</div>

<hr />
<h1>4. PARTIAL scoped reset INSIDE a scoped reset:</h1>

<style>
.partial-test h1 {
	font-size: 30px;
}
.partial-test ol {
	background: #ffd;
}
</style>

<div class="b-r">
	<div class="partial-test">
		<div class="b-r">
	
			<h1>This is a H1 element. Doesn't reset.</h1>
			<h2>This is a H2 element.</h2>
			<h3>This is a H3 element.</h3>
			<h4>This is a H4 element.</h4>
			<h5>This is a H5 element.</h5>
			<h6>This is a H6 element.</h6>
			<ul>
				<li>This is a LI in a UL</li>
			</ul>
		
			<ol>
				<li>This is a LI in a UL</li>
			</ol>
		</div>
	</div>


	<dl>
		<dt>This is a DT in a DL</dt>
		<dd>This is a DD in a DL</dd>
	</dl>

	<form>
		<input type="text" value="This is an INPUT type TEXT in a FORM"/>

		<select>
			<option>This is an OPTION in a SELECT</option>
			<option>This is an OPTION in a SELECT</option>
			<optgroup>
				<option>This is an OPTION in a OPTGROUP in a SELECT</option>
				<option>This is an OPTION in a OPTGROUP in a SELECT</option>
			</optgroup>
			<option>This is an OPTION in a SELECT</option>
		</select>

		<textarea name="ta1">This is text in a TEXTAREA in a FORM</textarea>

		<fieldset>
			<textarea name="ta2">This is text in a TEXTAREA in a FIELDSET in a FORM</textarea>
		</fieldset>

		<button>This is a BUTTON</button>

	</form>

	<p>This paragraph contains a bunch of phrase elements. Up first in an <a href="test">[A]nchor</a>, followed by an <abbr title="test">ABBR with a title value</abbr>, followed by an <acronym title="test">ACRONYM with a title value</acronym>, followed by an <address>ADDRESS</address>, followed by a <cite>CITE</cite> element, followed by a <code>CODE</code> element, followed by a <del>DEL</del> element, followed by a <em>EM</em> element, followed by a <ins>INS</ins> element, followed by a <kbd>KBD</kbd> element, followed by a <q>Q</q> element, followed by a <samp>SAMP</samp> element, followed by a <span>SPAN</span> element, followed by a <strong>STRONG</strong> element, followed by a <tt>TT</tt> element, followed by a <var>VAR</var> element, all within a containing P.</p>

	<blockquote>This is a BLOCKQUOTE element.</blockquote>

	<table>
		<caption>This is a CAPTION in a TABLE</caption>
		<thead>
			<tr>
				<th>This is a TH in a TR in a THEAD in a TABLE</th>
				<td>This is a TD in a TR in a THEAD in a TABLE</td>
			</tr>
		</thead>
		<tfoot>
			<tr>
				<th>This is a TH in a TR in a TFOOT in a TABLE</th>
				<td>This is a TD in a TR in a TFOOT in a TABLE</td>
			</tr>
		</tfoot>
		<tbody>
			<tr>
				<th>This is a TH in a TR in a TBODY in a TABLE</th>
				<td>This is a TD in a TR in a TBODY in a TABLE</td>
			</tr>
		</tbody>
	</table>
</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"html"}

We could think of a better font-stack. Doesn't mean the products will use it but it encourages a good practice of having fallbacks for all platforms.

Maybe this one?
Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", FreeSans, Sans-serif

Taken from:
http://dry.sailingissues.com/linux-equivalents-verdana-arial.html

---

We fix some known browser inconsistencies and the default font-weight of strong and b elements in Firefox is problematic (too fat).

Cases for doing this:

• easier testing (looks the same everywhere)
• readability (some words appear too fat)
• more consistent with design mockups

To view Firefox defaults' CSS type in: resource://gre-resources/html.css