CodePen

HTML

            
              <div class="container">
  <div class="navigation"><ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact</a></li>
</ul></div>
  <div class="content">
    <h1>This is a whopping heading</h1>
<p>Bacon ipsum dolor sit amet frankfurter in laborum, biltong beef consectetur proident tri-tip eu laboris.  Esse exercitation beef ball tip salami.  Irure ham hock strip steak turducken beef ribs, shank ham filet mignon fugiat shoulder.  Hamburger eiusmod ea meatball, veniam biltong exercitation eu flank turducken cillum frankfurter officia rump minim.  Pariatur voluptate boudin commodo duis, nostrud mollit beef ribs sirloin pig shank cow.  Prosciutto duis filet mignon est enim bacon deserunt labore ex turkey voluptate spare ribs.  Esse est eu, voluptate culpa tenderloin pork loin in ad flank nostrud consequat laboris bacon ham.</p><p>Dolor chuck voluptate pig.  Jerky corned beef ham, short loin pancetta filet mignon jowl.  Dolore biltong ullamco, chuck adipisicing sausage dolore.  Ut ham hock dolore minim sirloin officia beef aute ground round tempor ad ribeye in irure.  Frankfurter flank dolor, shank mollit filet mignon laborum swine.</p><p>Pastrami velit ea bacon, culpa deserunt in kielbasa labore meatloaf elit dolor.  Et in duis, pancetta qui boudin fugiat ea adipisicing eu meatball.  Sirloin tempor do et salami proident ex cupidatat.  Pork adipisicing culpa enim cow short ribs ex id, bacon corned beef.</p><p>Irure shank beef ribs laborum id ut in shankle tenderloin.  Est anim aute, tail leberkas capicola eu salami ground round.  Non corned beef flank laboris salami hamburger jowl cupidatat irure fatback.  Eu chuck capicola jowl salami frankfurter, spare ribs eiusmod biltong meatball.</p><p>Venison pastrami pancetta esse ground round occaecat shoulder tempor salami ex aliquip.  Quis pork swine jowl meatball, andouille t-bone eu short ribs pork belly.  Prosciutto drumstick quis in.  Beef ribs tri-tip cow spare ribs tail pastrami magna.</p>
</div>
  <div class="aside"> <h3>Aside Stuff</h3><ul>
  <li><a href="#">Similar Content</a></li>
  <li><a href="#">More stuff</a></li>
  <li><a href="#">other more stuff that goes on and on and on</a></li>
  <li><a href="#">more other stuff</a></li>
</ul></div>
  <div class="footer">Subscribe to <a href="http://responsivedesignweekly.com">Responsive Design Weekly</a></div>
</div>
            
          
!
via HTML Inspector

CSS

            
              * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

ul, li, p, html, body, h3 {
 padding: 0;
  margin: 0;
}

body {
 font-size: 16px; 
 font-family: helvetica, arial, san-serif;
 background-color: #999;
 color: #333;
}
h1 {
  border-top: 0.3em solid #333;
}
p {
  font-size: 1em;
  line-height:1.6em;
  margin-bottom: 2em;
}

p:first-of-type{
    margin-top: 1.6em;
}

.container {
   width: 100%;
   max-width: 64em;
  margin: 0 auto;
}

.content{
  background-color: #c84c44;
  float:left;
  width: 100%;
  padding: 5%;
}

.navigation{
  background-color: #a53d36;
  width: 100%;
  float:left;
}

.navigation ul { list-style-type: none;}

.navigation ul li {
  float:left; 
  width: 100%; 
  border-bottom: 1px solid #333; 
  height: 3em; 
  text-align: center;}
.navigation ul li a {
  line-height: 3em; 
  color: #333; 
  text-decoration: none; 
  width: 100%;
  float:left;
}

.navigation ul li:hover {
  background-color:#8e352e;
}

.aside {
  background-color: #8e352e;
  float:left;
  width: 100%;
  color: #f1f1f1;
}

.aside h3 {
  padding-left: 1.6em; 
  margin: 4em 0 0;
}
.aside ul { 
  list-style-type: none;
  margin: 1em 0 3em;
  float:left; width: 100%;
}
.aside ul li { 
  width: 100%;
  background:none; 
  border-top: 1px solid #333; 
/*  min-height: 3em; */
  padding: 0.5em 1em 1.6em; 
  text-align:left;
}
.aside ul li:last-child {
  border-bottom: none;
}
.aside ul li a {
  line-height: 1.2em; 
  color: #333; 
  text-decoration: none; 
  width: 100%;
}
.aside ul li:hover {
  background-color:#8e352e;
}

.footer{
  clear: both;
  background-color: #333333;
  width: 100%;
  height: 5em;
  float: right;
}

.footer a {
  color: #f0f0f0; 
  text-decoration: none; 
  line-height: 5em;
}
.footer a:hover {
  border-bottom: dashed 1px #999;
}


@media screen and (min-width:20em) {
 /*     20.000em /* (320 px)*/ 
   body { 
    background-color: #fff;
  }
}

@media screen and (min-width:30em) {
 /*         30.000em  /* (480 px)*/
 body { 
    background-color: #f1f1f1;
  }
}
  
@media screen and (min-width:31.25em) {
 /*     31.250em  /* (500 px)*/
  
 .navigation  ul { 
    list-style-type: none;
  }
.navigation ul li {
    float:left; 
    width: 25%;
    background:none; 
    border-right: 1px solid #333; 
    height: 3em; 
    text-align: center;
  }
  
.navigation ul li:last-child {
    border-right: none;
  }
  
.navigation ul li a {
    line-height: 3em; 
    color: #333; 
    text-decoration: none; 
    width: 100%;
    float:left;
  }
  
ul li:hover {
    background-color:#8e352e;
  }

}  
@media screen and (min-width: 37.5em) {
 /*   	37.500em  /* (600 px)*/
  
}
@media screen and (min-width:48em) {
 /*   	48.000em /*(ackkkkkk, device specific bad)768px*/

}
@media screen and (min-width:50em) {
 /*   	50.000em  /* (800 px)*/
  

  .content{
  width: 80%;
  padding: 5%;
}
  
 .aside {
   width: 20%; 
  }
  
}
@media screen and (min-width:60em) {
 /*   	60.000em /*(a designers fav)960px */
      body {background-color: #666; 
  }
    .container {
  margin: 5em auto;
}
} 

@media screen and (min-width:64em) {
 /*   	64.000em /* (ackkkkk) 1024px */

} 
@media screen and (min-width:75em) {
 /*   	75.000em  /* (1200 px)*/
    body {background-color: #222; 
  font-size: 16px;
  }
}  
  
  
@media screen and (min-width:87.5em) {
 /* 	87.500em  /* (1400 px)*/
/*  body {
    font-size: 1.1em;
  }*/
    
}  
  
@media screen and (min-width:100em) {
 /*   		100.000em  /* (1600 px)*/
  body {
    font-size: 1.4em;
  }
}  
  
      
  
  

		
		
		
		
		
	
	


            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              // Change the base font size on line 9 to see how the base pixel size can affect the breakpoints and widths of a responsive design.


// to come, a javascript drop down that updates the font size for you.... fork if you will.
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................