Gwynne's Blocks

dabblet.css

/**
 * Gwynne's Blocks
 */
 
 div {
 	width: 42rem;
 	height: 59.4rem;
 	position: relative;
 	background-color: red;
 	box-sizing: border-box;
 }
 
 article {
 	display: block;
 	float: left;
 	border: 1px solid black;
 	box-sizing: border-box;
 	margin: 0 0.1rem 0.1rem 0;
 	width: 10.4rem;
 	height: 14.8rem;
 	background-color: blue;
 	position: relative;
 }

article header {
	height: 1.5rem;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0;
	background-color: green;
	text-align: center;
	vertical-align: middle;
}

article footer{
	height: 1.5rem;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: yellow;
	text-align: center;
	vertical-align: middle;
}

article main {
	position: absolute;
	top: 2rem;
	bottom: 2rem;
	left: 0.5rem;
	right: 0.5rem;
	background-color: pink;
}

dabblet.html

<div>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
	<article>
		<header>
		</header>
		<main>
		</main>
		<footer>
		</footer>
	</article>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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