diff --git a/scss/_drawer.scss b/scss/_drawer.scss
index 48762358..665c681c 100644
--- a/scss/_drawer.scss
+++ b/scss/_drawer.scss
@@ -3,60 +3,7 @@
 
 //WARNING: VERY MUCH A WORK IN PROGRESS!!!!!!!!!!!!!!!!!!!!
 
-.mdb-layout-container {
-  position: absolute;
-  width: 100%;
-  height: 100%;
 
-  // Main layout class.
-  .mdb-layout {
-    position: relative;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    flex-direction: column; // allows for sticky header and footer
-    overflow-x: hidden;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-  }
-}
-
-// Header
-.mdb-layout-header { // navbar
-  // FIXME: it would be nice to stick this directly on the navbar, but navbars are not flex ready, so this is relegated to be a container at this time.
-  z-index: 3;
-  box-sizing: border-box;
-  display: flex;
-  width: 100%;
-  max-height: 1000px;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  justify-content: flex-start;
-  transition-property: max-height;
-
-  > .navbar { // heights for common scenarios such as a header with a navbar
-
-    // Current navbar is not flex enabled https://github.com/twbs/bootstrap/issues/18875
-    //  - with flex a vertical align is a breeze
-    //  - with standard layout, we need to use padding instead of height to layout.
-    min-height: $mdb-layout-mobile-header-height;
-
-    // FIXME: hack remove padding once the flex layout works properly
-    $padding: ($mdb-layout-mobile-header-height - (1rem * $line-height)) / 2;
-    padding-top: $padding;
-    padding-bottom: $padding;
-
-    @include media-breakpoint-up(lg) {
-      min-height: $mdb-layout-desktop-header-height;
-
-      // FIXME: hack remove padding once the flex layout works properly
-      $padding: ($mdb-layout-desktop-header-height - (1rem * $line-height)) / 2;
-      padding-top: $padding;
-      padding-bottom: $padding;
-    }
-  }
-}
 
 // Drawer.
 .mdb-layout-drawer {
@@ -73,7 +20,7 @@
   flex-wrap: nowrap;
   overflow: visible;
   overflow-y: auto;
-  color: $mdb-layout-text-color;
+  color: $mdb-layout-drawer-text-color;
   background: $mdb-layout-drawer-bg-color;
 
   // Transform offscreen.
@@ -95,18 +42,6 @@
   }
 }
 
-// Content.
-.mdb-layout-content {
-  position: relative;
-  z-index: 1;
-  display: inline-block;
-  //-ms-flex: 0 1 auto; // Fix IE10 bug.
-  overflow-x: hidden;
-  overflow-y: auto;
-  flex-grow: 1;
-  -webkit-overflow-scrolling: touch; // TODO: why?
-}
-
 
 // FIXME: the below needs to happen if it is the right size OR if the drawer is visible.  Need to look at collapse or collapseInline to see if it can help us here.
 
@@ -141,7 +76,6 @@
 
 // Responsive Content with fixed drawer
 .mdb-layout-content {
-
   .mdb-layout-fixed-drawer > & {
     margin-left: 0;
   }
diff --git a/scss/_layout.scss b/scss/_layout.scss
new file mode 100644
index 00000000..55f53f7e
--- /dev/null
+++ b/scss/_layout.scss
@@ -0,0 +1,70 @@
+// this is a set of flex-based layout containers necessary for components such as the drawer.
+
+//WARNING: VERY MUCH A WORK IN PROGRESS!!!!!!!!!!!!!!!!!!!!
+
+.mdb-layout-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  // Main layout class.
+  .mdb-layout {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column; // allows for sticky header and footer
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+// Header
+.mdb-layout-header { // navbar
+  // FIXME: it would be nice to stick this directly on the navbar, but navbars are not flex ready, so this is relegated to be a container at this time.
+  z-index: 3;
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  max-height: 1000px;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  flex-shrink: 0;
+  justify-content: flex-start;
+  transition-property: max-height;
+
+  > .navbar { // heights for common scenarios such as a header with a navbar
+
+    // Current navbar is not flex enabled https://github.com/twbs/bootstrap/issues/18875
+    //  - with flex a vertical align is a breeze
+    //  - with standard layout, we need to use padding instead of height to layout.
+    min-height: $mdb-layout-mobile-header-height;
+
+    // FIXME: hack remove padding once the flex layout works properly
+    $padding: ($mdb-layout-mobile-header-height - (1rem * $line-height)) / 2;
+    padding-top: $padding;
+    padding-bottom: $padding;
+
+    @include media-breakpoint-up(lg) {
+      min-height: $mdb-layout-desktop-header-height;
+
+      // FIXME: hack remove padding once the flex layout works properly
+      $padding: ($mdb-layout-desktop-header-height - (1rem * $line-height)) / 2;
+      padding-top: $padding;
+      padding-bottom: $padding;
+    }
+  }
+}
+
+// Content.
+.mdb-layout-content {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  //-ms-flex: 0 1 auto; // Fix IE10 bug.
+  overflow-x: hidden;
+  overflow-y: auto;
+  flex-grow: 1;
+  -webkit-overflow-scrolling: touch; // TODO: why?
+}
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6530ada8..ca09fd02 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -38,6 +38,7 @@ $enable-flex: true;
 
 
 //
+@import "variables/layout";
 @import "variables/menu";
 @import "variables/drawer";
 
diff --git a/scss/variables/_drawer.scss b/scss/variables/_drawer.scss
index 58bd09a7..02470fbd 100644
--- a/scss/variables/_drawer.scss
+++ b/scss/variables/_drawer.scss
@@ -1,11 +1,6 @@
 // Drawer
 $mdb-layout-drawer-bg-color: rgba($grey-50, 1) !default;
-$mdb-layout-text-color: rgba($grey-800, 1) !default;
+$mdb-layout-drawer-text-color: rgba($grey-800, 1) !default;
 
 // Sizing
 $mdb-layout-drawer-sm: 240px !default;
-
-// General layout header height.
-// FIXME: is this really necessary or something to be considered custom?
-$mdb-layout-mobile-header-height: 3.5rem !default; // 56px
-$mdb-layout-desktop-header-height: 4rem !default; // 64px
diff --git a/scss/variables/_layout.scss b/scss/variables/_layout.scss
new file mode 100644
index 00000000..cbedcda8
--- /dev/null
+++ b/scss/variables/_layout.scss
@@ -0,0 +1,4 @@
+// General layout header height.
+// FIXME: is this really necessary or something to be considered custom?
+$mdb-layout-mobile-header-height: 3.5rem !default; // 56px
+$mdb-layout-desktop-header-height: 4rem !default; // 64px