(PDS-442) Add breakpoint tools to sass-variables

[caseywilliams]

Adds variables and mixins to the sass-variables package to allow for
configuring and responding to different breakpoints.

There are three breakpoints: small, medium, and large:

• Portrait-mode phones tend to be smaller than 'small'
• Landscape-mode phones tend to be between 'small' and 'medium'
• Tablets and small browser windows tend to be between 'medium' and 'large'
• Browser windows and some landscape-mode phones tend to be larger
  than 'large'

Default breakpoints can be overridden by defining your own
@breakpoints map in your stylesheets before importing
sass-variables.

Two mixins are included:

• respond-above applies styles to widths greater than the given size
• respond-below applies styles to widths below the given size

[caseywilliams]

I tested these in the new forge repo - everything seems to work, including overriding the breakpoint definitions locally. Here's a quick way to see them functioning:

<div class="boxes">
	<div id="one" />
	<div id="two" />
</div>

@import '~@puppet/sass-variables/index';

.boxes {
  div {
    height: 200px;
    width: 200px;
    background-color: lightblue;
  }

  #one {
    @include respond-above(small) {
      background-color: palegoldenrod;
    }
    @include respond-above(medium) {
      background-color: lightsalmon;
    }
    @include respond-above(large) {
      background-color: pink;
    }
  }

  #two {
    @include respond-below(large) {
      background-color: pink;
    }
    @include respond-below(medium) {
      background-color: lightsalmon;
    }
    @include respond-below(small) {
      background-color: palegoldenrod;
    }
  }
}

[caseywilliams]

(updated to fix some commit message typos)

[nkanderson]

LGTM!

[vine77]

This is great @caseywilliams! One minor comment on the math. And can we add a little documentation about this feature? You could even stub out a responsive.md doc in packages/design-system-website/foundations if we want to have it on the website with a simple example like:

@include respond-below(medium) {
  width: 100%;
}

[vine77]

This ends up being @media (max-width: 766px) instead of @media (max-width: 767px).

Suggested change

	'medium': 767px,
	'medium': 768px,

[caseywilliams]

I went ahead and just copied all the small, medium, and large values from bootstrap

[vine77]

That article you linked as well as component libraries like Bootstrap, Semantic UI, etc. use 992px as the "large" breakpoint.

Suggested change

	'large': 1179px,
	'large': 992px,

Were you thinking that we'd need something wider than that?

[caseywilliams]

Yeah, the max layout width on the new forge designs is quite large - I'll use the 992 value, though, and we can customize it on our end

[caseywilliams]

Ok I think this is ready for another review - I've included a page of docs for the site - totally open to all kinds of edits.

[vine77]

Thank you for the docs! Glad we’ll have this on the website. (Later on I may change the example just because we might want to encourage max-width, but we’ll see.) Will cut a release today.

[vine77]