From 413810cf69c7d43a422617589412e4c575fb67bb Mon Sep 17 00:00:00 2001
From: jlukic <jacklukic@gmail.com>
Date: Wed, 25 Mar 2015 11:49:11 -0400
Subject: [PATCH] Add grid container coupling

---
 src/definitions/elements/container.less       | 26 ++++++++++++++-----
 src/themes/default/collections/grid.variables |  3 +--
 .../default/elements/container.variables      | 11 +++++---
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/definitions/elements/container.less b/src/definitions/elements/container.less
index 6aca27dfe..e9225edaf 100644
--- a/src/definitions/elements/container.less
+++ b/src/definitions/elements/container.less
@@ -36,6 +36,9 @@
     margin-left: @mobileGutter !important;
     margin-right: @mobileGutter !important;
   }
+  .ui.grid.container {
+    width: @mobileGridWidth;
+  }
 }
 @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
   .ui.container {
@@ -43,19 +46,28 @@
     margin-left: @tabletGutter !important;
     margin-right: @tabletGutter !important;
   }
+  .ui.grid.container {
+    width: @tabletGridWidth;
+  }
 }
-@media only screen and (min-width: @smallComputerBreakpoint) and (max-width: @largeMonitorBreakpoint) {
+@media only screen and (min-width: @smallMonitorBreakpoint) and (max-width: @largeMonitorBreakpoint) {
   .ui.container {
-    width: @smallComputerWidth;
-    margin-left: @smallComputerGutter !important;
-    margin-right: @smallComputerGutter !important;
+    width: @smallMonitorWidth;
+    margin-left: @smallMonitorGutter !important;
+    margin-right: @smallMonitorGutter !important;
+  }
+  .ui.grid.container {
+    width: @smallMonitorGridWidth;
   }
 }
 @media only screen and (min-width: @largeMonitorBreakpoint) {
   .ui.container {
-    width: @largeMWidth;
-    margin-left: @largeMGutter !important;
-    margin-right: @largeMGutter !important;
+    width: @largeMonitorWidth;
+    margin-left: @largeMonitorGutter !important;
+    margin-right: @largeMonitorGutter !important;
+  }
+  .ui.grid.container {
+    width: @largeMonitorGridWidth;
   }
 }
 
diff --git a/src/themes/default/collections/grid.variables b/src/themes/default/collections/grid.variables
index 4efa9a3a0..8273d2c50 100644
--- a/src/themes/default/collections/grid.variables
+++ b/src/themes/default/collections/grid.variables
@@ -37,7 +37,7 @@
 
 @tabletWidth: auto;
 @tabletMargin: 0em;
-@tabletGutter: 8%;
+@tabletGutter: 2em;
 
 @computerWidth: auto;
 @computerMargin: 0em;
@@ -51,7 +51,6 @@
 @widescreenMargin: 0em;
 @widescreenMonitorGutter: 23%;
 
-
 /*--------------
      Relaxed
 ---------------*/
diff --git a/src/themes/default/elements/container.variables b/src/themes/default/elements/container.variables
index 3009bf460..2a95d0dbf 100644
--- a/src/themes/default/elements/container.variables
+++ b/src/themes/default/elements/container.variables
@@ -21,11 +21,16 @@
 @smallMonitorWidth: 960px;
 @smallMonitorGutter: auto;
 
-@largeMonitorWidth: 1120px;
-@largeMonitorBreakpoint: 1148px;
+@largeMonitorWidth: 1200px;
+@largeMonitorBreakpoint: 1228px;
 @largeMonitorGutter: auto;
 
-/* Adjust breakpoints to match fixed width */
+/* Coupling (Add Negative Margin to container size) */
+@gridGutterWidth: 2em;
+@mobileGridWidth: @mobileWidth;
+@tabletGridWidth: ~"calc("@tabletWidth~" + "@gridGutterWidth~")";
+@smallMonitorGridWidth: ~"calc("@smallMonitorWidth~" + "@gridGutterWidth~")";
+@largeMonitorGridWidth: ~"calc("@largeMonitorWidth~" + "@gridGutterWidth~")";
 
 /*-------------------
        Types