Added in cspacers as a container spacer measurement. Used this measurement as part of general grid streamlines/updates.

Author: tksheppard

default.ascx

@@ -22,15 +22,15 @@
 
   <div class="container">
     <div class="row">
-      <div id="DoublePaneOneOne" class="col-md-6 pr-5" runat="server"></div>
-      <div id="DoublePaneOneTwo" class="col-md-6 bg-light-grey" runat="server"></div>
+      <div id="DoublePaneOneOne" class="col-md-6 cpr-5" runat="server"></div>
+      <div id="DoublePaneOneTwo" class="col-md-6 bg-light-grey cp-5" runat="server"></div>
     </div>
   </div>   
 
   <div class="container-fluid bg-tertiary">
     <div class="container">
       <div class="row align-items-center">
-        <div id="FullWidthBGDoublePaneOne" class="col-md-6" runat="server"></div>
+        <div id="FullWidthBGDoublePaneOne" class="col-md-6 cpy-5" runat="server"></div>
         <div id="FullWidthBGDoublePaneTwo" class="col-md-6" runat="server"></div>
       </div>
     </div>

src/scss/components/_grid.scss

@@ -1,43 +1,28 @@
-// Bootstrap Grid Changes
-
-/* Changes the default gutter size */
-$xgutter:2rem;
-$ygutter:4rem;
-
-// Sets gutters on all cols
-[class^='col-'] {
-  padding-left:$xgutter;
-  padding-right:$xgutter;
-  margin-top:$ygutter;
-  margin-bottom:$ygutter;
 }
 
-@each $breakpoint in $breakpoints {
-  $size: nth($breakpoint, 1);
-  $width: nth($breakpoint, 2);
+// Pulls information for each breakpoint
+@each $size, $width in $breakpoints {
 
-  // Upon collapse of cols at the appropriate breakpoint, adds a margin
+  // Upon collapse of cols at the appropriate breakpoint:
   @include mq-max-width($width) {
+
+    // adds a margin to the top cols that come after cols
     [class^='col-#{$size}'] + [class^='col-#{$size}'] {
-      margin-top:0;
-      margin-bottom:$ygutter;
+      margin-top:($cspacer * 2); 
     }
-    .container { 
-      max-width:1200px; 
+
+    // adds padding to the child div of the col to even spacing
+    .container [class^="col-#{$size}"] > div {
+      padding-left:$cspacer !important;
+      padding-right:$cspacer !important;
     }
+
+    // removes padding for container within fluid container
     .container-fluid .container {
       padding:0;
+    }
 
-      .row {
-        margin-left:0;
-        margin-right:0;
       }
     }
-    // Adds the gutter to the left and right when collapsed
-    [class^='col-'] {       
-      padding-left:$xgutter;
-      padding-right:$xgutter;
-    }
   }
-}
-
+}

src/scss/components/_helpers.scss

@@ -1,9 +1,9 @@
-/* Position */
+// position 
 .pos-relative{
     position: relative
 }
 
-/* Cover Links */
+// cover links
 .cover-link {
 	position:absolute;
 	top:0;
@@ -13,10 +13,10 @@
 	z-index:100;
 }
 
-/* BG Color Helpers */
+// bg colors
 [class*="bg-"] {
   color:white;
-    
+
   &[class*="-primary"] {
     background-color:$primary-color !important;
   }
@@ -33,4 +33,28 @@
   pre {
     background:white;
   }
+}
+
+// padding on div below contentpane
+// usage: adding cpy-4 class to a div would add padding to top and bottom of the div underneath it
+// mostly useful for cols with a bg color
+@each $size, $length in $cspacers {
+
+  .cp-#{$size} > div { padding: $length !important; }
+  .cpt-#{$size} > div,
+  .cpy-#{$size} > div {
+    padding-top: $length !important;
+  }
+  .cpr-#{$size} > div,
+  .cpx-#{$size} > div {
+    padding-right: $length !important;
+  }
+  .cpb-#{$size} > div,
+  .cpy-#{$size} > div {
+    padding-bottom: $length !important;
+  }
+  .cpl-#{$size} > div,
+  .cpx-#{$size} > div {
+    padding-left: $length !important;
+  }
 }

src/scss/variables/_breakpoints.scss

@@ -1,3 +1,4 @@
+// A copy of the bootstrap 4 breakpoints
 $breakpoints: (
   "sm":576,
   "md":768,

src/scss/variables/_spacing.scss

@@ -0,0 +1,14 @@
+// Spacing for container padding helpers
+
+$cspacer: 1rem !default;
+$cspacers: () !default;
+$cspacers: map-merge((
+  0: 0,
+  1: ($cspacer * .25),
+  2: ($cspacer * .5),
+  3: $cspacer,
+  4: ($cspacer * 1.5),
+  5: ($cspacer * 2),
+  6: ($cspacer * 3),
+  7: ($cspacer * 4),
+), $cspacers);

src/scss/variables/_variables.scss

@@ -1,3 +1,4 @@
-@import 'breakpoints';
 @import 'colors';
+@import 'breakpoints';
+@import 'spacing';
 @import 'type';