Layout doodles

dabblet.css

/**
 * Layout doodles
 */
* {
	box-sizing: border-box;
	transition: all 0.5s ease;
	vertical-align: middle;
}

html {
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 10px;
}

body {
	height: 100%;
	margin: 0;
	padding: 0;
	padding-top: 5rem;
	padding-bottom: 10rem;
	position: relative;
	font-size: 1.6rem;
	background: #000 url(http://farm8.staticflickr.com/7025/6700944457_31377129aa_o.jpg) center center fixed no-repeat;
	-moz-background-size: cover;
	background-size: cover;
}

header.main {
	margin-top: -5rem;
	height: 5rem;
}

section.main {
	min-height: 100%;
}

footer.main {
	margin-bottom: -10rem;
	height: 10rem;
}

.main {
	padding: 1rem;
}

dabblet.html

<header class="main">
Header
</header>
<section class="main">
Section
</section>
<footer class="main">
Footer
</footer>

dabblet.js

// alert('Hello world!');

settings.json

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