diff --git a/_sass/components/_box.scss b/_sass/components/_box.scss
index 90e54f4f..62b9392c 100644
--- a/_sass/components/_box.scss
+++ b/_sass/components/_box.scss
@@ -1,49 +1,50 @@
 @import "settings/colors";
+@import "settings/breakpoints";
 
 .boxlist {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    .box {
-        min-height: 330px;
-        width: 260px;
-        margin: 1.5em 1.5em 1.5em 0;
-        background: $white;
-        box-shadow: 0 3px 6px $gray;
-        border-radius: 2px;
-        a {
-            color: $black;
-        }
-        @media(max-width: 544px) {
-            min-height: 240px;
-        }
-        &:hover {
-            box-shadow: 0px 6px 6px #aaa;
-        }
-        .box-link {
-            text-decoration: none;
-        }
-        .box-title {
-            margin: 0;
-            padding: 1.5em 1em;
-            background: $blue;
-            color: $white;
-            font-size: 1.2em;
-        }
-        .box-body {
-            padding: 2em 1em 1em 1em;
-            text-align: center;
-            p {
-                margin-top: 1em;
-            }
-        }
-        .box-logo {
-            height: 100px;
-            width: 100%;
-            object-fit: contain;
-            margin: 12px auto;
-        }
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  .box {
+    min-height: 330px;
+    width: 260px;
+    margin: 1.5em 1.5em 1.5em 0;
+    background: $white;
+    box-shadow: 0 3px 6px $gray;
+    border-radius: 2px;
+    a {
+      color: $black;
     }
-}
\ No newline at end of file
+    @media (max-width: $breakpoint-m) {
+      min-height: 240px;
+    }
+    &:hover {
+      box-shadow: 0px 6px 6px #aaa;
+    }
+    .box-link {
+      text-decoration: none;
+    }
+    .box-title {
+      margin: 0;
+      padding: 1.5em 1em;
+      background: $blue;
+      color: $white;
+      font-size: 1.2em;
+    }
+    .box-body {
+      padding: 2em 1em 1em 1em;
+      text-align: center;
+      p {
+        margin-top: 1em;
+      }
+    }
+    .box-logo {
+      height: 100px;
+      width: 100%;
+      object-fit: contain;
+      margin: 12px auto;
+    }
+  }
+}
diff --git a/_sass/components/_community-resource.scss b/_sass/components/_community-resource.scss
index ddfac527..36813b89 100644
--- a/_sass/components/_community-resource.scss
+++ b/_sass/components/_community-resource.scss
@@ -1,4 +1,5 @@
 @import "settings/colors";
+@import "settings/breakpoints";
 
 .resourcelist {
   display: table;
@@ -45,7 +46,7 @@
   }
 }
 
-@media (max-width: 992px) {
+@media (max-width: $breakpoint-l) {
   .resource {
     height: 400px;
     padding: 10px 0 30px;
diff --git a/_sass/components/_copy.scss b/_sass/components/_copy.scss
index de6b2235..530d6c01 100644
--- a/_sass/components/_copy.scss
+++ b/_sass/components/_copy.scss
@@ -1,9 +1,10 @@
-// Formatting for the text that is displayed in content sections of a page.
+@import "settings/breakpoints";
+
 p {
   margin: 0 0 10px;
 }
 
-@media (min-width: 992px) {
+@media (min-width: $breakpoint-l) {
   p {
     font-size: 16px;
     font-weight: 400;
@@ -11,7 +12,7 @@ p {
   }
 }
 
-@media (max-width: 992px) {
+@media (max-width: $breakpoint-l) {
   p {
     font-size: 16px;
     font-weight: 400;
@@ -19,7 +20,7 @@ p {
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: $breakpoint-m) {
   p {
     font-size: 16px;
     font-weight: 400;
diff --git a/_sass/components/_homepage.scss b/_sass/components/_homepage.scss
index c67bacc4..f41de567 100644
--- a/_sass/components/_homepage.scss
+++ b/_sass/components/_homepage.scss
@@ -1,10 +1,11 @@
 @import "settings/colors";
+@import "settings/breakpoints";
 
 .homepage-section {
   display: table;
   padding: 7em 0;
   width: 100%;
-  @media (max-width: 420px) {
+  @media (max-width: $breakpoint-s) {
     padding: 3em 0;
   }
   .showcase {
@@ -17,7 +18,7 @@
     margin-top: 2em;
     h2 {
       margin: 0;
-      @media (max-width: 420px) {
+      @media (max-width: $breakpoint-s) {
         font-size: 1.8em;
       }
     }
@@ -32,7 +33,7 @@
     justify-content: start;
     align-items: center;
     flex-direction: row;
-    @media (max-width: 420px) {
+    @media (max-width: $breakpoint-s) {
       align-items: start;
       flex-direction: column;
     }
@@ -59,7 +60,7 @@
       text-decoration: none;
     }
     &:first-of-type {
-      @media (max-width: 420px) {
+      @media (max-width: $breakpoint-s) {
         margin-bottom: 1em;
       }
     }
@@ -71,14 +72,14 @@
     justify-content: start;
     align-items: center;
     flex-direction: row;
-    @media (max-width: 420px) {
+    @media (max-width: $breakpoint-s) {
       margin-top: 1em;
       align-items: start;
       flex-direction: column;
     }
     .feature {
       margin: 0 2em;
-      @media (max-width: 420px) {
+      @media (max-width: $breakpoint-s) {
         margin: 0 0 2em 0;
       }
       h3 {
@@ -93,7 +94,7 @@
   }
   &.openstandards-section {
     width: 100%;
-    @media (max-width: 900px) {
+    @media (max-width: $breakpoint-l) {
       padding: 1em 1em 0 1em;
     }
     .description {
@@ -108,7 +109,7 @@
       align-items: center;
       flex-direction: row;
       margin: 4em 0 0 0;
-      @media (max-width: 900px) {
+      @media (max-width: $breakpoint-l) {
         margin: 2em 0 0 0;
         align-items: start;
         flex-direction: column;
@@ -122,7 +123,7 @@
         height: auto;
         padding: 2em;
         margin: 0 auto 2em auto;
-        @media (max-width: 900px) {
+        @media (max-width: $breakpoint-l) {
           width: 275px;
         }
         h3 {
diff --git a/_sass/components/_iframes.scss b/_sass/components/_iframes.scss
index 97cd390a..146f90e1 100644
--- a/_sass/components/_iframes.scss
+++ b/_sass/components/_iframes.scss
@@ -1,9 +1,11 @@
+@import "settings/breakpoints";
+
 .iframe-container {
   position: relative;
   overflow: hidden;
   width: 100%;
   padding-top: 75%; /* 4:3 Aspect Ratio */
-  @media (max-width: 767px) {
+  @media (max-width: $breakpoint-m) {
     padding-top: 130%; /* A custom aspect ratio for Google Calendar */
   }
 }
diff --git a/_sass/components/_jumbotron.scss b/_sass/components/_jumbotron.scss
index fa2b0bec..f01580e2 100644
--- a/_sass/components/_jumbotron.scss
+++ b/_sass/components/_jumbotron.scss
@@ -1,68 +1,90 @@
-/*Main logo animation on the front page of the Jupyter website */
+@import "settings/breakpoints";
 
-@-webkit-keyframes fadeIn { from { opacity:0;} to { opacity:1;} }
-@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
-@keyframes fadeIn { from { opacity:0;} to { opacity:1;} }
+/*Main logo animation on the front page of the Jupyter website */
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@-moz-keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 /*This entire section related to fading is for the front page with the Jupyter logo*/
 .fade-in {
-    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
-    -moz-animation:fadeIn ease-in 1;
-    animation:fadeIn ease-in 1;
+  -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animation ease-in and repeat it only 1 time */
+  -moz-animation: fadeIn ease-in 1;
+  animation: fadeIn ease-in 1;
 
-    -webkit-animation-duration:1s;
-    -moz-animation-duration:1s;
-    animation-duration:1s;
+  -webkit-animation-duration: 1s;
+  -moz-animation-duration: 1s;
+  animation-duration: 1s;
 
-    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-    -moz-animation-fill-mode:forwards;
-    animation-fill-mode:forwards;
+  -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
+  -moz-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
 
-    opacity:0;  /* make things invisible upon start */
+  opacity: 0; /* make things invisible upon start */
 }
 
 .jumbotron {
-    background-color: white;
-    margin-top:30px;
-    overflow: hidden;
-    @media (max-width: 768px) {
-        margin-right: 5%;
-    }
-    .main-logo {
-        height: calc(100% - 20px);
-        margin-top: 10px;
-        padding-left: 20px;
-    }
-    .fade-in.one {
-        -webkit-animation-delay: 0.3s;
-        -moz-animation-delay: 0.3s;
-        animation-delay: 0.3s;
-    }
-    .fade-in.two {
-        -webkit-animation-delay: 0.7s;
-        -moz-animation-delay:0.7s;
-        animation-delay: 0.7s;
-    }
-    .fade-in.three {
-        -webkit-animation-delay: 1.1s;
-        -moz-animation-delay: 1.1s;
-        animation-delay: 1.1s;
-    }
-    .jumbotron-image-container {
-        height: 100%;
-        margin: 0 auto;
-        position: absolute;
-        text-align: center;
-        width: 95%;
-        img {
-            margin: 0 auto;
-            vertical-align: middle;
-        }
+  background-color: white;
+  margin-top: 30px;
+  overflow: hidden;
+  @media (max-width: $breakpoint-m) {
+    margin-right: 5%;
+  }
+  .main-logo {
+    height: calc(100% - 20px);
+    margin-top: 10px;
+    padding-left: 20px;
+  }
+  .fade-in.one {
+    -webkit-animation-delay: 0.3s;
+    -moz-animation-delay: 0.3s;
+    animation-delay: 0.3s;
+  }
+  .fade-in.two {
+    -webkit-animation-delay: 0.7s;
+    -moz-animation-delay: 0.7s;
+    animation-delay: 0.7s;
+  }
+  .fade-in.three {
+    -webkit-animation-delay: 1.1s;
+    -moz-animation-delay: 1.1s;
+    animation-delay: 1.1s;
+  }
+  .jumbotron-image-container {
+    height: 100%;
+    margin: 0 auto;
+    position: absolute;
+    text-align: center;
+    width: 95%;
+    img {
+      margin: 0 auto;
+      vertical-align: middle;
     }
+  }
 }
 
 .jumbotron-text {
-    padding-bottom: 32px;
-    text-align: center;
-    font-size: 18px;
-    line-height: 1.3;
+  padding-bottom: 32px;
+  text-align: center;
+  font-size: 18px;
+  line-height: 1.3;
 }
diff --git a/_sass/components/_jupyterhub.scss b/_sass/components/_jupyterhub.scss
index d1f5692e..c199b605 100644
--- a/_sass/components/_jupyterhub.scss
+++ b/_sass/components/_jupyterhub.scss
@@ -1,6 +1,7 @@
+@import "settings/breakpoints";
+
 /* JupyterHub section on front page */
 /* Feature-middle is for the JupyterHub features that are in the middle that need to be offset to sit on the track */
-
 .jupyterhub {
   .feature-middle {
     margin-top: 40px;
@@ -45,7 +46,7 @@
     margin-top: 24px;
   }
 
-  @media (max-width: 992px) {
+  @media (max-width: $breakpoint-l) {
     .hublogo {
       max-width: 80%;
     }
diff --git a/_sass/components/_logogrid.scss b/_sass/components/_logogrid.scss
index f28dd279..f5a69c2b 100644
--- a/_sass/components/_logogrid.scss
+++ b/_sass/components/_logogrid.scss
@@ -1,49 +1,50 @@
-/* A grid layout of logos for supporters, partners, etc. */
+@import "settings/breakpoints";
 
+/* A grid layout of logos for supporters, partners, etc. */
 ul.logogrid {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    margin: 0;
-    li {
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        display: inline-block;
-        padding: 3%;
-        vertical-align: middle;
-        width: 23%;
-        @media (max-width: 768px) {
-            width: 30%;
-            padding: 4%;
-        }
-        &.small {
-            width: 18%;
-            @media (max-width: 768px) {
-                width: 30%;
-                padding: 4%;
-            }
-        }
-        img {
-            display: block;
-            width: 100%;
-            height: auto;
-            margin: 0;
-        }
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  li {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    display: inline-block;
+    padding: 3%;
+    vertical-align: middle;
+    width: 23%;
+    @media (max-width: $breakpoint-m) {
+      width: 30%;
+      padding: 4%;
     }
-    .greydout {
-        -webkit-transition: all .05s ease;
-        -moz-transition: all .05s ease;
-        -ms-transition: all .05s ease;
-        -o-transition: all .05s ease;
-        transition: all .05s ease;
+    &.small {
+      width: 18%;
+      @media (max-width: $breakpoint-m) {
+        width: 30%;
+        padding: 4%;
+      }
     }
-    .greydout:hover {
-        -webkit-opacity: 0.65;
-        -moz-opacity: 0.65;
-        opacity: 0.65;
+    img {
+      display: block;
+      width: 100%;
+      height: auto;
+      margin: 0;
     }
+  }
+  .greydout {
+    -webkit-transition: all 0.05s ease;
+    -moz-transition: all 0.05s ease;
+    -ms-transition: all 0.05s ease;
+    -o-transition: all 0.05s ease;
+    transition: all 0.05s ease;
+  }
+  .greydout:hover {
+    -webkit-opacity: 0.65;
+    -moz-opacity: 0.65;
+    opacity: 0.65;
+  }
 }
diff --git a/_sass/components/_navbar.scss b/_sass/components/_navbar.scss
index 41b35fc3..c8985071 100644
--- a/_sass/components/_navbar.scss
+++ b/_sass/components/_navbar.scss
@@ -1,130 +1,131 @@
 @import "settings/colors";
+@import "settings/breakpoints";
 
 .navbar {
+  display: block;
+  border-bottom: 1px solid darken($light-gray, 10%);
+  background-color: $white;
+  padding: 15px 25px;
+  @media (max-width: $breakpoint-l) {
+    padding: 0.5em 1em;
+  }
+  .navbar-header {
+    float: left;
+  }
+  .navbar-brand img {
     display: block;
-    border-bottom: 1px solid darken($light-gray, 10%);
-    background-color: $white;
-    padding: 15px 25px;
-    @media (max-width: 880px) {
-        padding: 0.5em 1em;
+  }
+  .navbar-brand:hover,
+  .navbar-brand:focus {
+    text-decoration: none;
+  }
+  .mobile-clearfix {
+    @media (max-width: $breakpoint-l) {
+      clear: both;
     }
-    .navbar-header {
-        float: left;
+  }
+  .navbar-collapse {
+    overflow-x: visible;
+    -webkit-overflow-scrolling: touch;
+    border-top: 1px solid transparent;
+    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+  .collapse {
+    @media (max-width: $breakpoint-l) {
+      display: none;
     }
-    .navbar-brand  img {
-        display: block;
-    }
-    .navbar-brand:hover,
-    .navbar-brand:focus {
-      text-decoration: none;
-    }
-    .mobile-clearfix {
-        @media (max-width: 880px) {
-            clear: both;
-        }
-    }
-    .navbar-collapse {
-        overflow-x: visible;
-        -webkit-overflow-scrolling: touch;
-        border-top: 1px solid transparent;
-        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
-              box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
-    }
-    .collapse {
-        @media (max-width: 880px) {
-            display: none;
-        }
-    }
-    .show {
-      display: block !important;
-    }
-    .fade {
-      opacity: 0;
-      -webkit-transition: opacity .15s linear;
-           -o-transition: opacity .15s linear;
-              transition: opacity .15s linear;
+  }
+  .show {
+    display: block !important;
+  }
+  .fade {
+    opacity: 0;
+    -webkit-transition: opacity 0.15s linear;
+    -o-transition: opacity 0.15s linear;
+    transition: opacity 0.15s linear;
+  }
+  .fade.in {
+    opacity: 1;
+  }
+  .collapse.in {
+    display: block;
+  }
+  .collapsing {
+    position: relative;
+    height: 0;
+    overflow: hidden;
+    -webkit-transition-timing-function: ease;
+    -o-transition-timing-function: ease;
+    transition-timing-function: ease;
+    -webkit-transition-duration: 0.35s;
+    -o-transition-duration: 0.35s;
+    transition-duration: 0.35s;
+    -webkit-transition-property: height, visibility;
+    -o-transition-property: height, visibility;
+    transition-property: height, visibility;
+  }
+  .navbar-links {
+    list-style: none;
+    float: right;
+    padding: 0;
+    margin: 0;
+    .navbar-active {
+      color: $dark-orange;
     }
-    .fade.in {
-      opacity: 1;
+    @media (max-width: $breakpoint-l) {
+      margin-top: 10px;
+      float: left;
+      clear: both;
     }
-    .collapse.in {
+    li {
+      float: left;
+      position: relative;
       display: block;
+      font-size: 16px;
+      padding: 12px 12px 0;
+      line-height: 20px;
+      &:last-of-type {
+        padding-right: 0;
+      }
+      a {
+        color: $black;
+      }
+      a:hover {
+        color: $dark-orange;
+        text-decoration: none;
+      }
+      @media (max-width: $breakpoint-l) {
+        padding: 12px 0;
+        font-size: 13px;
+        letter-spacing: 1px;
+        clear: both;
+      }
     }
-    .collapsing {
-      position: relative;
-      height: 0;
-      overflow: hidden;
-      -webkit-transition-timing-function: ease;
-           -o-transition-timing-function: ease;
-              transition-timing-function: ease;
-      -webkit-transition-duration: .35s;
-           -o-transition-duration: .35s;
-              transition-duration: .35s;
-      -webkit-transition-property: height, visibility;
-           -o-transition-property: height, visibility;
-              transition-property: height, visibility;
+  }
+  .hamburger {
+    position: relative;
+    float: right;
+    padding: 9px 10px;
+    margin: 0;
+    background-color: transparent;
+    background-image: none;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    height: 40px;
+    .icon-bar {
+      background-color: black;
+      display: block;
+      width: 22px;
+      height: 2px;
+      border-radius: 1px;
+      background-color: black;
     }
-    .navbar-links {
-        list-style: none;
-        float: right;
-        padding: 0;
-        margin: 0;
-        .navbar-active {
-            color: $dark-orange;
-        }
-        @media (max-width: 880px) {
-            margin-top: 10px;
-            float: left;
-            clear: both;
-        }
-        li {
-            float: left;
-            position: relative;
-            display: block;
-            font-size: 16px;
-            padding: 12px 12px 0;
-            line-height: 20px;
-            &:last-of-type {
-                padding-right: 0;
-            }
-            a {
-                color: $black;
-            }
-            a:hover {
-                color: $dark-orange;
-                text-decoration: none;
-            }
-            @media (max-width: 880px) {
-                padding: 12px 0;
-                font-size: 13px;
-                letter-spacing: 1px;
-                clear: both;
-            }
-        }
+    .icon-bar + .icon-bar {
+      margin-top: 4px;
     }
-    .hamburger {
-        position: relative;
-        float: right;
-        padding: 9px 10px;
-        margin: 0;
-        background-color: transparent;
-        background-image: none;
-        border: 1px solid transparent;
-        border-radius: 4px;
-        height: 40px;
-        .icon-bar {
-            background-color: black;
-            display: block;
-            width: 22px;
-            height: 2px;
-            border-radius: 1px;
-            background-color: black;
-        }
-        .icon-bar + .icon-bar {
-            margin-top: 4px;
-        }
-        @media (min-width: 880px) {
-            display: none;
-        }
+    @media (min-width: $breakpoint-l) {
+      display: none;
     }
+  }
 }
diff --git a/_sass/settings/_breakpoints.scss b/_sass/settings/_breakpoints.scss
new file mode 100644
index 00000000..2b4d28b9
--- /dev/null
+++ b/_sass/settings/_breakpoints.scss
@@ -0,0 +1,4 @@
+$breakpoint-s: 420px;
+$breakpoint-m: 768px;
+$breakpoint-l: 880px;
+$breakpoint-xl: 1200px;