The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */
body{
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}

.wrapper{width:90%;background-color:blue;height:auto;padding:5%;}
.left{width:14%;background-color:yellow;padding:2%;float:left;}
.right{width:14%;background-color:green;float:right;padding:2%;}
.content{width:59%;background-color:white;margin:0 auto;padding:2%;}

.menu{list-style-type:none;width:100%;background-color:brown;padding:0%;margin-left:-10%;}
.menu-item{border-radius:8px;float:left;margin-left:10%;background-color:white;padding:2% 5% 2% 5%;}
.header{margin-bottom:1%;width:90%;background-color:gray;padding:5%;overflow:hidden;border-radius: 20px 20px 0 0 ;}
.footer{margin-top:1%;width:90%;background-color:purple;color:white;padding:5%;text-align:center;border-radius: 0 0 20px 20px;}

.media{width:96%;background-color:red;padding:2%;border-radius:5px;}
.media-box{float:left;width:40%;height:100px;background-color:green;border-radius:5px;}
.media-header{width:50%;float:right;background-color:white;margin-bottom:1%;}
.media-header hgroup{margin-left:5%;}
.media-content{clear:both;background-color:blue;margin-top:100px;padding:1%;}
.media-text{text-align:left;}
.media-footer{text-align:center;background-color:#f0f0f0;margin-top:1%}

dabblet.html

<div class="wrapper">
	<header class="header">
		<h1>Cabeçalho</h1>
		<nav>
			<ul class="menu">
				<li class="menu-item">Link</li>
				<li class="menu-item">Link</li>
				<li class="menu-item">Link</li>
				<li class="menu-item">Link</li>
			</ul>
		</nav>
	</header>
	<aside class="left">left</aside>
	<aside class="right">right</aside>
	<div class="content">content
		<div class="media">
			<div class="media-box">box</div>
			<header class="media-header">
		    	<hgroup>
					<h3 class="media-title">Titulo</h3>
					<h4 class="media-subtitle">sub-titulo</h4>
				</hgroup>
			</header>
			<div class="media-content">
				<p class="media-text">Texto texto texto</p>
			</div>
			<footer class="media-footer">rodapé</footer>
		</div>
	</div>
	<footer class="footer">rodapé</footer>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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