erikjung · February 9, 2012 06:01
diff --git a/dabblet.css b/dabblet.css
 /**
 * 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 */
 }











diff --git a/dabblet.html b/dabblet.html
 <!-- 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>



diff --git a/settings.json b/settings.json
 {"view":"split-vertical","prefixfree":"1","page":"css"}
	/**
	* 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 */
	}
	<!-- 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>