minput

dabblet.css

/* minput
[ with version control ]
1. on change, show [ commit ] affordance
2a. on escape, [ revert ]
2b. on [ commit ] , [ lock ] or [ fork ]
3. always show change confirmation or error
*/

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600);

/* skin */
* { border:0; padding:0; margin:auto; 
	font-family:inherit; font-size:inherit;
	box-sizing:border-box }
html { background:#222 }
body { background:#eee; border-radius:.3em;
	padding:1em; margin:1em auto;
	max-width:28em; font:1em/1.6 Source Sans Pro }
input, textarea { display:block; margin:1em 0; width:100%;
	padding:.3em .6em; white-space:normal;
	border-radius:5px; background:transparent }
input:focus, input:hover,
textarea:focus, textarea:hover { background:#fff }	
form > :first-child { font-size:1.6em; font-weight:600 }
hr { border-bottom:1px solid #ccc }

dabblet.html

<form>
	<input placeholder=title value=minput>
	
	<hr>
	
	<textarea placeholder=description>
	A minimal visual pattern for forms that do not look like forms until they have to.
	</textarea>
</form>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}