diff --git a/examples/package.json b/examples/package.json
index 96c88ed..c40e104 100644
--- a/examples/package.json
+++ b/examples/package.json
@@ -39,16 +39,16 @@
     "threads": "git+ssh://git@github.com/beefchimi/threads.git#v1.0.0-beta8"
   },
   "devDependencies": {
-    "autoprefixer": "^8.1.0",
+    "autoprefixer": "^8.2.0",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.4",
     "babel-preset-shopify": "^16.3.0",
     "browser-sync": "^2.23.6",
     "cssnano": "^3.10.0",
     "cssnano-preset-advanced": "^4.0.0-rc.2",
-    "eslint": "^4.19.0",
+    "eslint": "^4.19.1",
     "eslint-plugin-prettier": "^2.6.0",
-    "eslint-plugin-shopify": "^19.0.0",
+    "eslint-plugin-shopify": "^20.0.0",
     "gulp": "gulpjs/gulp#v4.0.0-alpha.3",
     "gulp-cli": "^2.0.1",
     "gulp-data": "^1.3.1",
@@ -63,7 +63,7 @@
     "prettier-stylelint": "^0.4.2",
     "stylelint": "^9.1.3",
     "stylelint-config-shopify": "^5.0.0",
-    "webpack": "^4.1.1",
+    "webpack": "^4.2.0",
     "webpack-bundle-analyzer": "^2.11.1"
   }
 }
diff --git a/examples/src/components/Block/Block.scss b/examples/src/components/Block/Block.scss
index e56b0e5..08cfa5e 100644
--- a/examples/src/components/Block/Block.scss
+++ b/examples/src/components/Block/Block.scss
@@ -22,13 +22,14 @@
 .BlockContent {
   @include flex-center;
   position: relative;
-  min-height: columns();
+  min-height: rows(2, true);
   height: 100%;
   color: white;
   background-color: get-color(coal, dark);
   border: get-border(thin) solid get-color(coal, dark);
 
   @media screen and (min-width: get-breakpoint(tablet)) {
+    min-height: rows(2);
     border-width: get-border();
   }
 
diff --git a/examples/src/components/GridOverlay/GridOverlay.scss b/examples/src/components/GridOverlay/GridOverlay.scss
new file mode 100644
index 0000000..4f872d9
--- /dev/null
+++ b/examples/src/components/GridOverlay/GridOverlay.scss
@@ -0,0 +1,77 @@
+////
+/// Components
+/// Grid Overlay
+////
+
+@import 'utils/shared/functions';
+@import 'utils/shared/layout';
+@import 'components/Main/props';
+
+$grid-overlay-baseline: 0.1rem;
+
+.GridOverlay {
+  --columns: 4;
+  --repeating-width: calc(100% / var(--columns));
+  --gutter-size: get-layout-length(gutter, mobile);
+  --column-width: calc((100% / var(--columns)) - var(--gutter-size));
+  --baseline-stop: calc(var(--gutter-size) - #{$grid-overlay-baseline});
+  --row-height: calc(#{rows(1, true)} + var(--gutter-size));
+  --bg-width: calc(100% + var(--gutter-size));
+  --bg-baseline: repeating-linear-gradient(
+    to bottom,
+    get-color(purple),
+    get-color(purple) $grid-overlay-baseline,
+    transparent $grid-overlay-baseline,
+    transparent var(--baseline-stop),
+    get-color(purple) var(--baseline-stop),
+    get-color(purple) var(--gutter-size),
+    transparent var(--gutter-size),
+    transparent var(--row-height)
+  );
+  --bg-columns: repeating-linear-gradient(
+    to right,
+    get-color(purple, light),
+    get-color(purple, light) var(--column-width),
+    transparent var(--column-width),
+    transparent var(--repeating-width)
+  );
+
+  @media screen and (min-width: get-breakpoint(tablet)) {
+    --columns: 6;
+    --gutter-size: get-layout-length(gutter);
+    --row-height: calc(#{rows()} + var(--gutter-size));
+  }
+
+  @media screen and (min-width: get-breakpoint(desktop)) {
+    --columns: 8;
+  }
+
+  // positioned parent will be `body`
+  @include centered-width(get-layout-length(main-interior));
+  z-index: 1;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: get-spacing(tight);
+  right: get-spacing(tight);
+  min-height: 100vh;
+  background-image: var(--bg-baseline), var(--bg-columns);
+  background-size: var(--bg-width) 100%;
+  background-position: 0 calc(-1 * var(--gutter-size));
+  mix-blend-mode: multiply;
+  opacity: 0.8;
+  pointer-events: none;
+
+  @media screen and (min-width: get-breakpoint()) {
+    left: $main-padding-left-tablet;
+  }
+
+  @media screen and (min-width: get-breakpoint(desktop)) {
+    right: get-spacing(fattest);
+    left: $main-padding-left-desktop;
+  }
+}
+
+.GridOverlay--isHidden {
+  display: none;
+}
diff --git a/examples/src/components/Main/Main.scss b/examples/src/components/Main/Main.scss
index 3ceea32..5a2c123 100644
--- a/examples/src/components/Main/Main.scss
+++ b/examples/src/components/Main/Main.scss
@@ -3,7 +3,9 @@
 /// Main
 ////
 
+@import 'utils/shared/layout';
 @import 'components/MobileNav/props';
+@import 'props';
 
 .Main {
   padding: $mobile-nav-padding-top get-spacing(tight) get-spacing(looser);
@@ -13,7 +15,7 @@
 
   @media screen and (min-width: get-breakpoint()) {
     padding-top: get-spacing(looser);
-    padding-left: get-layout-length(sidebar) + get-spacing(tight);
+    padding-left: $main-padding-left-tablet;
   }
 
   @media screen and (min-width: get-breakpoint(desktop)) {
@@ -21,7 +23,7 @@
       get-spacing(fat)
       get-spacing(fattest)
       get-spacing(fat)
-      (get-layout-length(sidebar) + get-spacing(fattest));
+      $main-padding-left-desktop;
   }
 }
 
diff --git a/examples/src/components/Main/props.scss b/examples/src/components/Main/props.scss
new file mode 100644
index 0000000..22578f2
--- /dev/null
+++ b/examples/src/components/Main/props.scss
@@ -0,0 +1,7 @@
+////
+/// Components
+/// Main props
+////
+
+$main-padding-left-tablet: get-layout-length(sidebar) + get-spacing(tight);
+$main-padding-left-desktop: get-layout-length(sidebar) + get-spacing(fattest);
diff --git a/examples/src/components/PageHeader/PageHeader.scss b/examples/src/components/PageHeader/PageHeader.scss
index 7aded7a..0caa391 100644
--- a/examples/src/components/PageHeader/PageHeader.scss
+++ b/examples/src/components/PageHeader/PageHeader.scss
@@ -3,6 +3,8 @@
 /// PageHeader
 ////
 
+@import 'utils/shared/layout';
+
 .PageHeader {
   @include centered-width(get-layout-length(page-header));
   margin-bottom: get-spacing(loose);
diff --git a/examples/src/components/StackedList/StackedList.scss b/examples/src/components/StackedList/StackedList.scss
index ce03d55..f5ab67e 100644
--- a/examples/src/components/StackedList/StackedList.scss
+++ b/examples/src/components/StackedList/StackedList.scss
@@ -14,12 +14,16 @@
   @include stripes-bg;
   position: relative;
   color: get-color(coal, dark);
-  box-shadow: inset 0 0 0 get-border() currentColor;
+  box-shadow: inset 0 0 0 get-border(thin) currentColor;
   // `draggable-container-parent--capacity` changes the `color` on `StackedListWrapper`...
   // This is supposed to "trickle" down and cause all children to transition color as well...
   // Problem is, sometimes these transitions seem to collide and we don't get syncronised timing...
   // Sadly, there is no way to target `box-shadow`'s color without the use of currentColor.
   // transition: color get-duration(fast) get-easing();
+
+  @media screen and (min-width: get-breakpoint(tablet)) {
+    box-shadow: inset 0 0 0 get-border() currentColor;
+  }
 }
 
 .StackedListHeader,
@@ -34,13 +38,14 @@
 }
 
 .StackedListHeader {
-  padding:
-    stacked-list-header(padding-top)
-    (get-spacing(tighter) + 0.8rem)
-    stacked-list-header(padding-bottom);
+  padding: stacked-list-header(padding);
   background-color: currentColor;
   transition: color get-duration(fast) get-easing();
 
+  @media screen and (min-width: get-breakpoint(tablet)) {
+    padding: stacked-list-header(padding, tablet);
+  }
+
   p {
     margin-top: 0.2em;
     font-size: get-type-scale(paragraph);
@@ -58,7 +63,11 @@
 
 .StackedList {
   position: relative;
-  margin-top: -(get-border());
+  margin-top: -(get-border(thin));
+
+  @media screen and (min-width: get-breakpoint(tablet)) {
+    margin-top: -(get-border());
+  }
 
   &::before {
     @include visible(false);
@@ -90,7 +99,11 @@
   cursor: get-cursor();
 
   &:nth-child(1n+2) {
-    margin-top: -(get-border());
+    margin-top: -(get-border(thin));
+
+    @media screen and (min-width: get-breakpoint(tablet)) {
+      margin-top: -(get-border());
+    }
   }
 
   .draggable--original:first-child + & {
@@ -105,12 +118,16 @@
   padding: get-spacing(tighter);
   color: currentColor;
   background-color: get-color(ash, light);
-  border: get-border() solid currentColor;
+  border: get-border(thin) solid currentColor;
   transition:
     color get-duration(fast) get-easing(),
     background-color get-duration(fast) get-easing(),
     transform get-duration() get-easing(bungie);
 
+  @media screen and (min-width: get-breakpoint(tablet)) {
+    border-width: get-border();
+  }
+
   .Heading {
     flex: 1 1 auto;
   }
@@ -126,16 +143,23 @@
   &::before {
     content: '';
     position: absolute;
-    top: -(get-border());
-    right: -(get-border());
-    left: -(get-border());
+    top: -(get-border(thin));
+    right: -(get-border(thin));
+    left: -(get-border(thin));
     display: block;
-    height: get-border();
+    height: get-border(thin);
     background-color: currentColor;
     opacity: 0;
     transition:
       color get-duration(fast) get-easing(),
       opacity get-duration(fast) get-easing();
+
+    @media screen and (min-width: get-breakpoint(tablet)) {
+      top: -(get-border());
+      right: -(get-border());
+      left: -(get-border());
+      height: get-border();
+    }
   }
 }
 
diff --git a/examples/src/components/StackedList/props.scss b/examples/src/components/StackedList/props.scss
index a97079e..45bc2e7 100644
--- a/examples/src/components/StackedList/props.scss
+++ b/examples/src/components/StackedList/props.scss
@@ -4,11 +4,9 @@
 ////
 
 $stacked-list-header: (
-  padding-top: (
-    base: get-spacing(tighter) + (get-border() / 2),
-  ),
-  padding-bottom: (
-    base: get-spacing(tighter) + get-border(),
+  padding: (
+    base: get-spacing(tighter) + get-border(thin),
+    tablet: get-spacing(tighter) + get-border(),
   ),
 );
 
@@ -16,6 +14,8 @@ $stacked-list-header: (
   @return threads-value-get($stacked-list-header, $group, $variant);
 }
 
+// using static values instead of `rows()`
+// will consider switching later when I have more time
 $stacked-list-item: (
   base: (
     base: 7.2rem,
@@ -37,8 +37,8 @@ $stacked-list-item: (
 
 ///
 /// Mixins
-@mixin stacked-list-scroll-height($size: stacked-list-item(), $rows: 6) {
-  height: ($size * $rows) - (get-border() * ($rows - 1));
+@mixin stacked-list-scroll-height($size: stacked-list-item(), $rows: 6, $border-width: thin) {
+  height: ($size * $rows) - (get-border($border-width) * ($rows - 1));
 }
 
 @mixin scroll-indicator($vertical: true) {
@@ -54,11 +54,19 @@ $stacked-list-item: (
     right: 0;
     bottom: 0;
     left: 0;
-    height: get-border();
+    height: get-border(thin);
   } @else {
     top: 0;
     right: 0;
     bottom: 0;
-    width: get-border();
+    width: get-border(thin);
+  }
+
+  @media screen and (min-width: get-breakpoint(tablet)) {
+    @if $vertical {
+      height: get-border();
+    } @else {
+      width: get-border();
+    }
   }
 }
diff --git a/examples/src/components/StackedList/variants.scss b/examples/src/components/StackedList/variants.scss
index aff0791..d9a5047 100644
--- a/examples/src/components/StackedList/variants.scss
+++ b/examples/src/components/StackedList/variants.scss
@@ -55,7 +55,7 @@
 
     @media screen and (min-width: get-breakpoint(desktop)) {
       @include stacked-list-scroll-height(
-        stacked-list-item(medium, desktop), 3
+        stacked-list-item(medium, desktop), 3, base
       );
     }
   }
@@ -67,7 +67,7 @@
 
     @media screen and (min-width: get-breakpoint(desktop)) {
       @include stacked-list-scroll-height(
-        stacked-list-item(large, desktop), 3
+        stacked-list-item(large, desktop), 3, base
       );
     }
   }
@@ -79,7 +79,7 @@
 
   @media screen and (min-width: get-breakpoint(desktop)) {
     @include stacked-list-scroll-height(
-      stacked-list-item(base, desktop), 7
+      stacked-list-item(base, desktop), 7, base
     );
   }
 
@@ -92,7 +92,7 @@
 
     @media screen and (min-width: get-breakpoint(desktop)) {
       @include stacked-list-scroll-height(
-        stacked-list-item(medium, desktop), 3
+        stacked-list-item(medium, desktop), 3, base
       );
     }
   }
@@ -104,7 +104,7 @@
 
     @media screen and (min-width: get-breakpoint(desktop)) {
       @include stacked-list-scroll-height(
-        stacked-list-item(large, desktop), 3
+        stacked-list-item(large, desktop), 3, base
       );
     }
   }
@@ -148,8 +148,12 @@
     display: flex;
     flex: 1 1 auto;
     margin-top: 0;
-    margin-left: -(get-border());
+    margin-left: -(get-border(thin));
     overflow-x: scroll;
+
+    @media screen and (min-width: get-breakpoint(tablet)) {
+      margin-left: -(get-border());
+    }
   }
 
   .StackedListItem {
@@ -158,7 +162,11 @@
 
     &:nth-child(1n+2) {
       margin-top: 0;
-      margin-left: -(get-border());
+      margin-left: -(get-border(thin));
+
+      @media screen and (min-width: get-breakpoint(tablet)) {
+        margin-left: -(get-border());
+      }
     }
 
     @media screen and (min-width: get-breakpoint(tablet)) {
@@ -177,12 +185,19 @@
     text-align: center;
 
     &::before {
-      top: -(get-border());
+      top: -(get-border(thin));
       right: auto;
-      bottom: -(get-border());
-      left: -(get-border());
-      width: get-border();
+      bottom: -(get-border(thin));
+      left: -(get-border(thin));
+      width: get-border(thin);
       height: auto;
+
+      @media screen and (min-width: get-breakpoint(tablet)) {
+        top: -(get-border());
+        bottom: -(get-border());
+        left: -(get-border());
+        width: get-border();
+      }
     }
   }
 
diff --git a/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.scss b/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.scss
index 505f03c..e523833 100644
--- a/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.scss
+++ b/examples/src/content/Droppable/UniqueDropzone/UniqueDropzone.scss
@@ -98,13 +98,29 @@ $grid-columns: 4;
     }
   }
 
-  .BlockContent {
-    @media screen and (min-width: get-breakpoint(tablet)) {
-      min-height: columns() * 1.5;
-    }
+  .BlockLayout--typeFlex {
+    .BlockContent {
+      @media screen and (min-width: get-breakpoint(tablet)) {
+        min-height: rows(3);
+      }
 
-    @media screen and (min-width: get-breakpoint(desktop)) {
-      min-height: columns(2);
+      @media screen and (min-width: get-breakpoint(desktop)) {
+        min-height: rows(4);
+      }
+    }
+  }
+
+  // not quite lining up with the rows correctly...
+  // will likely need to tweak `grid` values
+  .BlockLayout--typeGrid {
+    .BlockContent {
+      @media screen and (min-width: get-breakpoint(tablet)) {
+        min-height: rows(3, false, true);
+      }
+
+      @media screen and (min-width: get-breakpoint(desktop)) {
+        min-height: rows(4, false, true);
+      }
     }
   }
 }
diff --git a/examples/src/content/Plugins/Collidable/props.scss b/examples/src/content/Plugins/Collidable/props.scss
index 031d4ba..cb74ead 100644
--- a/examples/src/content/Plugins/Collidable/props.scss
+++ b/examples/src/content/Plugins/Collidable/props.scss
@@ -9,9 +9,9 @@ $collidable-container-height: 60rem;
 $collidable-container-height-tablet: 64rem;
 $collidable-container-height-desktop: 80rem;
 
-$collidable-block-height: columns() * 1.5;
-$collidable-block-height-tablet: columns(2);
-$collidable-block-height-desktop: columns(3);
+$collidable-block-height: rows(3, true);
+$collidable-block-height-tablet: rows(4);
+$collidable-block-height-desktop: rows(5);
 
 $collidable: (
   container-height: (
diff --git a/examples/src/content/Plugins/Snappable/Snappable.scss b/examples/src/content/Plugins/Snappable/Snappable.scss
index 4c3ccca..bac11bc 100644
--- a/examples/src/content/Plugins/Snappable/Snappable.scss
+++ b/examples/src/content/Plugins/Snappable/Snappable.scss
@@ -10,12 +10,12 @@
     grid-template-columns: repeat(2, 1fr);
 
     @media screen and (min-width: get-breakpoint(tablet)) {
-      grid-template-rows: repeat(4, columns() * 1.5);
+      grid-template-rows: repeat(4, rows(3));
       grid-template-columns: repeat(4, 1fr);
     }
 
     @media screen and (min-width: get-breakpoint(desktop)) {
-      grid-template-rows: repeat(4, columns(2));
+      grid-template-rows: repeat(4, rows(4));
     }
   }
 }
diff --git a/examples/src/content/Plugins/SwapAnimation/SwapAnimation.scss b/examples/src/content/Plugins/SwapAnimation/SwapAnimation.scss
index fd40f3a..0d261cd 100644
--- a/examples/src/content/Plugins/SwapAnimation/SwapAnimation.scss
+++ b/examples/src/content/Plugins/SwapAnimation/SwapAnimation.scss
@@ -24,18 +24,16 @@ $swap-anim-block-name: unquote('Block');
   }
 
   .BlockContent {
-    height: columns();
-
     @media screen and (min-width: get-breakpoint(tablet)) {
-      height: columns() * 1.5;
+      height: rows(3);
     }
 
     @media screen and (min-width: get-breakpoint(desktop)) {
-      height: columns(2);
+      height: rows(4);
     }
 
     @media screen and (min-width: get-breakpoint('1080p', wide)) {
-      height: columns() * 2.5;
+      height: rows(5);
     }
   }
 }
diff --git a/examples/src/content/Sortable/MultipleContainers/MultipleContainers.scss b/examples/src/content/Sortable/MultipleContainers/MultipleContainers.scss
index f859b40..eb71660 100644
--- a/examples/src/content/Sortable/MultipleContainers/MultipleContainers.scss
+++ b/examples/src/content/Sortable/MultipleContainers/MultipleContainers.scss
@@ -3,25 +3,17 @@
 /// MultipleContainers
 ////
 
+@import 'utils/shared/layout';
 @import 'components/StackedList/props';
 
 $grid-columns: 8;
 
 .MultipleContainers {
-  @include centered-width(columns(5));
   display: grid;
   grid-gap: get-layout-length(gutter);
   grid-template-columns: 100%;
   grid-template-areas: 'a' 'b' 'c';
 
-  @media screen and (min-width: get-breakpoint('720p')) {
-    max-width: columns(7);
-  }
-
-  @media screen and (min-width: get-breakpoint()) {
-    max-width: none;
-  }
-
   @media screen and (min-width: get-breakpoint(desktop)) {
     grid-template-columns: repeat($grid-columns, 1fr);
     grid-template-areas:
@@ -29,6 +21,10 @@ $grid-columns: 8;
       'b b b b b c c c';
   }
 
+  @media screen and (min-width: get-breakpoint('1080p', wide)) {
+    @include centered-width(columns(6));
+  }
+
   .Container {
     &:nth-child(1) {
       grid-area: a;
@@ -43,6 +39,13 @@ $grid-columns: 8;
     }
   }
 
+  // resolve slim padding-bottom when single column
+  .StackedListHeader {
+    @media screen and (min-width: get-breakpoint(tablet)) and (max-width: get-breakpoint(desktop) - 1px) {
+      height: auto;
+    }
+  }
+
   .draggable-mirror {
     // prevent wacky horizontal height issue
     max-height: stacked-list-item(base, desktop);
diff --git a/examples/src/content/Sortable/SimpleList/SimpleList.scss b/examples/src/content/Sortable/SimpleList/SimpleList.scss
index 18d48ba..c7d6ff9 100644
--- a/examples/src/content/Sortable/SimpleList/SimpleList.scss
+++ b/examples/src/content/Sortable/SimpleList/SimpleList.scss
@@ -6,8 +6,11 @@
 @import 'utils/shared/layout';
 @import 'components/StackedList/props';
 
+// using an arbitrary width until I have time to fix the `columns` function
+$simple-list-width: 42rem;
+
 .SimpleList {
-  @include centered-width(columns(5));
+  @include centered-width($simple-list-width);
 
   .StackedListWrapper {
     .StackedListHeader {
diff --git a/examples/src/content/Swappable/Flexbox/Flexbox.scss b/examples/src/content/Swappable/Flexbox/Flexbox.scss
index 9f64df3..38456d1 100644
--- a/examples/src/content/Swappable/Flexbox/Flexbox.scss
+++ b/examples/src/content/Swappable/Flexbox/Flexbox.scss
@@ -19,26 +19,26 @@ $flexbox-block-name: unquote('Block');
 
   @include draggable-source-layout($flexbox-block-name, 1, 2, 4, 5, 7) {
     .BlockContent {
-      height: columns();
+      height: rows(2);
     }
   }
 
   @include draggable-source-layout($flexbox-block-name, 3, 6) {
     .BlockContent {
-      height: columns() * 1.5;
+      height: rows(3);
     }
   }
 
   @media screen and (min-width: get-breakpoint(tablet)) {
     @include draggable-source-layout($flexbox-block-name, 1, 2, 4, 5, 7) {
       .BlockContent {
-        height: columns() * 1.5;
+        height: rows(3);
       }
     }
 
     @include draggable-source-layout($flexbox-block-name, 3, 6) {
       .BlockContent {
-        height: columns(2);
+        height: rows(4);
       }
     }
   }
@@ -62,13 +62,13 @@ $flexbox-block-name: unquote('Block');
 
     @include draggable-source-layout($flexbox-block-name, 1, 2, 3, 4, 6, 7) {
       .BlockContent {
-        height: columns(2);
+        height: rows(4);
       }
     }
 
     @include draggable-source-layout($flexbox-block-name, 4, 5) {
       .BlockContent {
-        height: columns(3);
+        height: rows(5);
       }
     }
   }
@@ -76,13 +76,13 @@ $flexbox-block-name: unquote('Block');
   @media screen and (min-width: get-breakpoint('1080p', wide)) {
     @include draggable-source-layout($flexbox-block-name, 1, 2, 3, 4, 6, 7) {
       .BlockContent {
-        height: columns() * 2.5;
+        height: rows(5);
       }
     }
 
     @include draggable-source-layout($flexbox-block-name, 4, 5) {
       .BlockContent {
-        height: columns() * 3.5;
+        height: rows(6);
       }
     }
   }
diff --git a/examples/src/content/Swappable/Floated/Floated.scss b/examples/src/content/Swappable/Floated/Floated.scss
index 44f0ba6..72f1ff2 100644
--- a/examples/src/content/Swappable/Floated/Floated.scss
+++ b/examples/src/content/Swappable/Floated/Floated.scss
@@ -20,13 +20,13 @@ $floated-block-name: unquote('Block');
 
     @include draggable-source-layout($floated-block-name, 3) {
       .BlockContent {
-        height: columns(2);
+        height: rows(4, true);
       }
     }
 
     .draggable--original ~ .Block:nth-child(3) {
       .BlockContent {
-        height: columns();
+        height: rows(2, true);
       }
     }
   }
@@ -42,19 +42,19 @@ $floated-block-name: unquote('Block');
 
     @include draggable-source-layout($floated-block-name, 1, 2, 3, 7, 8) {
       .BlockContent {
-        height: columns() * 1.5;
+        height: rows(3);
       }
     }
 
     @include draggable-source-layout($floated-block-name, 4) {
       .BlockContent {
-        height: columns(3);
+        height: rows(6);
       }
     }
 
     @include draggable-source-layout($floated-block-name, 5, 6) {
       .BlockContent {
-        height: (columns() * 1.5) + (get-layout-length(gutter) / 2);
+        height: rows(3);
       }
     }
   }
@@ -62,7 +62,7 @@ $floated-block-name: unquote('Block');
   @media screen and (min-width: get-breakpoint(desktop)) {
     @include draggable-source-layout($floated-block-name, 1, 2, 3, 7, 8) {
       .BlockContent {
-        height: columns(2);
+        height: rows(4);
       }
     }
   }
@@ -70,19 +70,19 @@ $floated-block-name: unquote('Block');
   @media screen and (min-width: get-breakpoint('1080p', wide)) {
     @include draggable-source-layout($floated-block-name, 4) {
       .BlockContent {
-        height: columns(4);
+        height: rows(8);
       }
     }
 
     @include draggable-source-layout($floated-block-name, 5, 6) {
       .BlockContent {
-        height: columns(2);
+        height: rows(4);
       }
     }
 
     @include draggable-source-layout($floated-block-name, 7, 8) {
       .BlockContent {
-        height: columns() * 2.5;
+        height: rows(5);
       }
     }
   }
diff --git a/examples/src/content/Swappable/GridLayout/GridLayout.scss b/examples/src/content/Swappable/GridLayout/GridLayout.scss
index ca7ce56..0b84fbc 100644
--- a/examples/src/content/Swappable/GridLayout/GridLayout.scss
+++ b/examples/src/content/Swappable/GridLayout/GridLayout.scss
@@ -7,6 +7,7 @@
 
 $grid-area-names: a, b, c, d, e, f, g;
 $grid-rows: 5;
+$grid-rows-tablet: 6;
 $grid-columns: 5;
 $grid-columns-tablet: 8;
 
@@ -22,18 +23,19 @@ $grid-columns-tablet: 8;
       'f f f g g';
 
     @media screen and (min-width: get-breakpoint(tablet)) {
-      grid-template-rows: repeat($grid-rows, columns() * 1.5);
+      grid-template-rows: repeat($grid-rows-tablet, rows(3));
       grid-template-columns: repeat($grid-columns-tablet, 1fr);
       grid-template-areas:
         'a a a a b b b b'
         'a a a a d d d d'
         'c c c c d d d d'
         'e e e e e e e e'
+        'f f f g g g g g'
         'f f f g g g g g';
     }
 
     @media screen and (min-width: get-breakpoint(desktop)) {
-      grid-template-rows: repeat($grid-rows, columns(2));
+      grid-template-rows: repeat($grid-rows-tablet, rows(4));
     }
   }
 
diff --git a/examples/src/styles/examples-app.scss b/examples/src/styles/examples-app.scss
index ec3baa1..c78b3fb 100644
--- a/examples/src/styles/examples-app.scss
+++ b/examples/src/styles/examples-app.scss
@@ -23,6 +23,7 @@
 @import 'components/Heading/Heading';
 @import 'components/Patterns/Patterns';
 @import 'components/Main/Main';
+@import 'components/GridOverlay/GridOverlay';
 @import 'components/PageHeader/PageHeader';
 @import 'components/Handle/DragHandle';
 @import 'components/Handle/NopeHandle';
diff --git a/examples/src/styles/examples-theme/_layout-length.scss b/examples/src/styles/examples-theme/_layout-length.scss
index 3d84a79..350c07d 100644
--- a/examples/src/styles/examples-theme/_layout-length.scss
+++ b/examples/src/styles/examples-theme/_layout-length.scss
@@ -5,8 +5,12 @@
 
 $examples-layout-length-data: (
   base: 1rem,
-  gutter: 0.8rem, // base border-width
+  gutter: (
+    mobile: 0.6rem,
+    base: 0.8rem,
+  ),
   column: 9.3rem,
+  row: 4rem,
   sidebar: 32rem,
   page-header: 64.2rem,
   main-interior: 144rem,
diff --git a/examples/src/styles/utils/shared/functions.scss b/examples/src/styles/utils/shared/functions.scss
index 73084c0..95049be 100644
--- a/examples/src/styles/utils/shared/functions.scss
+++ b/examples/src/styles/utils/shared/functions.scss
@@ -6,12 +6,32 @@
 // Column based max-width layout
 // @param {Number} $count - Number of columns this element should span
 @function columns($count: 1) {
-  @if type-of($count) != number or $count < 1 {
+  $column-count-max: 8;
+
+  @if type-of($count) != number or $count < 1 or $count > $column-count-max {
     @error 'You did not provide a proper column count.';
   }
 
-  $column-width: $count * get-layout-length(column);
+  $percentage: ($count / $column-count-max) * 100%;
   $gutter-width: ($count - 1) * get-layout-length(gutter);
 
-  @return $column-width + $gutter-width;
+  @return $percentage;
+}
+
+// Row based height layout
+// @param {Number} $count - Number of rows this element should span
+// @param {Boolean} $mobile - Use a smaller gutter if on mobile
+// @param {Boolean} $inclusive - For use when the element is meant to begin within a gutter
+@function rows($count: 1, $mobile: false, $inclusive: false) {
+  @if type-of($count) != number or $count < 1 {
+    @error 'You did not provide a proper row count.';
+  }
+
+  $gutter: if($mobile, get-layout-length(gutter, mobile), get-layout-length(gutter));
+  $inclusive-gutters: if($inclusive, $gutter, 0);
+
+  $row-height: $count * get-layout-length(row);
+  $gutter-height: ($count - 1) * $gutter - $inclusive-gutters;
+
+  @return $row-height + $gutter-height;
 }
diff --git a/examples/src/views/templates/document.html b/examples/src/views/templates/document.html
index faeb1ac..09950c4 100644
--- a/examples/src/views/templates/document.html
+++ b/examples/src/views/templates/document.html
@@ -12,5 +12,7 @@
         {% block main %}{% endblock %}
       </div>
     </main>
+
+    <div class="GridOverlay GridOverlay--isHidden"></div>
   </body>
 </html>
diff --git a/examples/yarn.lock b/examples/yarn.lock
index f19b68e..3cdad04 100644
--- a/examples/yarn.lock
+++ b/examples/yarn.lock
@@ -512,7 +512,7 @@ autoprefixer@^7.1.2:
     postcss "^6.0.17"
     postcss-value-parser "^3.2.3"
 
-autoprefixer@^8.0.0, autoprefixer@^8.1.0:
+autoprefixer@^8.0.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-8.1.0.tgz#374cf35be1c0e8fce97408d876f95f66f5cb4641"
   dependencies:
@@ -523,6 +523,17 @@ autoprefixer@^8.0.0, autoprefixer@^8.1.0:
     postcss "^6.0.19"
     postcss-value-parser "^3.2.3"
 
+autoprefixer@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-8.2.0.tgz#1e49b611b31a5259b86b7a6b2b1b8faf091abe2a"
+  dependencies:
+    browserslist "^3.2.0"
+    caniuse-lite "^1.0.30000817"
+    normalize-range "^0.1.2"
+    num2fraction "^1.2.2"
+    postcss "^6.0.20"
+    postcss-value-parser "^3.2.3"
+
 aws-sign2@~0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/aws-sign2/-/aws-sign2-0.6.0.tgz#14342dd38dbcc94d0e5b87d763cd63612c0e794f"
@@ -573,7 +584,7 @@ babel-core@^6.26.0:
     slash "^1.0.0"
     source-map "^0.5.6"
 
-babel-eslint@^8.2.1:
+babel-eslint@^8.2.2:
   version "8.2.2"
   resolved "http://registry.npmjs.org/babel-eslint/-/babel-eslint-8.2.2.tgz#1102273354c6f0b29b4ea28a65f97d122296b68b"
   dependencies:
@@ -1485,7 +1496,7 @@ browserslist@^2.0.0, browserslist@^2.1.2, browserslist@^2.11.3:
     caniuse-lite "^1.0.30000792"
     electron-to-chromium "^1.3.30"
 
-browserslist@^3.1.1:
+browserslist@^3.1.1, browserslist@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.0.tgz#3d4a99710c12101e4567c9aeedade49c958cb883"
   dependencies:
@@ -1644,6 +1655,10 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, can
   version "1.0.30000815"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000815.tgz#3a4258e6850362185adb11b0d754a48402d35bf6"
 
+caniuse-lite@^1.0.30000817:
+  version "1.0.30000817"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000817.tgz#e993c380eb4bfe76a2aed4223f841c02d6e0d832"
+
 capture-stack-trace@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.0.tgz#4a6fa07399c26bba47f0b2496b4d0fb408c5550d"
@@ -2814,7 +2829,7 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
-eslint-config-prettier@^2.9.0:
+eslint-config-prettier@2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-2.9.0.tgz#5ecd65174d486c22dff389fe036febf502d468a3"
   dependencies:
@@ -2827,14 +2842,14 @@ eslint-import-resolver-node@^0.3.1:
     debug "^2.6.9"
     resolve "^1.5.0"
 
-eslint-module-utils@^2.1.1:
+eslint-module-utils@2.1.1, eslint-module-utils@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.1.1.tgz#abaec824177613b8a95b299639e1b6facf473449"
   dependencies:
     debug "^2.6.8"
     pkg-dir "^1.0.0"
 
-eslint-plugin-ava@^4.4.0:
+eslint-plugin-ava@4.5.1:
   version "4.5.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-ava/-/eslint-plugin-ava-4.5.1.tgz#a51b89a306dfd5b2f91185e283837aeade6f9e5c"
   dependencies:
@@ -2847,21 +2862,21 @@ eslint-plugin-ava@^4.4.0:
     multimatch "^2.1.0"
     pkg-up "^2.0.0"
 
-eslint-plugin-babel@^4.1.2:
+eslint-plugin-babel@4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-babel/-/eslint-plugin-babel-4.1.2.tgz#79202a0e35757dd92780919b2336f1fa2fe53c1e"
 
-eslint-plugin-chai-expect@^1.1.1:
+eslint-plugin-chai-expect@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-chai-expect/-/eslint-plugin-chai-expect-1.1.1.tgz#cd640b8b38cf6c3abcc378673b7b173b99ddc70a"
 
-eslint-plugin-flowtype@^2.41.0:
-  version "2.46.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.46.1.tgz#c4f81d580cd89c82bc3a85a1ccf4ae3a915143a4"
+eslint-plugin-flowtype@2.41.0:
+  version "2.41.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.41.0.tgz#fd5221c60ba917c059d7ef69686a99cca09fd871"
   dependencies:
     lodash "^4.15.0"
 
-eslint-plugin-import@^2.8.0:
+eslint-plugin-import@2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.9.0.tgz#26002efbfca5989b7288ac047508bd24f217b169"
   dependencies:
@@ -2876,11 +2891,11 @@ eslint-plugin-import@^2.8.0:
     minimatch "^3.0.3"
     read-pkg-up "^2.0.0"
 
-eslint-plugin-jest@^21.5.0:
-  version "21.15.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-21.15.0.tgz#645a3f560d3e61d99611b215adc80b4f31e6d896"
+eslint-plugin-jest@21.14.1:
+  version "21.14.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-jest/-/eslint-plugin-jest-21.14.1.tgz#8961ec94b2c7912a8ad09112b35aadc326d8d38e"
 
-eslint-plugin-jsx-a11y@^6.0.3:
+eslint-plugin-jsx-a11y@6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.0.3.tgz#54583d1ae442483162e040e13cc31865465100e5"
   dependencies:
@@ -2892,39 +2907,39 @@ eslint-plugin-jsx-a11y@^6.0.3:
     emoji-regex "^6.1.0"
     jsx-ast-utils "^2.0.0"
 
-eslint-plugin-lodash@^2.5.0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-lodash/-/eslint-plugin-lodash-2.7.0.tgz#66cdc1070b7c9d4b749368b54820886380a14c35"
+eslint-plugin-lodash@2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-lodash/-/eslint-plugin-lodash-2.6.1.tgz#a56f41d318fecf1ec69aae9851df0d37242ab168"
   dependencies:
     lodash "~4.17.0"
 
-eslint-plugin-mocha@^4.11.0:
-  version "4.12.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-mocha/-/eslint-plugin-mocha-4.12.1.tgz#dbacc543b178b4536ec5b19d7f8e8864d85404bf"
+eslint-plugin-mocha@4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-mocha/-/eslint-plugin-mocha-4.11.0.tgz#91193a2f55e20a5e35974054a0089d30198ee578"
   dependencies:
-    ramda "^0.25.0"
+    ramda "^0.24.1"
 
-eslint-plugin-node@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-node/-/eslint-plugin-node-5.2.1.tgz#80df3253c4d7901045ec87fa660a284e32bdca29"
+eslint-plugin-node@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-node/-/eslint-plugin-node-6.0.1.tgz#bf19642298064379315d7a4b2a75937376fa05e4"
   dependencies:
     ignore "^3.3.6"
     minimatch "^3.0.4"
     resolve "^1.3.3"
-    semver "5.3.0"
+    semver "^5.4.1"
 
-eslint-plugin-prettier@^2.4.0, eslint-plugin-prettier@^2.6.0:
+eslint-plugin-prettier@2.6.0, eslint-plugin-prettier@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.6.0.tgz#33e4e228bdb06142d03c560ce04ec23f6c767dd7"
   dependencies:
     fast-diff "^1.1.1"
     jest-docblock "^21.0.0"
 
-eslint-plugin-promise@^3.6.0:
+eslint-plugin-promise@3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.7.0.tgz#f4bde5c2c77cdd69557a8f69a24d1ad3cfc9e67e"
 
-eslint-plugin-react@^7.5.1:
+eslint-plugin-react@7.7.0:
   version "7.7.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.7.0.tgz#f606c719dbd8a1a2b3d25c16299813878cca0160"
   dependencies:
@@ -2933,41 +2948,41 @@ eslint-plugin-react@^7.5.1:
     jsx-ast-utils "^2.0.1"
     prop-types "^15.6.0"
 
-eslint-plugin-shopify@^19.0.0:
-  version "19.0.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-shopify/-/eslint-plugin-shopify-19.0.1.tgz#0ee62fba33fdfd8ab306fe4c7bc7350fcf6dbef2"
+eslint-plugin-shopify@^20.0.0:
+  version "20.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-shopify/-/eslint-plugin-shopify-20.0.0.tgz#254da8f5123a20c076187ce4d8933d9092dedf31"
   dependencies:
-    babel-eslint "^8.2.1"
-    eslint-config-prettier "^2.9.0"
-    eslint-module-utils "^2.1.1"
-    eslint-plugin-ava "^4.4.0"
-    eslint-plugin-babel "^4.1.2"
-    eslint-plugin-chai-expect "^1.1.1"
-    eslint-plugin-flowtype "^2.41.0"
-    eslint-plugin-import "^2.8.0"
-    eslint-plugin-jest "^21.5.0"
-    eslint-plugin-jsx-a11y "^6.0.3"
-    eslint-plugin-lodash "^2.5.0"
-    eslint-plugin-mocha "^4.11.0"
-    eslint-plugin-node "^5.2.1"
-    eslint-plugin-prettier "^2.4.0"
-    eslint-plugin-promise "^3.6.0"
-    eslint-plugin-react "^7.5.1"
-    eslint-plugin-sort-class-members "^1.3.0"
-    eslint-plugin-typescript "^0.8.1"
+    babel-eslint "^8.2.2"
+    eslint-config-prettier "2.9.0"
+    eslint-module-utils "2.1.1"
+    eslint-plugin-ava "4.5.1"
+    eslint-plugin-babel "4.1.2"
+    eslint-plugin-chai-expect "1.1.1"
+    eslint-plugin-flowtype "2.41.0"
+    eslint-plugin-import "2.9.0"
+    eslint-plugin-jest "21.14.1"
+    eslint-plugin-jsx-a11y "6.0.3"
+    eslint-plugin-lodash "2.6.1"
+    eslint-plugin-mocha "4.11.0"
+    eslint-plugin-node "6.0.1"
+    eslint-plugin-prettier "2.6.0"
+    eslint-plugin-promise "3.7.0"
+    eslint-plugin-react "7.7.0"
+    eslint-plugin-sort-class-members "1.3.0"
+    eslint-plugin-typescript "0.10.0"
     merge "^1.2.0"
     pkg-dir "^2.0.0"
-    typescript-eslint-parser "^11.0.0"
+    typescript-eslint-parser "14.0.0"
   optionalDependencies:
-    prettier "<2.0 >= 1.9.2"
+    prettier "^1.11.1"
 
-eslint-plugin-sort-class-members@^1.3.0:
+eslint-plugin-sort-class-members@1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-sort-class-members/-/eslint-plugin-sort-class-members-1.3.0.tgz#8a3db9afb84351f06fe3d1622abcafa1e5781694"
 
-eslint-plugin-typescript@^0.8.1:
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-typescript/-/eslint-plugin-typescript-0.8.1.tgz#e5b2d18e744a04528eac58b099fe1032c4d744ff"
+eslint-plugin-typescript@0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-typescript/-/eslint-plugin-typescript-0.10.0.tgz#009a8fcaf0ec7bf68f6fb71576df0d84ebd0b114"
   dependencies:
     requireindex "~1.1.0"
 
@@ -2982,9 +2997,9 @@ eslint-visitor-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
 
-eslint@^4.19.0:
-  version "4.19.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.19.0.tgz#9e900efb5506812ac374557034ef6f5c3642fc4c"
+eslint@^4.19.1:
+  version "4.19.1"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.19.1.tgz#32d1d653e1d90408854bfb296f076ec7e186a300"
   dependencies:
     ajv "^5.3.0"
     babel-code-frame "^6.22.0"
@@ -6635,7 +6650,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.0, postcss@^6.0.13, postcss@^6.0.14, postcss@^6.0.16, postcss@^6.0.17, postcss@^6.0.19, postcss@^6.0.6, postcss@^6.0.8:
+postcss@^6.0.0, postcss@^6.0.13, postcss@^6.0.14, postcss@^6.0.16, postcss@^6.0.17, postcss@^6.0.19, postcss@^6.0.20, postcss@^6.0.6, postcss@^6.0.8:
   version "6.0.20"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.20.tgz#686107e743a12d5530cb68438c590d5b2bf72c3c"
   dependencies:
@@ -6697,7 +6712,7 @@ prettier-stylelint@^0.4.2:
     tempy "^0.2.1"
     update-notifier "^2.2.0"
 
-"prettier@<2.0 >= 1.9.2", prettier@^1.11.1, prettier@^1.7.0, prettier@^1.8.2:
+prettier@^1.11.1, prettier@^1.7.0, prettier@^1.8.2:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.11.1.tgz#61e43fc4cd44e68f2b0dfc2c38cd4bb0fccdcc75"
 
@@ -6834,9 +6849,9 @@ quick-lru@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
 
-ramda@^0.25.0:
-  version "0.25.0"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.25.0.tgz#8fdf68231cffa90bc2f9460390a0cb74a29b29a9"
+ramda@^0.24.1:
+  version "0.24.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857"
 
 randomatic@^1.1.3:
   version "1.1.7"
@@ -7508,18 +7523,14 @@ semver-greatest-satisfied-range@^1.1.0:
   dependencies:
     sver-compat "^1.5.0"
 
-"semver@2 || 3 || 4 || 5", semver@^5.0.3, semver@^5.1.0, semver@^5.3.0:
+"semver@2 || 3 || 4 || 5", semver@5.5.0, semver@^5.0.3, semver@^5.1.0, semver@^5.3.0, semver@^5.4.1:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
 
-semver@5.3.0, semver@~5.3.0:
+semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
 
-semver@5.4.1:
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
-
 send@0.15.2:
   version "0.15.2"
   resolved "https://registry.yarnpkg.com/send/-/send-0.15.2.tgz#f91fab4403bcf87e716f70ceb5db2f578bdc17d6"
@@ -8493,12 +8504,12 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-typescript-eslint-parser@^11.0.0:
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/typescript-eslint-parser/-/typescript-eslint-parser-11.0.0.tgz#37dba6a0130dd307504aa4b4b21b0d3dc7d4e9f2"
+typescript-eslint-parser@14.0.0:
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/typescript-eslint-parser/-/typescript-eslint-parser-14.0.0.tgz#c90a8f541c1d96e5c55e2807c61d154e788520f9"
   dependencies:
     lodash.unescape "4.0.1"
-    semver "5.4.1"
+    semver "5.5.0"
 
 ua-parser-js@0.7.12:
   version "0.7.12"
@@ -8907,9 +8918,9 @@ webpack-sources@^1.0.1, webpack-sources@^1.1.0:
     source-list-map "^2.0.0"
     source-map "~0.6.1"
 
-webpack@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.1.1.tgz#44e4d6a869dd36fdfc0b227f9bd865a4bccfd81c"
+webpack@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.2.0.tgz#a4f80807651a0e611bb09609600dc266262efcc1"
   dependencies:
     acorn "^5.0.0"
     acorn-dynamic-import "^3.0.0"