ie11 is SHAME

fabean · Jun 12, 2020 · 2f660a7 · 2f660a7
1 parent e7e521c
commit 2f660a7
Show file tree

Hide file tree

Showing 2 changed files with 225 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "koality-flexbox-grid",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "Simple Flexbox Grid",
   "main": "index.js",
   "watch": {

diff --git a/src/scss/flexbox-grid-ie11.scss b/src/scss/flexbox-grid-ie11.scss
@@ -1,10 +1,93 @@
+$row-width: 1400px !default;
+$inner-row-width: 800px !default;
+
+$default: 0 !default;
+$sm: 576px !default;
+$md: 768px !default;
+$lg: 992px !default;
+$xl: 1200px !default;
+
+$breakpoints: (
+  default: $default,
+  sm: $sm,
+  md: $md,
+  lg: $lg,
+  xl: $xl,
+) !default;
+
+$gutter-width: 15px !default;
+
+$flex-grid-count: 12 !default;
+$flex-grow-default: 0 !default;
+$flex-shrink-default: 1 !default;
+
+html {
+  box-sizing: border-box;
+
+  * {
+    box-sizing: inherit;
+  }
+}
+
+.row {
+  margin: 0 auto;
+  max-width: $row-width;
+  padding: 0 $gutter-width;
+
+  @media (min-width: $row-width + $gutter-width) {
+    padding: 0;
+  }
+}
+
+.row-full {
+  left: 50%;
+  position: relative;
+  transform: translateX(-50%);
+  width: 100vw;
+}
+
+.inner-row {
+  margin: 0 auto;
+  max-width: $inner-row-width;
+  padding: 0 $gutter-width;
+
+  @media (min-width: $inner-row-width + $gutter-width) {
+    padding: 0;
+  }
+}
+
 @each $key, $breakpoint in $breakpoints {
   $beginning: '';
   @if $key != default {
     $beginning: #{$key}-; // sass-lint:disable-line space-around-operator
   }
 
   @media (min-width: $breakpoint) {
+    .#{$beginning}flex-container {
+      display: flex;
+    }
+
+    .#{$beginning}flex-wrap {
+      flex-wrap: wrap;
+    }
+
+    .#{$beginning}flex-nowrap {
+      flex-wrap: nowrap;
+    }
+
+    .#{$beginning}flex-wrap-reverse {
+      flex-wrap: wrap-reverse;
+    }
+
+    .#{$beginning}flex-row,
+    .#{$beginning}flex-dir-row {
+      flex-direction: row;
+    }
+
+    .#{$beginning}flex-dir-row-reverse {
+      flex-direction: row-reverse;
+    }
+
     .#{$beginning}flex-column,
     .#{$beginning}flex-dir-column {
       flex-direction: column;
@@ -13,5 +96,146 @@
         flex-basis: auto !important;
       }
     }
+
+    .#{$beginning}flex-dir-column-reverse {
+      flex-direction: column-reverse;
+    }
+
+    .#{$beginning}flex-jc-flex-start {
+      justify-content: flex-start;
+    }
+
+    .#{$beginning}flex-jc-flex-end {
+      justify-content: flex-end;
+    }
+
+    .#{$beginning}flex-jc-center {
+      justify-content: center;
+    }
+
+    .#{$beginning}flex-jc-space-between {
+      justify-content: space-between;
+    }
+
+    .#{$beginning}flex-jc-space-around {
+      justify-content: space-around;
+    }
+
+    .#{$beginning}flex-jc-space-evenly {
+      justify-content: space-evenly;
+    }
+
+    .#{$beginning}flex-ai-flex-start {
+      align-items: flex-start;
+    }
+
+    .#{$beginning}flex-ai-flex-end {
+      align-items: flex-end;
+    }
+
+    .#{$beginning}flex-ai-center {
+      align-items: center;
+    }
+
+    .#{$beginning}flex-ai-stretch {
+      align-items: stretch;
+    }
+
+    .#{$beginning}flex-ai-baseline {
+      align-items: baseline;
+    }
+
+    .#{$beginning}flex-ac-flex-start {
+      align-content: flex-start;
+    }
+
+    .#{$beginning}flex-ac-flex-end {
+      align-content: flex-end;
+    }
+
+    .#{$beginning}flex-ac-center {
+      align-content: center;
+    }
+
+    .#{$beginning}flex-ac-stretch {
+      align-content: stretch;
+    }
+
+    .#{$beginning}flex-ac-space-between {
+      align-content: space-between;
+    }
+
+    .#{$beginning}flex-ac-space-around {
+      align-content: space-around;
+    }
+
+    .#{$beginning}flex-as-flex-start {
+      align-self: flex-start;
+    }
+
+    .#{$beginning}flex-as-flex-end {
+      align-self: flex-end;
+    }
+
+    .#{$beginning}flex-as-center {
+      align-self: center;
+    }
+
+    .#{$beginning}flex-as-baseline {
+      align-self: baseline;
+    }
+
+    .#{$beginning}flex-as-stretch {
+      align-self: stretch;
+    }
+
+    .flex-container > * {
+      flex: $flex-grow-default $flex-shrink-default 100%;
+      // on ie11 there is a bug with flex item's padding and box-sizing: border-box, but forcing 0 padding
+      // caused other issues like forcing people to use !important tags just to add some padding to flex items.
+      padding: 0;
+
+      // Loop over grid count and each numberator on it and doing match for size.
+      @for $numerator from 1 through $flex-grid-count {
+        @for $denominator from 1 through $flex-grid-count {
+          @if $numerator <= $denominator {
+            &.#{$beginning}flex-#{$numerator}-#{$denominator} {
+              flex-basis: percentage($numerator / $denominator);
+            }
+          }
+        }
+      }
+
+      &.#{$beginning}flex-shrink-0 {
+        flex-shrink: 0;
+      }
+
+      &.#{$beginning}flex-grow-0 {
+        flex-grow: 0;
+      }
+
+      &.#{$beginning}flex-grow-2 {
+        flex-grow: 2;
+      }
+
+      &.#{$beginning}flex-grow-3 {
+        flex-grow: 3;
+      }
+
+      &.#{$beginning}flex-grow-4 {
+        flex-grow: 4;
+      }
+
+      &.#{$beginning}flex-grow-5 {
+        flex-grow: 5;
+      }
+    }
+
+    $numerator: 1;
+    @for $denominator from 1 through $flex-grid-count {
+      .flex-container.#{$beginning}flex-#{$numerator}-#{$denominator} > * { // sass-lint:disable-line force-element-nesting
+        flex-basis: percentage($numerator / $denominator);
+      }
+    }
   }
 }