Responsive & Value Smoothing

In order to make responsive styling easier and make the site look more consistent across different resolutions, we're using linear interpolations mixins to smooth the value between two breakpoints.

This needs to be used by default. If a value is numeric, we want to use linear interpolation. Unless, we require a "jump" in value due to layout constraints, in which case we probably want to use linear interpolation in media queries, or, use linear interpolation for certain resolutions and a base value otherwise.

INFO: There has been no performance impact experienced by using the functions below everywhere, which use "calc()" internally.

Basic Usage

The most basic example is to use the following mixin (in a module scss file):

.thing {
  @include standard-interpolation(padding-top, 10px 50px);
}

This will make it so at the xs breakpoint and below we're always at 10px in padding-top, that above the xl breakpoint we're always at 50px, and that between those widths there's a smooth, gradual value change.

REM & Font Usage

This becomes particularly useful with fonts:

.font__featured-banner-title {
  @include standard-interpolation(font-size, 18px 36px, true);
}

The functionality is the same. However, if we add a true as the third argument, we force the code to use rem for its internal calc().

Full Definition

If we need more control than only two breakpoints, the extended functionality forces us to use one value per standard breakpoint defined in our scss. In the case of five breakpoints:

.thing {
  @include standard-interpolation(padding-top, 10px 30px 40px 46.67px 50px);
}

This will use setpoints at the standard 5 breakpoints we have defined.

$breakpoints: (576px, 768px, 992px, 1200px, 1480px);
$breakpoint-names: ('xs', 'sm', 'md', 'lg', 'xl');

Manual definition

We can use the internal function linear-interpolation instead of the more automagic standard-interpolation:

TODO: Change this function to simply receive four variables, so as to stop prettiers from creating so many lines.

.thing {
  padding-top: 10px;
  @media (min-width: 500px) and (max-width: 1500px) {
    padding-top: linear-interpolation(
      (
        500px: 10px,
        1500px: 50px
      )
    );
  }
  @media (min-width: 1501px) {
    padding-top: 50px;
  }
}

This accomplishes the same as the basic usage, but is a lot more verbose, and the function itself uses multiple lines. It does allow for fine grained control without having to use standardized breakpoints, however.

TODO2: Create function to replicate above example with arbitrary breakpoints?

Sudden Changes

If you need a sudden change at a certain breakpoint instead of a gradual one, use manual interpolation with whatever breakpoints you require.

.thing {
  padding-top: 10px;
  @media (min-width: 500px) and (max-width: 1000px) {
    padding-top: linear-interpolation(
      (
        500px: 10px,
        1000px: 25px
      )
    );
  }
  @media (min-width: 1001px) and (max-width: 1500px) {
    padding-top: linear-interpolation(
      (
        1001px: 35px,
        1500px: 50px
      )
    );
  }
  @media (min-width: 1501px) {
    padding-top: 50px;
  }
}

This will cause a 10px jump between 1000px and 1001px in width. Skip one of the linear interpolations if you want a static value.

Alternatively, one can use standard-interpolation inside of a media query, as SCSS will merge them:

.thing {
  padding-top: 50px;
  @media (max-width: 991px) {
    @include standard-interpolation(padding-top, 10px 50px);
  }
}

This will use 50px at 992px and above, then continue with a linear interpolated value down to the xs breakpoint, then stay at 10px.