<article class="card">
<h1 class="title">
Rescale components in an intuitive way with RFS
</h1>
<p>
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> & <code>border-radius</code>. Resize the codepen to see it in action.
</p>
<p>
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>
<p class="small">
Made by
<a href="https://twitter.com/Martijn_Cuppens" target="_blank" title="Visit Martijn's Twitter profile">Martijn Cuppens</a>
</p>
</article>
/* 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