Sebastian Eberlein
Jul 26, 2017 · 1 min read

My first idea was similar: Use viewport units only for font-sizes and percentage values for everything else. But there were a few drawbacks:

  1. If you want to use flexbox, you can’t use percentages for paddings or margins on flex items.
  2. Let’s say you need a consistent value (i.e. an SCSS variable) in your layout, for example for horizontal paddings. The problem is, that percentage values are always relative to another quantity, for example a length. To see what this means, let’s take a look at an example:

HTML:

<article>
<h1>Hello World</h1>
</article>

SCSS:

$hrz-padding: 5%;article{
padding: 0 $hrz-padding;
}
h1{
padding-left: $hrz-padding;
}

You might think that the article and the h1 have the same padding-left, but that’s not the case.

Let’s say the viewport width is 1000px: The article is 1000px wide and has 50px horizontal padding. Since the h1 is nested in the article, it is only 900px wide, thus its padding-left is only 45px.

    Sebastian Eberlein

    Designer and developer at a branding agency in Hamburg, Germany.

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade