Add spacing css

app/assets/stylesheets/_sizes.scss

@@ -0,0 +1,8 @@
+$unit: 8px;
+
+$xsmall: $unit / 4;  // 2px
+$small: $unit / 2;   // 4px
+$medium: $unit;      // 8px
+$large: $unit * 2;   // 16px
+$xlarge: $unit * 3;  // 24px
+$xxlarge: $unit * 4; // 32px

app/assets/stylesheets/application.scss

@@ -1,6 +1,8 @@
 @import "bootstrap";
+@import "spacing";
 @import "fonts";
 @import "colors";
+@import "borders";
 @import "flex";
 @import "scaffolds";
 @import "school_categories";

app/assets/stylesheets/borders.scss

@@ -0,0 +1,5 @@
+@import "sizes";
+
+.border-radius-8 {
+  border-radius: $unit;
+}

app/assets/stylesheets/spacing.scss

@@ -0,0 +1,55 @@
+@import 'sizes';
+
+.pv80 {
+  padding-top: 80px;
+  padding-bottom: 80px;
+}
+
+.ph120 {
+  padding-left: 120px;
+  padding-right: 120px;
+}
+
+$whitespace-keys: (p padding, m margin, a '', v -top -bottom, h -left -right, t -top, r -right, b -bottom, l -left);
+
+@function expand_whitespace_key($key) {
+  @each $pair in $whitespace-keys {
+    $short: nth($pair, 1);
+    $long: nth($pair, 2);
+
+    // v and h need to pass in 2 parameters
+    @if (length($pair) == 3) {
+      $long: (nth($pair, 2) nth($pair, 3));
+    }
+    @if $short == $key {
+      @return $long;
+    }
+  }
+  @warn "Couldn't export #{$key}";
+  @return $key;
+}
+
+$types: (p, m);
+$locations: (a, v, h, t, r, b, l);
+$t-shirt-sizes: (n, xs, s, m, l, xl, xxl);
+
+@mixin whitespace($units: ()) {
+  $units: join(0, $units);
+
+  @for $i from 1 through length($units) {
+    $t-shirt-size: nth($t-shirt-sizes, $i);
+    $size: nth($units, $i);
+
+    @each $location in $locations {
+      @each $type in $types {
+        .#{$type}#{$location}#{$t-shirt-size} {
+          @each $whitespace-location in expand_whitespace_key($location) {
+            #{expand_whitespace_key($type)}#{$whitespace-location}: $size !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include whitespace(($xsmall, $small, $medium, $large, $xlarge, $xxlarge));

app/views/dashboard/_construct_bar_graph.erb

@@ -1,4 +1,4 @@
-<div class="white-bg" style="padding: 24px; border-radius: 8px;">
+<div class="white-bg paxl border-radius-8">
 
   <% heading_gutter = 30 %>
   <% construct_row_height = 40 %>

app/views/dashboard/index.html.erb

@@ -1,6 +1,6 @@
 <h1><%= @school.name %></h1>
 
-<div class="beige-bg" style="padding: 80px 120px;">
+<div class="beige-bg ph120 pv80">
   <div class="fdr fjb fac">
     <h2 class="h1">Areas Of Interest</h2>
     <div>
@@ -18,7 +18,7 @@
     </div>
   </div>
 
-  <div>
+  <div class="mtl">
     <h2 class="h1 red">Distance from benchmark</h2>
     <p class="p">This graph shows how much a score is above or below the benchmark of any given scale.</p>
   </div>