Sample Demo of a Responsive Blog like website using HTML5 and CSS. Demo: http://dabblet.com/gist/5548080

dabblet.css

body{
	margin:0;
	background-color: #efefef;
}
header {
	font-size: 20px;
	background-color: black;
	color: #cccccc;
	height: 75px;
}
#topbar{
	width:85%;
	margin-left: auto ;
    margin-right: auto ;
}

nav {
	float: right;
}

nav li{
	display: inline;
	padding-right: 30px;
}
.logo {
	float:left;
	font-size:30px;
	padding-left:20px;
	padding-top:20px;
}

.box{
	margin-top: 20px;
	width:80%;
	margin-left: auto ;
    margin-right: auto ;
    height: 400px;
}

.blog-post{
	margin-top:20px;
	float:left;
}
.blog-heading{
	font-size: 36px;
	margin-bottom:20px;
}
.sidebar{
	float:right;
}
footer{	
	color: white;	
	margin-left: auto ;    
	margin-right: auto ;	
	font-size:16px;	
	min-height: 50px;	
	padding:20px;	
	background-color: black;	
}
#footer{	
	width:80%;
	margin-left: auto ;    
	margin-right: auto ;
}
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 620px) {
/* Styles */
#topbar{
	width:95%;
	float:left;
}
.box{
	width:95%;
}
.sidebar{
	display:none;
}
nav li{
	display:none;
}
nav:after{
	content:"menu";
	display:block;
	float:right;
	
}
nav {
	display:block;
	/*background-image:url("http://cdn.css-tricks.com/wp-content/uploads/2012/10/threelines.png");*/
}
}

dabblet.html

<header> 
	<div id="topbar">
	 	<div class="logo">
			Awesome Blog.
		</div>
		<nav>
			<ul>
				<li> Home </li>
				<li> About </li>
				<li> Contact </li>
			</ul>
		</nav>
	</div>
</header>

<div class="box">
	<div class="blog-post">
		<div class="blog-heading">
			This is blog post heading.
		</div>
		<div class="blog-body">
			This area contains blog body.
			<p>
			 	Hi there.
			</p>
		</div>
	</div>
	<div class="sidebar">
		<ul>
			<li>side link 1</li>
			<li> side link 2 </li>
		</ul>
	</div>
</div>
<footer>	
	<div id="footer">
		This is footer.		
	</div>
</footer>

dabblet.js

//alert('Hello world!');

settings.json

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