Using calc(), rem & vw for scalable rem-based layout

dabblet.css

/* Using calc(), rem & vw for scalable rem-based layout */
/* ref http://dev.w3.org/csswg/css3-values/#calc0 example 13 */
/* waiting for vw support */
body {margin: 0; text-align: center;}
.wrapper {
  width: 40rem;
  margin: 2em auto;
  border-bottom: 2px solid #ccc;
}
.content {
  float: left;
  width: 29rem;
  padding: 1em;
  background-color: #cde;
}
.sidebar {
  float: left;
  width: 10rem;
  margin-left: 1em;
  border-left: 2px solid #999;
  padding: 1em;
  background-color: #def;
}
:root {font-size: calc(100vw / 40);}
.content, .sidebar {box-sizing: border-box; margin-top: 2px;}
.ruler {
  clear: left;
  width: 640px;
  margin: 0 auto;
  border-top: 2px solid #555;
}

dabblet.html

<div class="wrapper rem">
<div>40rem wide</div>
<div class="content">content div</div>
<div class="sidebar">sidebar</div>
</div>
<div class="ruler">640px wide</div>
<p>40rem should scale to fill viewport based on <code>:root {font-size: calc(100vw / 40);}</code><br>
sadly vw hasn’t been implemented yet. bugs: <a href="https://bugs.webkit.org/show_bug.cgi?id=27160">WebKit</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=503720">Firefox</a></p>

settings.json

{"version":"1.1","settings":{"prefixfree":"1"},"view":[{"template":"r\nc\n","active":false,"seethrough":false},{"template":"r\nh","active":false,"seethrough":false},{"template":"r\nch","active":false,"seethrough":false},{"template":"r","active":true,"seethrough":false}]}