Responsively

Features

How it works

Viewport units in css is a nice way to make things responsive

A basic approach is to set a property to a viewport unit

//padding will now always be 10% of viewport width
padding: 10vw;

Extending on this basic approach, responsively uses the css calc function to interpolate values between a min-width and a max-width

$value1: 50px;
$value2: 100px;
$min-width: 500px;
$max-width: 1000px;
padding: calc($value1 + ($value2 - $value1) * (100vw - $min-width) / ($max-width - $min-width));
// Compiled css:
// padding: calc(50px + 50 * (100vw - 500px) / 500);

The result is that padding will be:

Fixed at 50px when the browser window is <=500px wide.
...and...
Fixed at 100px when the browser window is >=1000px wide.

While everything between these two sizes is interpolated.
Ex. 75px padding at 750px

Usage

Well, first of you have to actually have SASS in your project

Grab the latest responsively from github

Import the file (note i'm using the scss syntax)

@import "./responsively.scss";

Congratulations, you rule.
Now you are ready to layout responsively.

@import "./responsively.scss";

//If you need to overwrite responsively defaults globally.
$responsively-min-width: 320px; // default is 375px
$responsively-max-width: 900px; // default is 1280px
$responsively-rem-context: 12px; // default is 16px and probably you don't need to change this

// using it
.my-responsive-class{ 
    // $properties: [list] The css properties you want to target.
    // $values: [list] The values you want to interpolate between.
    @include responsively($properties, $values);
}

A commen usecase is to scale font-size

body{
  // font-size now scales between 12px and 17px
  @include responsively(font-size, 12px 17px);
}

You can target multiple css properties with the same rule

body{
  @include responsively(padding-left padding-right, 10px 25px);
}

Set values for a specific browser width

Either with shorthand syntax

body{
  @include responsively(padding-left padding-right, '10px@400px' '25px@800px');
}

Or use alternate, but a little more verbose syntax

body{
  @include responsively(
    padding-left padding-right,
    (
      400px: 10px,
      800px: 25px
    )
  );
}

You are not limited to interpolation between only 2 values.
Infact, you can add as many values as you like. Just make sure that the middle ones have a width defined.

body{
    @include responsively(
      padding-left padding-right,
      10px '15px@400px' '20px@500px' 40px
    );
}

You can use any unit value you want. Although things tend to get weird. So probably a good idea to stick with rem and px

body{
  @include responsively(font-size, 0.8rem 1.4rem);
}

Thank you!

I can't take credit for writing this. Most of this mixin is built on top of other things.

Mostly I just made up a syntax i like, cleaned up some stuff and fixed some errors.

Here's the real mvps:

http://www.sassmeister.com/gist/7f22e44ace49b5124eec
https://codepen.io/stowball/pen/JWoWWz?editors=0100
https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/

Thanks for putting your code out there. You guys are the best.

Thanks for reading! I hope you can make use of this.