The first commented line is your dabblet’s title

dabblet.css

/**
 * The first commented line is your dabblet’s title
 */

html {
	font-size: 100%;
}

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	/* 14px */
	font-size: 87.5%;
	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	background: #f0f0f0;
}

.page-wrapper {
	box-sizing: border-box;
	min-width: 320px;
	height: 100%;
	margin: 0 auto;
}

.page {
	box-sizing: border-box;
	/* needed for footer positioning*/
	position: relative;
	/* real browsers */
	height: auto !important;	
	/* IE6: treaded as min-height*/
	height: 100%;
	/* real browsers */
	min-height: 100%;
	padding: 20px;
	background: #fff;
}

@media only screen and (min-width: 25em) {
	.page-wrapper {
		width: 400px;
	}
}

@media only screen and (min-width: 27.75em) {
	.page-wrapper {
		width: 90%;
	}
}

@media only screen and (min-width: 64em) {
	.page-wrapper {
		max-width: 960px;
	}
}

dabblet.html

<div class="page-wrapper">
	<div class="page">
	  <header class="page-header" role="banner">
	  	<h1>My Website</h1>
	  </header>
	  <main role="main">
	  	<header>
	  		<h2>Content</h2>
	  	</header>
	  </main>
	  <footer role="contentinfo">
	  	<p>Website footer</p>
	  </footer>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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