Use a simplified scale (e.g. 7 point, ala tachyons, basecss) for box model attributes

[indirectlylit]

Transferring this issue written by @jonboiser in https://github.com/learningequality/clearinghouse/issues/91

---

The system used in, e.g. Tachyons, simplifies the choice of padding, margin, font, etc. to a limited number of options based on a exponential scale.

Instead of constantly writing rules like margin-top: 16px, for every div that requires some kind of spacing. we can consolidate these into classes (like Tachyons) does, or in components, as something like reflexbox

Here are stats on the use of 'margin' in the current code:

  25 margin: 0
  12 margin-bottom: 8px
  11 margin-left: 8px
   8 margin-top: 1em
   8 margin-top: 0
   8 margin-right: 8px
   6 margin-right: 16px
   6 margin-bottom: 1em
   6 margin-bottom: 16px
   5 margin-top: 24px
   5 margin-top: 10px
   5 margin-right: auto
   5 margin-left: auto
   5 margin-bottom: 24px
   4 margin: auto
   4 margin-top: 16px
   4 margin-bottom: 2em
   4 margin-bottom: 0
   3 margin-top: 8px
   3 margin-left: 16px
   3 margin-bottom: 36px
   3 margin-bottom: 32px
   2 margin: 16px
   2 margin: 0 auto
   2 margin: $margin
   2 margin-top: 36px
   2 margin-top: 32px
   2 margin-top: 2em
   2 margin-top: 20px
   2 margin-right: 5px
   2 margin-right: 4px
   2 margin-right: 24px
   2 margin-right: 10px
   2 margin-left: 10px
   2 margin-bottom: 2rem
   2 margin-bottom: 0.5em
   1 padding-top: $vertical-page-margin
   1 marginBottom: this.bottomMargin + 'px',
   1 margin: rem-calc(6px 0);
   1 margin: 48px
   1 margin: 36px 0
   1 margin: 36px
   1 margin: 30px auto
   1 margin: 2px 0 0 5px
   1 margin: 2em 0
   1 margin: 20px 0
   1 margin: 20px
   1 margin: 16px 0
   1 margin: 15px 0 5px
   1 margin: 10px
   1 margin: 0;
   1 margin: $page-padding auto
   1 margin-top:60px
   1 margin-top: 96px
   1 margin-top: 64px
   1 margin-top: 5px
   1 margin-top: 50px
   1 margin-top: 48px
   1 margin-top: 42px // height of toolbar
   1 margin-top: 40px
   1 margin-top: 3em
   1 margin-top: 15px
   1 margin-top: -70px
   1 margin-top: -1em
   1 margin-top: $vertical-page-margin
   1 margin-top: $header-size
   1 margin-right: rem-calc(16px);
   1 margin-right: 36px
   1 margin-right: 2em
   1 margin-right: 1em
   1 margin-right: 15px
   1 margin-right: 0.5em
   1 margin-right: 0.2em
   1 margin-right: 0
   1 margin-right: $gutters
   1 margin-left: rem-calc(4px);
   1 margin-left: 36px
   1 margin-left: 2em
   1 margin-left: 24px
   1 margin-left: 20px
   1 margin-left: 1.5em
   1 margin-left: 0.25em
   1 margin-left: 0
   1 margin-left: -5px
   1 margin-left: $thumb-width-mobile + 16
   1 margin-left: $sidenav-width + 32
   1 margin-left: $margin-of-radio-button-text
   1 margin-left: $logo-margin
   1 margin-bottom: 4rem
   1 margin-bottom: 40px
   1 margin-bottom: 3em
   1 margin-bottom: 2px
   1 margin-bottom: 12px
   1 margin-bottom: 0.25em
   1 margin-bottom: -6px
   1 margin-bottom: ($header-size / 2)
   1 margin-bottom: $gutters

Here are stats on padding

  12 padding: 0
   9 padding: 8px
   4 padding: 10px
   4 padding: 0.5em
   4 padding-top: $container-side-padding
   4 padding-right: 1em
   4 padding-left: 8px
   4 padding-left: 20px
   4 padding-left: 0
   3 padding: 8px 0
   3 padding: 1em 2em
   3 padding: 1em 0
   3 padding-top: 10px
   3 padding-left: 1em
   3 padding-bottom: 3em
   2 padding: 1em
   2 padding: 16px 0
   2 padding: 16px
   2 padding: $containerSidePadding
   2 padding-right: 8px
   2 padding-right: 40px
   2 padding-right: 16px
   2 padding-right: 150px
   2 padding-right: 0
   2 padding-right: $container-side-padding
   2 padding-left: $container-side-padding
   2 padding-bottom: 24px
   2 padding-bottom: 10px
   2 $page-padding = 5px
   2 $container-side-padding = 15px
   1 width: `${width}px`, paddingTop: mobile ? '4px' : '8px'
   1 top: $page-padding
   1 paddingTop: padding,
   1 paddingRight: padding,
   1 paddingLeft: padding,
   1 padding: rem-calc(4px 0);
   1 padding: rem-calc(0 16px);
   1 padding: 5px
   1 padding: 4px
   1 padding: 32px 24px
   1 padding: 2px 0 0 25px
   1 padding: 2px
   1 padding: 2em 0
   1 padding: 1rem;
   1 padding: 18px
   1 padding: 15px 30px
   1 padding: 12px 24px
   1 padding: 10px 25px
   1 padding: 0;
   1 padding: 0 2em
   1 padding: 0 16px
   1 padding-top: 8px
   1 padding-top: 4px
   1 padding-top: 1em
   1 padding-top: 0.5em
   1 padding-top: 0
   1 padding-top: $vertical-page-margin
   1 padding-top: $fullscreen-button-height + $page-padding
   1 padding-right: 24px
   1 padding-right: 0.5em
   1 padding-left: 5px
   1 padding-left: 40px
   1 padding-left: 37px
   1 padding-left: 16px
   1 padding-left: 0.5em
   1 padding-bottom: 8px
   1 padding-bottom: 4rem
   1 padding-bottom: 4px
   1 padding-bottom: 40px
   1 padding-bottom: 0.5em
   1 padding-bottom: 0
   1 padding-bottom: (1.2 * $row-padding)
   1 padding-bottom: (0.7 * $row-padding)
   1 padding-bottom: $row-padding