Em AND Rem

Em-AND-Rem.markdown

Em AND Rem

A Pen by Chris Coyier on CodePen.

License.

index.html

<div class="font-size-control">Document font-size control: <input type="range" id="document-font-size-control" min="0.5" max="3.0" step="0.2" value="1.0">
</div>

<div class="page-wrap">

  <section class="main-content">

    <article class="module" data-font-size-in-rem="1.2">
      <h3>Title of Module</h3>
      <time>Aug 5, 2014</time>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
      <footer>
        Some extra information.
      </footer>
    </article>

    <article class="module" data-font-size-in-rem="1.2">
      <h3>Title of Module</h3>
      <time>Aug 10, 2014</time>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
      <footer>
        Some extra information.
      </footer>
    </article>

  </section>

  <aside>
    
    <div class="module" data-font-size-in-rem="0.9">
      <h3>Sidebar Thing</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam</p>
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>  
    </div>
    
    <div class="module" data-font-size-in-rem="0.9">
      <h3>Sidebar Thing</h3>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam</p>
      <ul>
        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
        <li>Aliquam tincidunt mauris eu risus.</li>
        <li>Vestibulum auctor dapibus neque.</li>
      </ul>  
    </div>
    
  </aside>
  
  <footer class="module footer-module" data-font-size-in-rem="0.75">
    &copy;2014 Name of the Site and Stuff
  </footer>
  
</div>

script.js

$(".module").prepend("<div class='module-control font-size-control'>Module: <input type='range'></div>");

$("input[type='range']").each(function() {
  var el = $(this);
  el.attr("min", 0.5);
  el.attr("max", 3.0);
  el.attr("step", 0.2);
  el.attr("value", el.parent().data("font-size-in-rem"));
})
.on("change", function() {
  $(this).closest(".module").css("font-size", $(this).val() + "rem");
});

$("#document-font-size-control")
.on("change", function() {
  $("html").css("font-size", $(this).val() + "rem");
});

style.scss

body {
  padding: 10px;
}

.page-wrap {
  display: flex;
  flex-wrap: wrap;
}
.main-content {
  width: 66.66%;
  padding-right: 10px;
}
aside {
  width: calc(33.33% - 10px);
}
.footer-module {
  font-size: 0.75rem;
  flex: 0 0 90%;
}

.module {
  border: 1px solid #ccc;
  background: #eee;
  padding: 20px;
  margin: 0 0 20px 0;
  position: relative;
  .module-control {
    margin: -20px -20px 10px -20px;
  }
}

.font-size-control {
  background: #E77E23;
  padding: 10px;
  margin: 0 0 10px 0;
  font-size: 12px;
  > * {
    vertical-align: middle;
  }
}

article {
  font-size: 1.2rem;
  > h3 {
    font-size: 1.5em;
    margin: 0 0 0.5em;
  }
  > time {
    font-size: 0.9em;
    color: #999;
    display: block;
  }
  > footer {
    border-top: 1px solid #ccc;
    padding-top: 0.5em;
    font-size: 0.8em; 
  }
}

aside .module {
  font-size: 0.9rem;
  > h3 {
    font-size: 1.4em;
    margin: 0 0 0.4em 0;
  }
}