<article class="card">
  <h1 class="title">
    Rescale components in an intuitive way with RFS
    This card uses <a href="https://github.com/twbs/rfs" target="_blank">RFS</a> to rescale <code>margin</code>, <code>padding</code>, <code>font-size</code>, <code>box-shadow</code> &amp; <code>border-radius</code>. Resize the codepen to see it in action.
    This is the codepen example using the PostCSS plugin to rescale values, for more demo's and documentation, check the <a href="https://github.com/twbs/rfs" target="_blank">Github repo</a>.
  <p class="small">
    Made by
    <a href="https://twitter.com/Martijn_Cuppens" target="_blank" title="Visit Martijn's Twitter profile">Martijn Cuppens</a>
/* Bootstrap's reboot is included to reset some styles */
/* Roboto Slab is included from Google fonts */
/* Some default styles, eg. to center the card, are included from another pen  */

.card {
  max-width: 540px;
  padding: rfs(3rem);
  margin: rfs(2rem);
  background-color: #fff;
  box-shadow: rfs(0 0 2rem rgba(0, 0, 0, .25));
  border-radius: rfs(4rem);
.card > :last-child {
  margin-bottom: 0;

.title {
  margin-bottom: .5em;
  font-size: rfs(2.125rem);
  font-weight: 400;
  line-height: 1.2;
// If you want to use the rfs() function in your codepen, just add the following pen to your codepen scripts:
// https://codepen.io/MartijnCuppens/pen/KOPxKW

// This technique is used to make use of the RFS PostCSS plugin:
// https://codepen.io/jonneal/post/testing-postcss-plugins#creating-a-browser-safe-version-of-a-postcss-plugin-0

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css
  2. https://fonts.googleapis.com/css?family=Roboto+Slab:300,400&amp;display=swap
  3. https://codepen.io/MartijnCuppens/pen/KOPxKW.css

External JavaScript

  1. https://codepen.io/MartijnCuppens/pen/KOPxKW.js