Grid

dabblet.css

/**
 * Grid
*/

.hero,
.main {
	box-sizing: border-box;
}

/* Content faking */
.hero .module {background:aqua;}
.main .module {background:red;}
.aside .module {background:orange}

.hero .module,
.main .module {
	min-height: 200px;
}

.aside .module {
	min-height: 400px;
}

/* Grid layout */
.hero,
.main,
.aside {
	padding-left: 15px;
	padding-right: 15px;
}

@media (min-width: 740px) {
	.aside {
		float: right;
		width: 300px;
	}
	
	.main {
		max-width: 70%;
		margin-right: 330px;
	}
}

@media (min-width: 980px) {
	.hero {
		margin-right: 330px;
	}
	
	.aside {
		margin-top: -200px;
	}
}

dabblet.html

<div class="hero"><div class="module">hero</div></div>
<div class="aside"><div class="module">aside</div></div>
<div class="main"><div class="module">main</div></div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}