diff --git a/STARTERKIT/sass/_base.scss b/STARTERKIT/sass/_base.scss
index f95d746..809691d 100644
--- a/STARTERKIT/sass/_base.scss
+++ b/STARTERKIT/sass/_base.scss
@@ -99,6 +99,27 @@ $tabs-border: #bbb;
 
 
 //
+// Responsive Breakpoints
+//
+
+$break-small: 480px;
+$break-large: 960px;
+
+
+@mixin respond-to($media) {
+  @if $media == handhelds {
+    @media only screen and (max-width: $break-small - 1) { @content; }
+  }
+  @else if $media == medium-screens {
+    @media only screen and (min-width: $break-small) and (max-width: $break-large - 1) { @content; }
+  }
+  @else if $media == wide-screens {
+    @media only screen and (min-width: $break-large) { @content; }
+  }
+}
+
+
+//
 // Partials to be shared with all .scss files.
 //
 
diff --git a/STARTERKIT/sass/layouts/responsive-sidebars.scss b/STARTERKIT/sass/layouts/responsive-sidebars.scss
index c87fc61..ee0b527 100644
--- a/STARTERKIT/sass/layouts/responsive-sidebars.scss
+++ b/STARTERKIT/sass/layouts/responsive-sidebars.scss
@@ -68,7 +68,7 @@ $zen-auto-include-item-base: false;
  * Navigation bar
  */
 
-@media all and (min-width: 480px) {
+@media all and (min-width: $break-small) {
   #main {
     padding-top: 3em; /* Move all the children of #main down to make room. */
     position: relative;
@@ -81,7 +81,7 @@ $zen-auto-include-item-base: false;
   }
 }
 
-@media all and (min-width: 480px) and (max-width: 959px) {
+@include respond-to(medium-screens) {
   /*
    * Use 3 grid columns for smaller screens.
    */
@@ -150,7 +150,7 @@ $zen-auto-include-item-base: false;
   }
 }
 
-@media all and (min-width: 960px) {
+@include respond-to(wide-screens) {
   /*
    * Use 5 grid columns for larger screens.
    */