Responsify

What is responsify?

responsify
    verb
        to make an HTML element fluidly adapt to changes in viewport size

At my past job at a digital agency I transformed Photoshop, Sketch, and InVision designs into functioning websites. But the designs gave no instructions on how to handle the in-between resolutions. ☹️ So, to minimize the abrupt layout jumps I employed a technique I call responsify, which uses CSS calc() function to fluidly change width, margin, left, etc. so they match the value at the neighboring breakpoint.

🤨 If you're still unclear what exactly it is and how it works, you're not alone. Many told me it didn't click for them until they saw it in action. 💡 So, below's a screen recording of an example.

Read on to learn how to use it in your project.

Update: November 16, 2021

Today I learned that responsify is a rediscovery of CSS locks. 🤦‍♂️ Read the comparison between CSS locks and responsify.

Table of contents

1. Responsify
   1. What is responsify?
   2. Table of contents
   3. How to responsify
      1. Example 1 featuring two media queries
      2. Example 2 featuring max-width media query
      3. Example 3 featuring max-height
      4. Example 4 featuring ch and min()
      5. Example 5 featuring clamp()
   4. Responsify form
   5. Sass @function
   6. Browser support
   7. Comparison with CSS locks
   8. Related resources
2. Privacy policy
3. Accessibility statement

How to responsify

Examples assume smallest viewport width of 320px, a tablet breakpoint at 768px, and a desktop breakpoint at 1024px.

div {
    width: 90%;
}

@media (min-width: 1024px) {
    div {
        width: 40%;
    }
}

@media (min-width: 900px) and (max-width: 1023px) {
    div {
        width: calc(3716.129px - 322.903%); /* https://responsify.dev - parent lower bound: 900px; parent upper bound: 1024px; element lower bound: 90%; element upper bound: 40%; */
    }
}

body {
    padding: 50px;
}

@media (max-width: 1023px) {
    body {
        padding: calc(-8.182px + 5.682vw); /* https://responsify.dev - viewport lower bound: 320px; viewport upper bound: 1024px; element lower bound: 10px; element upper bound: 50px; */
    }
}

header {
    height: calc(17.273px + 7.102vw); /* https://responsify.dev - viewport lower bound: 320px; viewport upper bound: 1024px; element lower bound: 40px; element upper bound: 90px; */
    max-height: 90px;
}

button {
    border-width: min(calc(0.545ch + 1.939vw), 2ch); /* https://responsify.dev - viewport lower bound: 320px; viewport upper bound: 1024px; element lower bound: 1ch; element upper bound: 2ch; "ch" width in pixels: 13.65; */
}

footer {
    margin-top: clamp(20px, calc(-515.482px + 69.87vw), 200px); /* https://responsify.dev - viewport lower bound: 768px; viewport upper bound: 1024px; element lower bound: 2.75vw; element upper bound: 19.53vw; */
}

You can use responsify as a Sass @function. Download _responsify.scss, unzip it, and import it to your root Sass file. Usage examples are included in the file.

The advantage of using the Sass @function is that you don't need comments documenting input values. 🙌

Note that at the moment, Sass @function doesn't support ch and rem units. 😞

Browser support

Browser support is very good. In spite of IE having known issues with calc() I haven't encountered any. Two of the examples use clamp() and min(), which IE doesn't support. As far as "exotic" 🐠 CSS values go: vw is supported by all browsers and ch is narrower on IE compared to other browsers, so just look out for that.

Comparison with CSS locks

CSS locks originated as Molten leading. In the article that introduced the concept and in almost every example I came across CSS locks are used for controlling line-height and font-size, even though it works with many CSS properties.

CSS locks and responsify are based on fundamentally the same logic/math and as such share many similarities. They both:

• work with CSS properties that accept a px value,
• don't work with properties that accept keyword value like visibility,
• don't work with properties that accept a unitless value like z-index.

There are also a few differences, most notable are listed in the following table.

Related resources

There's a similar tool that can generate non-linear calc() value.

For more awesomeness, James Gilyead and Trys Mudford created "Utopia" design system where elements scale proportionally and fluidly. It's an unconventional approach that uses a whole lot of calc(), CSS variables, rem and vw relative units, all tied together with what seems to me as undecipherable math. Fascinating stuff. 🧠