feat(scss): Detach bleed and break classes from being grid modifiers for more flexibility

Author: seejamescode

examples/bootstrap/css-gridish/README.md

@@ -64,12 +64,13 @@ If you are new to CSS Grid, please try [learning the basics](https://www.google.
 | ----------------------------------------- | ------------------------------------------------------------------------------------------ |
 | `.bootstrap-container`                          | Container element of whole page for proper margin and max-width (can be used on body tag ) |
 | `.bootstrap-container--[left, right]`            | Align the container element to the left or right side                                      |
+| `.bootstrap-container__bleed--[sm]`                         | Extend the background color of a container child into the container margin on both sides starting at a specific breakpoint        |
+| `.bootstrap-container__bleed--[sm]--[left, right]`           | Extend the background color of a grid into the container margin on one side at a specific breakpoint           |
+| `.bootstrap-container__break--[sm]`                         | Child of container element should ignore grid’s margin at a specific breakpoint. Not supported for legacy.        |
+| `.bootstrap-container__break--[sm]--[left, right]`           | Child of container element should ignore grid’s margin on one side at a specific breakpoint. Not supported for legacy.                              |
 | `.bootstrap-grid`                               | Use anytime you want to apply CSS Grid Layout, including as embedded subgrids              |
-| `.bootstrap-grid--bleed`                         | To extend the background color of a grid into the margin of the body on both sides         |
-| `.bootstrap-grid--bleed--[left, right]`           | To extend the background color of a grid into the margin of the body on one side           |
 | `.bootstrap-grid--fixed-columns`                         | Switch grid’s column widths to fixed instead of fluid                                       |
 | `.bootstrap-grid--fluid-rows`                         | Switch grid’s row height to match the width of a column                                        |
-| `.bootstrap-grid__break--[left, right]`           | Direct child of container element should ignore grid’s margin. Not supported for legacy.                              |
 | `.bootstrap-padding`                            | Add one unit of padding to element on all sides                                            |
 | `.bootstrap-padding--[bottom, left, right, top]` | Add one unit of padding to element on one side                                             |
 | `.bootstrap-padding--[horizontal, vertical]`     | Add one unit of padding to element on two sides                                            |

examples/bootstrap/css-gridish/bootstrap-grid.sketch

@@ -270,53 +270,28 @@ body {
   height: 100vw;
   max-height: 100rem; }
 
-.bootstrap-container {
-  padding-left: 0;
-  padding-right: 0; }
-
-.bootstrap-grid.bootstrap-grid--bleed {
-  margin-left: -0;
-  margin-right: -0;
-  padding-left: 0;
-  padding-right: 0;
-  width: 100vw; }
-
-.bootstrap-grid--bleed--left {
-  padding-left: 0;
-  margin-left: -0; }
-
-.bootstrap-grid--bleed--right {
-  padding-right: 0;
-  margin-right: -0; }
-
-@supports (display: grid) {
-  .bootstrap-grid__break--left {
-    margin-left: -0; }
-  .bootstrap-grid__break--right {
-    margin-right: -0; } }
-
 .bootstrap-padding {
-  padding: calc(30px / 2); }
+  padding: 15px; }
 
 .bootstrap-padding--bottom {
-  padding-bottom: calc(30px / 2); }
+  padding-bottom: 15px; }
 
 .bootstrap-padding--left {
-  padding-left: calc(30px / 2); }
+  padding-left: 15px; }
 
 .bootstrap-padding--right {
-  padding-right: calc(30px / 2); }
+  padding-right: 15px; }
 
 .bootstrap-padding--top {
-  padding-top: calc(30px / 2); }
+  padding-top: 15px; }
 
 .bootstrap-padding--horizontal {
-  padding-left: calc(30px / 2);
-  padding-right: calc(30px / 2); }
+  padding-left: 15px;
+  padding-right: 15px; }
 
 .bootstrap-padding--vertical {
-  padding-bottom: calc(30px / 2);
-  padding-top: calc(30px / 2); }
+  padding-bottom: 15px;
+  padding-top: 15px; }
 
 @supports (display: grid) {
   .bootstrap-grid {
@@ -368,42 +343,22 @@ body {
     display: none; }
   [class*="bootstrap-grid__col--"] {
     min-width: 0; }
-  .bootstrap-container {
-    padding-left: 0;
-    padding-right: 0; }
-  .bootstrap-grid.bootstrap-grid--bleed {
-    margin-left: calc((100vw - 100rem) / -2 - 0);
-    margin-right: calc((100vw - 100rem) / -2 - 0);
-    padding-left: calc((100vw - 100rem) / -2 * -1 + 0);
-    padding-right: calc((100vw - 100rem) / -2 * -1 + 0);
-    width: 100vw; }
-  .bootstrap-grid--bleed--left {
-    padding-left: 0;
-    margin-left: -0; }
-  .bootstrap-grid--bleed--right {
-    padding-right: 0;
-    margin-right: -0; }
-  @supports (display: grid) {
-    .bootstrap-grid__break--left {
-      margin-left: -0; }
-    .bootstrap-grid__break--right {
-      margin-right: -0; } }
   .bootstrap-padding {
-    padding: calc(30px / 2); }
+    padding: 15px; }
   .bootstrap-padding--bottom {
-    padding-bottom: calc(30px / 2); }
+    padding-bottom: 15px; }
   .bootstrap-padding--left {
-    padding-left: calc(30px / 2); }
+    padding-left: 15px; }
   .bootstrap-padding--right {
-    padding-right: calc(30px / 2); }
+    padding-right: 15px; }
   .bootstrap-padding--top {
-    padding-top: calc(30px / 2); }
+    padding-top: 15px; }
   .bootstrap-padding--horizontal {
-    padding-left: calc(30px / 2);
-    padding-right: calc(30px / 2); }
+    padding-left: 15px;
+    padding-right: 15px; }
   .bootstrap-padding--vertical {
-    padding-bottom: calc(30px / 2);
-    padding-top: calc(30px / 2); }
+    padding-bottom: 15px;
+    padding-top: 15px; }
   @supports (display: grid) {
     .bootstrap-grid {
       grid-template-columns: repeat(auto-fill, 8.33333rem); }