erikjung
2/9/2012 - 6:01 AM

A Kind of Reset

A Kind of Reset

settings.json
content_copyfile_download
{"view":"split-vertical","prefixfree":"1","page":"css"}
dabblet.html
content_copyfile_download
<!-- content to be placed inside <body>…</body> -->

<h1>This is a header, and the largest.</h1>
<h2>And this is also a header, but one size smaller.</h2>
<h3>Finally, this is a header too — the smallest.</h3>

<p>This is a damn paragraph of gibberish. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent.</p>
<p><small>This is a small little bastard of a paragraph. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla.</small></p>

<hr>

<ul>
<li>And this here</li>
<li>Is an unordered list</li>
</ul>

<ol>
<li>And this here</li>
<li>Is an ordered list</li>
</ol>

<hr>

<form>
<input value="This is a regular input">
<button>This is a button</button>
<select>
<option>Option
</select>
</form>

<hr>

<img src="http://placekitten.com/640/480">
<img src="http://placekitten.com/853/480">
<img src="http://placekitten.com/853/360">

<hr>

<div class="box">
<h3>This is a header inside of a box.</h3>
<p>This is a paragraph contained inside of a box.</p>
<ul>
<li>And this is</li>
<li>a list in a box.</li>
</ul>
</div>

<div class="box">
<input value="This is an input in a box.">
</div>

<hr>
dabblet.css
content_copyfile_download
/**
 * A Kind of Reset
 */

* {
margin:0;
padding:0;
box-sizing:border-box;
border:0;
}

html {
font-size:16px;
font-family:helvetica;
padding:2rem;
}

body {
font-size:1.3rem;
line-height:2rem;
background:url(http://griddle.it/16-1?color=fff&num=0&horizontal=16) 0 1px;
}

h1, h2, h3, p, ul, ol, img {
margin-bottom:1.5rem;
}

h1 {
font-size:3rem;
line-height:3rem;
margin-bottom:3rem;
}

h2 {
font-size:2rem;
line-height:2rem;
margin-bottom:2rem;
}

h3 {
font-size:1.5rem;
line-height:2rem;
}

ul, ol {
padding:0;
list-style-position:inside;
}

small {
display:block;
font-size:1rem;
line-height:1.5rem;
}

input, button, select {
-webkit-appearance:none;
box-shadow:inset 0 0 0 1px black;
font-size:1.5rem;
font-family:inherit;
height:3rem;
margin-bottom:1.5rem;
padding:0 1ex;
}

hr {
height:1.5rem;
box-shadow:0 -1px 0 black;
position:relative;
top:1px; /* offset */
}

img {
background-color:black;
display:block;
max-width:100%;
max-height:11rem;
}

.box {
background:rgba(0,0,0,.1);
box-shadow:inset 0 0 0 1px black; /* even with display:border-box, using borders will ruin the baseline without a set height. */
padding:1.5rem;
padding-bottom:0;
margin-bottom:1.5rem;
overflow:auto; /* to contain margins */
}