feat(scss): add modern css grid support to legacy column classnames for easier transition

Author: seejamescode

examples/bootstrap/css-gridish/README.md

@@ -73,9 +73,14 @@ If you are new to CSS Grid, please try [learning the basics](https://www.google.
 | `.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                                            |
+| `.bootstrap-grid__col--sm--[1-12]`                          | Set the width out of 12 columns for an item in the grid starting at the sm breakpoint |
+| `.bootstrap-grid__col--[sm]--0`                          | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified |
+| `.bootstrap-grid__col--[sm]--0--only`                          | Do not display item only at specific breakpoint |
 
 By default, the grid code uses fluid columns and fixed rows. You can switch both aspects with `.bootstrap-grid--fixed-columns` and `.bootstrap-grid--fluid-rows`.
 
+If you follow the instructions above for custom breakpoints, all of these legacy classes will generate with a version for each custom breakpoint too. For example, adding the custom breakpoint of `whateversize` will create `.bootstrap-grid__col--whateversize--1`. Since that custom breakpoint is right after the previous breakpoint, it will have the same amount of columns and min-height.
+
 ### Legacy
 
 The following classes are only necessary if supporting browsers that do not have [CSS Grid Layout support](https://developer.mozilla.org/en-US/docs/Web/CSS/grid#Browser_compatibility). The previous classes are also necessary for modern browsers.
@@ -84,17 +89,12 @@ Please remember that the classes below have no affect on browsers that have [CSS
 
 | Class Name                                | Purpose                                                                                    |
 | ----------------------------------------- | ------------------------------------------------------------------------------------------ |
-| `.bootstrap-grid__col--sm--[1-12]`                          | Set the width out of 12 columns for an item in the grid starting at the sm breakpoint |
-| `.bootstrap-grid__col--[sm]--0`                          | Do not display item at a specific breakpoint, but display at the next breakpoint with columns specified |
-| `.bootstrap-grid__col--[sm]--0--only`                          | Do not display item only at specific breakpoint |
 | `.bootstrap-grid__height-fixed--[sm]--[1-30]`                          | Set the min-height based on an interval of 15px for an item starting at the breakpoint specified |
 | `.bootstrap-grid__height-fluid--sm--[1-12]`                          | Set the min-height on the width of 1-12 columns for an item starting at the sm breakpoint |
 | `.bootstrap-grid__height--[sm]--0`                          | Reset the min-height for an item starting at the specified breakpoint |
 
 The legacy `.bootstrap-grid__height-fixed--[sm]--[1-30]` class follows the numbering system as described in our height variables](#Fixed Height).
 
-If you follow the instructions above for custom breakpoints, all of these legacy classes will generate with a version for each custom breakpoint too. For example, adding the custom breakpoint of `35` will create `.bootstrap-grid__col--35--1` and `.bootstrap-grid__height-fixed--35--1`. Since that custom breakpoint is right after the previous breakpoint, it will have the same amount of columns and min-height.
-
 ## Variables
 
 If your project is comfortable with the browser support for

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

@@ -30,7 +30,8 @@ body {
   flex-wrap: wrap;
   position: relative; }
   .bootstrap-grid > * {
-    box-sizing: border-box; }
+    box-sizing: border-box;
+    grid-column: span 100; }
     .bootstrap-grid > * :last-child,
     .bootstrap-grid > * :last-child > :last-child,
     .bootstrap-grid > * :last-child > :last-child > :last-child {
@@ -52,6 +53,96 @@ body {
   .bootstrap-grid > * {
     height: 100%; } }
 
+.bootstrap-grid__height--sm--0 {
+  height: 0; }
+
+.bootstrap-grid__height-fixed--sm--1 {
+  height: 1rem; }
+
+.bootstrap-grid__height-fixed--sm--2 {
+  height: 2rem; }
+
+.bootstrap-grid__height-fixed--sm--3 {
+  height: 3rem; }
+
+.bootstrap-grid__height-fixed--sm--4 {
+  height: 4rem; }
+
+.bootstrap-grid__height-fixed--sm--5 {
+  height: 5rem; }
+
+.bootstrap-grid__height-fixed--sm--6 {
+  height: 6rem; }
+
+.bootstrap-grid__height-fixed--sm--7 {
+  height: 7rem; }
+
+.bootstrap-grid__height-fixed--sm--8 {
+  height: 8rem; }
+
+.bootstrap-grid__height-fixed--sm--9 {
+  height: 9rem; }
+
+.bootstrap-grid__height-fixed--sm--10 {
+  height: 10rem; }
+
+.bootstrap-grid__height-fixed--sm--11 {
+  height: 11rem; }
+
+.bootstrap-grid__height-fixed--sm--12 {
+  height: 12rem; }
+
+.bootstrap-grid__height-fixed--sm--13 {
+  height: 13rem; }
+
+.bootstrap-grid__height-fixed--sm--14 {
+  height: 14rem; }
+
+.bootstrap-grid__height-fixed--sm--15 {
+  height: 15rem; }
+
+.bootstrap-grid__height-fixed--sm--16 {
+  height: 16rem; }
+
+.bootstrap-grid__height-fixed--sm--17 {
+  height: 17rem; }
+
+.bootstrap-grid__height-fixed--sm--18 {
+  height: 18rem; }
+
+.bootstrap-grid__height-fixed--sm--19 {
+  height: 19rem; }
+
+.bootstrap-grid__height-fixed--sm--20 {
+  height: 20rem; }
+
+.bootstrap-grid__height-fixed--sm--21 {
+  height: 21rem; }
+
+.bootstrap-grid__height-fixed--sm--22 {
+  height: 22rem; }
+
+.bootstrap-grid__height-fixed--sm--23 {
+  height: 23rem; }
+
+.bootstrap-grid__height-fixed--sm--24 {
+  height: 24rem; }
+
+.bootstrap-grid__height-fixed--sm--25 {
+  height: 25rem; }
+
+.bootstrap-grid__height-fixed--sm--26 {
+  height: 26rem; }
+
+.bootstrap-grid__height-fixed--sm--27 {
+  height: 27rem; }
+
+.bootstrap-grid__height-fixed--sm--28 {
+  height: 28rem; }
+
+.bootstrap-grid__height-fixed--sm--29 {
+  height: 29rem; }
+
 [class*="bootstrap-grid__col--sm--"] {
   display: block; }
 
@@ -62,7 +153,8 @@ body {
 .bootstrap-grid__col--sm--1 {
   max-width: calc( 100rem / 12 * 1);
   min-width: 8.33333vw;
-  width: 8.33333vw; }
+  width: 8.33333vw;
+  grid-column: span 1; }
 
 .bootstrap-grid__height-fluid--sm--1 {
   height: 8.33333vw;
@@ -71,7 +163,8 @@ body {
 .bootstrap-grid__col--sm--2 {
   max-width: calc( 100rem / 12 * 2);
   min-width: 16.66667vw;
-  width: 16.66667vw; }
+  width: 16.66667vw;
+  grid-column: span 2; }
 
 .bootstrap-grid__height-fluid--sm--2 {
   height: 16.66667vw;
@@ -80,7 +173,8 @@ body {
 .bootstrap-grid__col--sm--3 {
   max-width: calc( 100rem / 12 * 3);
   min-width: 25vw;
-  width: 25vw; }
+  width: 25vw;
+  grid-column: span 3; }
 
 .bootstrap-grid__height-fluid--sm--3 {
   height: 25vw;
@@ -89,7 +183,8 @@ body {
 .bootstrap-grid__col--sm--4 {
   max-width: calc( 100rem / 12 * 4);
   min-width: 33.33333vw;
-  width: 33.33333vw; }
+  width: 33.33333vw;
+  grid-column: span 4; }
 
 .bootstrap-grid__height-fluid--sm--4 {
   height: 33.33333vw;
@@ -98,7 +193,8 @@ body {
 .bootstrap-grid__col--sm--5 {
   max-width: calc( 100rem / 12 * 5);
   min-width: 41.66667vw;
-  width: 41.66667vw; }
+  width: 41.66667vw;
+  grid-column: span 5; }
 
 .bootstrap-grid__height-fluid--sm--5 {
   height: 41.66667vw;
@@ -107,7 +203,8 @@ body {
 .bootstrap-grid__col--sm--6 {
   max-width: calc( 100rem / 12 * 6);
   min-width: 50vw;
-  width: 50vw; }
+  width: 50vw;
+  grid-column: span 6; }
 
 .bootstrap-grid__height-fluid--sm--6 {
   height: 50vw;
@@ -116,7 +213,8 @@ body {
 .bootstrap-grid__col--sm--7 {
   max-width: calc( 100rem / 12 * 7);
   min-width: 58.33333vw;
-  width: 58.33333vw; }
+  width: 58.33333vw;
+  grid-column: span 7; }
 
 .bootstrap-grid__height-fluid--sm--7 {
   height: 58.33333vw;
@@ -125,7 +223,8 @@ body {
 .bootstrap-grid__col--sm--8 {
   max-width: calc( 100rem / 12 * 8);
   min-width: 66.66667vw;
-  width: 66.66667vw; }
+  width: 66.66667vw;
+  grid-column: span 8; }
 
 .bootstrap-grid__height-fluid--sm--8 {
   height: 66.66667vw;
@@ -134,7 +233,8 @@ body {
 .bootstrap-grid__col--sm--9 {
   max-width: calc( 100rem / 12 * 9);
   min-width: 75vw;
-  width: 75vw; }
+  width: 75vw;
+  grid-column: span 9; }
 
 .bootstrap-grid__height-fluid--sm--9 {
   height: 75vw;
@@ -143,7 +243,8 @@ body {
 .bootstrap-grid__col--sm--10 {
   max-width: calc( 100rem / 12 * 10);
   min-width: 83.33333vw;
-  width: 83.33333vw; }
+  width: 83.33333vw;
+  grid-column: span 10; }
 
 .bootstrap-grid__height-fluid--sm--10 {
   height: 83.33333vw;
@@ -152,7 +253,8 @@ body {
 .bootstrap-grid__col--sm--11 {
   max-width: calc( 100rem / 12 * 11);
   min-width: 91.66667vw;
-  width: 91.66667vw; }
+  width: 91.66667vw;
+  grid-column: span 11; }
 
 .bootstrap-grid__height-fluid--sm--11 {
   height: 91.66667vw;
@@ -161,102 +263,13 @@ body {
 .bootstrap-grid__col--sm--12 {
   max-width: calc( 100rem / 12 * 12);
   min-width: 100vw;
-  width: 100vw; }
+  width: 100vw;
+  grid-column: span 12; }
 
 .bootstrap-grid__height-fluid--sm--12 {
   height: 100vw;
   max-height: calc( 100rem / 12 * 12); }
 
-.bootstrap-grid__height--sm--0 {
-  height: 0; }
-
-.bootstrap-grid__height-fixed--sm--1 {
-  height: 1rem; }
-
-.bootstrap-grid__height-fixed--sm--2 {
-  height: 2rem; }
-
-.bootstrap-grid__height-fixed--sm--3 {
-  height: 3rem; }
-
-.bootstrap-grid__height-fixed--sm--4 {
-  height: 4rem; }
-
-.bootstrap-grid__height-fixed--sm--5 {
-  height: 5rem; }
-
-.bootstrap-grid__height-fixed--sm--6 {
-  height: 6rem; }
-
-.bootstrap-grid__height-fixed--sm--7 {
-  height: 7rem; }
-
-.bootstrap-grid__height-fixed--sm--8 {
-  height: 8rem; }
-
-.bootstrap-grid__height-fixed--sm--9 {
-  height: 9rem; }
-
-.bootstrap-grid__height-fixed--sm--10 {
-  height: 10rem; }
-
-.bootstrap-grid__height-fixed--sm--11 {
-  height: 11rem; }
-
-.bootstrap-grid__height-fixed--sm--12 {
-  height: 12rem; }
-
-.bootstrap-grid__height-fixed--sm--13 {
-  height: 13rem; }
-
-.bootstrap-grid__height-fixed--sm--14 {
-  height: 14rem; }
-
-.bootstrap-grid__height-fixed--sm--15 {
-  height: 15rem; }
-
-.bootstrap-grid__height-fixed--sm--16 {
-  height: 16rem; }
-
-.bootstrap-grid__height-fixed--sm--17 {
-  height: 17rem; }
-
-.bootstrap-grid__height-fixed--sm--18 {
-  height: 18rem; }
-
-.bootstrap-grid__height-fixed--sm--19 {
-  height: 19rem; }
-
-.bootstrap-grid__height-fixed--sm--20 {
-  height: 20rem; }
-
-.bootstrap-grid__height-fixed--sm--21 {
-  height: 21rem; }
-
-.bootstrap-grid__height-fixed--sm--22 {
-  height: 22rem; }
-
-.bootstrap-grid__height-fixed--sm--23 {
-  height: 23rem; }
-
-.bootstrap-grid__height-fixed--sm--24 {
-  height: 24rem; }
-
-.bootstrap-grid__height-fixed--sm--25 {
-  height: 25rem; }
-
-.bootstrap-grid__height-fixed--sm--26 {
-  height: 26rem; }
-
-.bootstrap-grid__height-fixed--sm--27 {
-  height: 27rem; }
-
-.bootstrap-grid__height-fixed--sm--28 {
-  height: 28rem; }
-
-.bootstrap-grid__height-fixed--sm--29 {
-  height: 29rem; }
-
 .bootstrap-padding {
   padding: calc(30px / 2); }
 
@@ -356,7 +369,6 @@ body {
 
 @supports (display: grid) {
   .bootstrap-grid > * {
-    display: initial;
     min-width: initial;
     max-width: initial;
     width: initial; }