Merge pull request #10 from IBM/9-fallback-props

9 fallback props

Author: seejamescode

bin/src/scss/_core.scss

@@ -12,17 +12,16 @@ body {
   margin-left: auto;
   margin-right: auto;
   max-width: #{map-get($last, breakpoint)}rem;
+  width: 100vw;
   @if $includeFlexFallback {
     overflow-x: hidden;
-    width: 100vw;
   }
 }
 
 @if $includeFlexFallback {
   @supports (display: grid) {
     .#{$prefix}-container {
       overflow-x: initial;
-      width: initial;
     }
   }
 }
@@ -38,7 +37,9 @@ body {
 .#{$prefix}-grid {
   align-items: flex-start;
   box-sizing: border-box;
-  display: flex;
+  @if $includeFlexFallback {
+    display: flex;
+  }
   display: grid;
   flex-wrap: wrap;
   position: relative;

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

@@ -7,13 +7,12 @@ body {
   margin-left: auto;
   margin-right: auto;
   max-width: 100rem;
-  overflow-x: hidden;
-  width: 100vw; }
+  width: 100vw;
+  overflow-x: hidden; }
 
 @supports (display: grid) {
   .bootstrap-container {
-    overflow-x: initial;
-    width: initial; } }
+    overflow-x: initial; } }
 
 .bootstrap-container--left {
   margin-left: 0; }

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

@@ -6,7 +6,8 @@ body {
   box-sizing: border-box;
   margin-left: auto;
   margin-right: auto;
-  max-width: 100rem; }
+  max-width: 100rem;
+  width: 100vw; }
 
 .bootstrap-container--left {
   margin-left: 0; }
@@ -17,7 +18,6 @@ body {
 .bootstrap-grid {
   align-items: flex-start;
   box-sizing: border-box;
-  display: flex;
   display: grid;
   flex-wrap: wrap;
   position: relative; }