Mobile first demo

dabblet.css

/**
 * Mobile first demo
 */
 
 * {box-sizing: border-box;}

body {
	/*background: hsl(60,80%,70%);*/
	background-color: hsl(60,30%,70%);
	background-image:
	  repeating-linear-gradient(-30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
	  repeating-linear-gradient(30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
	  linear-gradient(30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
	  linear-gradient(-30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
	background-size: 70px 120px;

	font: 16px/22px Monaco, monospace;
	text-shadow: 1px 1px 0 rgba(255,255,255, 0.3);
	padding: 0; margin: 0;
}

figure {margin: 20px 0;}
figure img {width: 100%;}

/* Navigation */
.main-nav {clear: both;}
nav ul {padding: 0;}
nav ul li {
	float: left;
	list-style: none;
	margin: 20px 40px 0 0;
}

nav ul li a {
	background: linear-gradient(hsla(125, 33%, 50%, 0.4), hsla(125, 33%, 60%, 0.4));
	border-style: solid;
	border-width: 1px;
	border-color: rgba(255,255,255,0.7) rgba(0,0,0,0) rgba(0,0,0,0.5) rgba(255,255,255,0.7);
	border-radius: 3px;
	box-shadow: 0 0 5px rgba(0,0,0,0.3);
	color: #333;
	display: inline-block;
	padding: 10px;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
}

nav ul li a:hover {
	box-shadow: none;
	border-color: rgba(0,0,0,0.5) rgba(255,255,255,0.7) rgba(255,255,255,0.7) rgba(0,0,0,0.3);
	background: linear-gradient(hsla(125, 33%, 60%, 0.8), hsla(125, 33%, 50%, 0.8));
	text-shadow: -1px -1px 0 rgba(255,255,255, 0.3);
}
/* Header */

.main-header {
	background-color: hsla(359, 63%, 100%, 0.5);
	color: #f5f5f5;
	padding: 40px;
}

.main-header hgroup {
	border-bottom: 10px solid rgba(255,255,255,0.6);
	padding-bottom: 20px;
	margin: 40px 0;
}

.main-header hgroup h1, .main-header hgroup h2 {margin: 0;}

h1 {font-size: 48px; line-height: 48px;}

h1 a {
	color: #fff;
	text-decoration: none;
}

/* Main content */
.posts {
	background: rgba(255,200,200,0.8);
	padding: 20px; margin-top: 20px;

}

/* Additional content */
.additional-content {
	background: rgba(200,255,200,0.7);
	padding: 20px; margin-top: 20px;

}

.twitter-widget ol {padding: 0;}
.twitter-widget ol li{
	background: rgba(0,0,0,0.1);
	list-style: none;
	padding: 10px; margin-bottom: 20px;
}


/* Footer */
.main-footer {
	background: rgba(0,0,255,0.1);
	margin: 20px 0 0 0; padding: 20px;
}


/* Helpers */

.global-width {
	max-width: 960px;
	margin: 0 auto;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/* Media queries */
@media only screen and (min-width: 715px){
	.left {float: left; margin-right: 20px;}
	.right {float: right; margin-right: 0;}

	.col-1 {width: 25%;}
	.col-2 {width: 50%;}
	.col-3 {width: 72%;}
	
	.main-header hgroup {margin: 0;}

}

dabblet.html

<header class="main-header clearfix global-width">
	<img class="logo left" src="http://thecybershadow.net/misc/github.png" alt="Company logo" />
	<hgroup class="left">
		<h1><a href="#" title="Back home">Semantic website</a></h1>
		<h2>Tagline</h2>
	</hgroup>
	<nav class="main-nav">
		<ul class="clearfix">
			<li><a href="#" title="Proceed to: Link 1">Lorem</a></li>
			<li><a href="#" title="Proceed to: Link 2">Ipsum</a></li>
			<li><a href="#" title="Proceed to: Link 3">Dolor</a></li>
			<li><a href="#" title="Proceed to: Link 4">Sit amet</a></li>
		</ul>
	</nav>
</header>
<div class="main-content global-width clearfix">
	<section class="posts col-3 left">
		<article class="post">
			<header>
				<h1>Post headline</h1>
				<p>Published: <time class="date">2012-03-28</time> by <span class="author">Johan Smith</span></p>
			</header>
			<div class="post-content">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<figure>
					<img src="http://images.piccsy.com/cache/images/cutest-baby-animals-7677-530-413.jpg" alt="Image of an raccoon" />
					<figcaption>This raccoon is cool</figcaption>
				</figure>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</article>
	</section>
	<section class="additional-content col-1 right">
		<aside class="twitter-widget">
			<h3>My latest tweets</h3>
			<ol>
				<li>
					<p>Tweeted: <time class="date">2012-03-28</time> by <span class="author">@johansmith</span></p>
					<p>Lorem ipsum dolor sit <a href="#" title="read more about: amet">amet</a>, consectetur <a href="" title="View @adipisicing twitter">@adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore</p>
				</li>
				<li>
					<p>Tweeted: <time class="date">2012-03-28</time> by <span class="author">@johansmith</span></p>
					<p>Lorem ipsum dolor sit <a href="#" title="read more about: amet">amet</a>, consectetur <a href="" title="View @adipisicing twitter">@adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore</p>
				</li>
				<li>
					<p>Tweeted: <time class="date">2012-03-28</time> by <span class="author">@johansmith</span></p>
					<p>Lorem ipsum dolor sit <a href="#" title="read more about: amet">amet</a>, consectetur <a href="" title="View @adipisicing twitter">@adipisicing</a> elit, sed do eiusmod tempor incididunt ut labore</p>
				</li>
			</ol>
		</aside>
	</section>
</div>
<footer class="main-footer">
	<p>Copyright &copy; 2012</p>
</footer>

settings.json

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