From ca2b52780c47cfa8deff6fdc417b82f1f2e99010 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Wed, 2 Aug 2017 12:30:40 -0400
Subject: [PATCH] Remove "container" concept, remove grid gutters

---
 src/utilities/grid.less    | 59 ++++++--------------------------------
 src/utilities/spacing.less |  6 ++--
 2 files changed, 12 insertions(+), 53 deletions(-)

diff --git a/src/utilities/grid.less b/src/utilities/grid.less
index 97ebf12b3..56f40f745 100644
--- a/src/utilities/grid.less
+++ b/src/utilities/grid.less
@@ -1,56 +1,17 @@
-// Use Bootstrap 4 breakpoints as a starting point
-@screen-xs: 420px; // Not used for grid, just changing font size for tiny fucking iPhones
-@screen-sm: 576px;
-@screen-md: 768px;
-@screen-lg: 992px;
-@screen-xl: 1200px;
-
 @screens:
-  sm 540px 576px,
-  md 720px 768px,
-  lg 960px 992px,
-  xl 1140px 1200px;
+  sm 576px,
+  md 768px,
+  lg 992px,
+  xl 1200px;
 
-// From flexboxgrid.com
-@gutter-width: 2rem;
-@half-gutter-width: @gutter-width * 0.5;
-@gutter-compensation: @half-gutter-width * -1;
-@outer-margin: @half-gutter-width;
 @grid-column-count: 12;
 
-.container-fluid, .container {
-  width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-  padding-right: @outer-margin;
-  padding-left: @outer-margin;
-}
-
 .row {
   box-sizing: border-box;
   display: flex;
   flex: 0 1 auto;
   flex-direction: row;
   flex-wrap: wrap;
-  margin-right: @gutter-compensation;
-  margin-left: @gutter-compensation;
-}
-
-.row.reverse {
-  flex-direction: row-reverse;
-}
-
-.col {
-  box-sizing: border-box;
-  flex: 0 0 auto;
-  padding-right: @half-gutter-width;
-  padding-left: @half-gutter-width;
-  flex-basis: 100%;
-  max-width: 100%;
-}
-
-.col.reverse {
-  flex-direction: column-reverse;
 }
 
 .generate-grid-columns(@prefix; @i: 1) when (@i <= @grid-column-count) {
@@ -67,16 +28,15 @@
   .generate-grid-columns(@prefix; @i + 1);
 }
 
-.generate-responsive-grid(@screen, @min-width, @container-width) {
+.generate-responsive-grid(@screen, @min-width) {
   @prefix: ~"@{screen}\:";
 
   @media (min-width: @min-width) {
-    .container { max-width: @container-width; }
-
-    .@{prefix}col-auto {
+    .@{prefix}col {
       flex-grow: 1;
       flex-basis: 0;
       max-width: 100%;
+      min-width: 0;
     }
 
     .@{prefix}col-first {
@@ -94,10 +54,9 @@
 .generate-responsive-grids(@i: 1) when (@i <= length(@screens)) {
   @screen: extract(@screens, @i);
   @name: extract(@screen, 1);
-  @container-width: extract(@screen, 2);
-  @screen-width: extract(@screen, 3);
+  @screen-width: extract(@screen, 2);
 
-  .generate-responsive-grid(@name, @screen-width, @container-width);
+  .generate-responsive-grid(@name, @screen-width);
   .generate-responsive-grids(@i + 1);
 }
 
diff --git a/src/utilities/spacing.less b/src/utilities/spacing.less
index 9bebdf709..7a9f147ad 100644
--- a/src/utilities/spacing.less
+++ b/src/utilities/spacing.less
@@ -95,7 +95,7 @@
 .generate-responsive-padding-utilities(@i: 1) when (@i <= length(@screens)) {
   @screen: extract(@screens, @i);
   @name: extract(@screen, 1);
-  @screen-width: extract(@screen, 3);
+  @screen-width: extract(@screen, 2);
 
   .generate-screen-padding-utilities(@name, @screen-width);
   .generate-responsive-padding-utilities(@i + 1);
@@ -162,7 +162,7 @@
 .generate-responsive-margin-utilities(@i: 1) when (@i <= length(@screens)) {
   @screen: extract(@screens, @i);
   @name: extract(@screen, 1);
-  @screen-width: extract(@screen, 3);
+  @screen-width: extract(@screen, 2);
 
   .generate-screen-margin-utilities(@name, @screen-width);
 
@@ -235,7 +235,7 @@
 .generate-responsive-pull-utilities(@i: 1) when (@i <= length(@screens)) {
   @screen: extract(@screens, @i);
   @name: extract(@screen, 1);
-  @screen-width: extract(@screen, 3);
+  @screen-width: extract(@screen, 2);
 
   .generate-screen-pull-utilities(@name, @screen-width);
   .generate-responsive-pull-utilities(@i + 1);