Counters for Doug

dabblet.css

/**
 * Counters for Doug
 */

.main-box,
.sub-box {
	float: left;
	margin: 10px;
	padding: 10px;
}

.main-box:not(.container-box),
.sub-box {	
	background: beige;
	width: 100px;
	height: 100px;
}

.container-box {
	background: pink;
}

body {
	counter-reset: main-box;
}

.main-box {
	counter-increment: main-box;
}

.main-box:before {
	content: counter(main-box);
	font-weight: bold;
	float: left;
	background-color: blue;
	padding: 0.5em 0.8em;
	border-radius: 5px;
	margin: -0.5em 1em 2em -0.5em;
}

dabblet.html

<div class="main-box">A</div>
<div class="main-box">B</div>
<div class="main-box">C</div>
<div class="main-box container-box">
	<div class="sub-box">D</div>
	<div class="sub-box">E</div>
	<div class="sub-box">F</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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