From b803ef076b98c112b1828440548cded4ee2354d2 Mon Sep 17 00:00:00 2001
From: Tal <talvindersingh1992@gmail.com>
Date: Fri, 8 Nov 2019 11:15:04 +0530
Subject: [PATCH] scss version

---
 .gitignore                               |   2 +
 at_flex_grid/less/at_flex_variables.less |   6 +
 at_flex_grid/less/flex_grid.less         |   5 +
 at_flex_grid/sass/at_flex_grid.scss      | 129 +++++
 at_flex_grid/sass/at_flex_grid__lg.scss  |   5 +
 at_flex_grid/sass/at_flex_grid__md.scss  |  67 +++
 at_flex_grid/sass/at_flex_grid__sm.scss  |  98 ++++
 at_flex_grid/sass/at_flex_variables.scss |   6 +
 at_flex_grid/sass/flex_grid.scss         |   5 +
 grid.css                                 | 602 +++++++++++++++++++++++
 grid_sass.css                            |   0
 package.json                             |  16 +
 12 files changed, 941 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 at_flex_grid/less/at_flex_variables.less
 create mode 100644 at_flex_grid/less/flex_grid.less
 create mode 100644 at_flex_grid/sass/at_flex_grid.scss
 create mode 100644 at_flex_grid/sass/at_flex_grid__lg.scss
 create mode 100644 at_flex_grid/sass/at_flex_grid__md.scss
 create mode 100644 at_flex_grid/sass/at_flex_grid__sm.scss
 create mode 100644 at_flex_grid/sass/at_flex_variables.scss
 create mode 100644 at_flex_grid/sass/flex_grid.scss
 create mode 100644 grid.css
 create mode 100644 grid_sass.css
 create mode 100644 package.json

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..76add87
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
\ No newline at end of file
diff --git a/at_flex_grid/less/at_flex_variables.less b/at_flex_grid/less/at_flex_variables.less
new file mode 100644
index 0000000..c3c1a35
--- /dev/null
+++ b/at_flex_grid/less/at_flex_variables.less
@@ -0,0 +1,6 @@
+@screen-xs-max: 767px;
+@screen-sm-min: 768px;
+@screen-sm-max: 991px;
+@screen-md-min: 992px;
+@screen-md-max: 1199px;
+@screen-lg-min: 1200px;
\ No newline at end of file
diff --git a/at_flex_grid/less/flex_grid.less b/at_flex_grid/less/flex_grid.less
new file mode 100644
index 0000000..9ff6f70
--- /dev/null
+++ b/at_flex_grid/less/flex_grid.less
@@ -0,0 +1,5 @@
+@import "at_flex_variables.less";
+@import "at_flex_grid.less";
+@import "at_flex_grid__sm.less";
+@import "at_flex_grid__md.less";
+@import "at_flex_grid__lg.less";
diff --git a/at_flex_grid/sass/at_flex_grid.scss b/at_flex_grid/sass/at_flex_grid.scss
new file mode 100644
index 0000000..2d30767
--- /dev/null
+++ b/at_flex_grid/sass/at_flex_grid.scss
@@ -0,0 +1,129 @@
+$horizontal-spacing-section :0; // horizontal spacing between elements side by side, e.g. between two buttons on the same row
+$vertical-spacing-section :20px; // vertical spacing between elements side by side, e.g. between two buttons on the same row
+.sn-flex {
+  display: flex;
+  >* {
+    flex: 1 1 auto;
+    margin-left: $horizontal-spacing-section;
+    margin-bottom: $vertical-spacing-section;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+  // overrite flex on samll screen
+  &.flex-stack-mobile, &.flex-1, &.flex-1-1-2, &.flex-1-2-2, &.flex-1-2-3, &.flex-1-2-4, &.flex-1-1-3, &.flex-1-3-4, &.flex-1-3-3, &.flex-1-1-4, &.flex-1-4-4 {
+    display: block;
+    > * {
+      margin-left: 0;
+    }
+  }
+  // justify-content
+  &.item-justify-left {
+    justify-content: flex-start;
+  }
+  &.item-justify-right {
+    justify-content: flex-end;
+  }
+  &.item-justify-center {
+    justify-content: center;
+  }
+  &.item-justify-between {
+    justify-content: space-between;
+  }
+  &.item-justify-around {
+    justify-content: space-around;
+  }
+  // Align Items
+  &.item-align-start {
+    align-items: flex-start;
+  }
+  &.item-align-end {
+    align-items: flex-end;
+  }
+  &.item-align-center {
+    align-items: center;
+  }
+  &.item-align-between {
+    align-items: space-between;
+  }
+  &.item-align-around {
+    align-items: space-around;
+  }
+  &.inline {
+    display: inline-flex;
+  }
+  .no-grow{
+    flex-grow: 0;
+  }
+  // overrite column in a flex layout
+  &.grid-flex-overwrite {
+    flex-wrap: wrap;
+    .flex-overwrite {
+      flex: 0 0 100%;
+      max-width: 100%;
+      margin-left: 0;
+      & + * {
+        margin-left: 0;
+      }
+    }
+  }
+  // column will expand as per the content within
+  &.flex-none {
+    >* {
+      flex: 0 0 auto;
+    }
+  }
+  &.no-vertical-margin {
+    > * {
+      &:nth-child(even),
+      &:nth-child(odd) {
+        margin-bottom: 0;
+      }
+    }
+  }
+  // no margin class
+  &.grid-flex-no-margin {
+    > * {
+      &:nth-child(even),
+      &:nth-child(odd) {
+        margin-left: 0 !important;
+      }
+    }
+  }
+  .sn-flex {
+    margin-bottom: 0;
+  }
+}
+
+// class for snflex, jc: justify-center, ac: align-center
+.sn-flex-jc-ac {
+  @extend .sn-flex;
+  @extend .item-justify-center;
+  @extend .item-align-center;
+}
+
+// class for snflex, jb: justify-between, ac: align-center
+.sn-flex-jb-ac {
+  @extend .sn-flex;
+  @extend .item-justify-center;
+  @extend .item-align-center;
+}
+
+// sn-flex helper classes
+.flex-stack-helper {
+  display: block;
+  > * {
+    margin-left: 0;
+    margin-bottom: $horizontal-spacing-section;
+  }
+}
+
+.flex-stack-helper-overwrite {
+  display: flex;
+  > * {
+    margin-left: $horizontal-spacing-section;
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+}
diff --git a/at_flex_grid/sass/at_flex_grid__lg.scss b/at_flex_grid/sass/at_flex_grid__lg.scss
new file mode 100644
index 0000000..0000260
--- /dev/null
+++ b/at_flex_grid/sass/at_flex_grid__lg.scss
@@ -0,0 +1,5 @@
+@media (min-width: $screen-lg-min) {
+    .at_flex {
+    }
+  }
+  
\ No newline at end of file
diff --git a/at_flex_grid/sass/at_flex_grid__md.scss b/at_flex_grid/sass/at_flex_grid__md.scss
new file mode 100644
index 0000000..f5695ba
--- /dev/null
+++ b/at_flex_grid/sass/at_flex_grid__md.scss
@@ -0,0 +1,67 @@
+@media (min-width: $screen-md-min) {
+
+    $flex-2-spacing: 0;
+    $flex-3-spacing: 0;
+    $flex-4-spacing: 0;
+    .sn-flex {
+      &.flex-1-2-3, &.flex-1-2-4 {
+        > * {
+          &:nth-child(2n+3) {
+            margin-left: $horizontal-spacing-section;
+          }
+        }
+      }
+      &.flex-1-3-4 {
+        > * {
+          &:nth-child(3n+4) {
+            margin-left: $horizontal-spacing-section;
+          }
+        }
+      }
+      &.flex-2, &.flex-1-1-2, &.flex-1-2-2 {
+        @include flex-stack-helper-overwrite;
+        > * {
+          flex: 0 0 auto;
+          flex-basis: calc(50% - $flex-2-spacing);
+          max-width: calc(50% - $flex-2-spacing);
+          &:nth-child(2n+3) {
+            margin-left: 0;
+          }
+        }
+      }
+      &.flex-3, &.flex-1-1-3, &.flex-1-2-3 {
+        @include flex-stack-helper-overwrite;
+        > * {
+          flex: 0 0 auto;
+          flex-basis: calc(33.3333% - $flex-3-spacing);
+          max-width: calc(33.3333% - $flex-3-spacing);
+          &:nth-child(3n+4) {
+            margin-left: 0;
+          }
+        }
+        .flex-overwrite {
+          margin-left: 0;
+        }
+      }
+      &.flex-4, &.flex-1-1-4, &.flex-1-2-4, &.flex-1-3-4, &.flex-1-4-4 {
+        @include flex-stack-helper-overwrite;
+        > * {
+          flex: 0 0 auto;
+          flex-basis: calc(25% - $flex-4-spacing);
+          max-width: calc(25% - $flex-4-spacing);
+          &:nth-child(4n+5) {
+            margin-left: 0;
+          }
+        }
+        .flex-overwrite {
+          margin-left: 0;
+        }
+      }
+      .grow-md-4 {
+        flex-grow: 4;
+      }
+    }
+  }
+  
+  
+  
\ No newline at end of file
diff --git a/at_flex_grid/sass/at_flex_grid__sm.scss b/at_flex_grid/sass/at_flex_grid__sm.scss
new file mode 100644
index 0000000..ee2e8e2
--- /dev/null
+++ b/at_flex_grid/sass/at_flex_grid__sm.scss
@@ -0,0 +1,98 @@
+@media (min-width: $screen-sm-min) {
+    $flex-2-spacing: 0;
+    $flex-3-spacing: 0;
+    $flex-4-spacing: 0;
+    .sn-flex {
+      $total-col: 12;
+      $flex-width : percentage(1/$total-col);
+      >* {
+        margin-bottom: $vertical-spacing-section;
+        margin-left: $horizontal-spacing-section;
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+  
+      &.flex-stack-mobile, &.flex-1, &.flex-1-1-2, &.flex-1-2-2, &.flex-1-2-3, &.flex-1-2-4, &.flex-1-1-3, &.flex-1-3-4, &.flex-1-3-3, &.flex-1-1-4, &.flex-1-4-4 {
+        display: flex;
+        flex-wrap: nowrap;
+        > * {
+          margin-left: $horizontal-spacing-section;
+          &:first-child {
+            margin-left: 0;
+          }
+        }
+      }
+      &.flex-1, &.flex-1-1-3, &.flex-2, &.flex-1-1-2, &.flex-1-2-2, &.flex-2, &.flex-1-2-3, &.flex-1-2-4, &.flex-1-3-4, &.flex-3, &.flex-1-3-4, &.flex-1-3-3, &.flex-4, &.flex-1-1-4, &.flex-1-4-4, &[class*="overflow"]{
+        flex-wrap: wrap;
+      }
+      &.flex-1, &.flex-1-1-2, &.flex-1-1-3, &.flex-1-1-4 {
+  
+              margin-left: 0;
+              margin-bottom: $vertical-spacing-section;
+      }
+      &.flex-2, &.flex-1-2-2, &.flex-1-2-3, &.flex-1-2-4{
+        > * {
+          flex: 0 0 auto;
+          flex-basis: calc(50% - $flex-2-spacing);
+          max-width: calc(50% - $flex-2-spacing);
+          &:nth-child(2n+3) {
+            margin-left: 0;
+          }
+        }
+      }
+      &.flex-3, &.flex-1-3-4, &.flex-1-3-3 {
+        > * {
+          flex: 0 0 auto;
+          flex-basis: calc(33.3333% - $flex-3-spacing);
+          max-width: calc(33.3333% - $flex-3-spacing);
+          &:nth-child(3n+4) {
+            margin-left: 0;
+          }
+        }
+      }
+  
+  
+      &.flex-4, &.flex-1-4-4 {
+        > * {
+          flex: 0 0 auto;
+          flex-basis: calc(25% - $flex-4-spacing);
+          max-width: calc(25% - $flex-4-spacing);
+          &:nth-child(4n+5) {
+            margin-left: 0;
+          }
+        }
+      }
+  
+  
+      @mixin grid-loop($i)  {
+        @while $i > 0 {
+            .flex-width-#{i}-col {
+            flex-basis: $flex-width * $i;
+            max-width: $flex-width * $i;
+            }
+        }
+        @include grid-loop($i - 1);
+      }
+      @include grid-loop ($total-col);
+  
+      &.grow {
+        > *{
+          flex-basis: 0;
+          flex-grow: 1;
+          padding-left: 10px;
+          padding-right: 10px;
+        }
+      }
+      .grow-2 {
+        flex-grow: 2;
+      }
+      .grow-3 {
+        flex-grow: 3;
+      }
+      .grow-4 {
+        flex-grow: 4;
+      }
+    }
+  }
+  
\ No newline at end of file
diff --git a/at_flex_grid/sass/at_flex_variables.scss b/at_flex_grid/sass/at_flex_variables.scss
new file mode 100644
index 0000000..08bfbda
--- /dev/null
+++ b/at_flex_grid/sass/at_flex_variables.scss
@@ -0,0 +1,6 @@
+$screen-xs-max: 767px;
+$screen-sm-min: 768px;
+$screen-sm-max: 991px;
+$screen-md-min: 992px;
+$screen-md-max: 1199px;
+$screen-lg-min: 1200px;
\ No newline at end of file
diff --git a/at_flex_grid/sass/flex_grid.scss b/at_flex_grid/sass/flex_grid.scss
new file mode 100644
index 0000000..a88daf8
--- /dev/null
+++ b/at_flex_grid/sass/flex_grid.scss
@@ -0,0 +1,5 @@
+@import "at_flex_variables.scss";
+@import "at_flex_grid.scss";
+@import "at_flex_grid__sm.scss";
+@import "at_flex_grid__md.scss";
+@import "at_flex_grid__lg.scss";
diff --git a/grid.css b/grid.css
new file mode 100644
index 0000000..6252293
--- /dev/null
+++ b/grid.css
@@ -0,0 +1,602 @@
+.sn-flex {
+  display: flex;
+}
+.sn-flex > * {
+  flex: 1 1 auto;
+  margin-left: 0;
+  margin-bottom: 20px;
+}
+.sn-flex > *:first-child {
+  margin-left: 0;
+}
+.sn-flex.flex-stack-mobile,
+.sn-flex.flex-1,
+.sn-flex.flex-1-1-2,
+.sn-flex.flex-1-2-2,
+.sn-flex.flex-1-2-3,
+.sn-flex.flex-1-2-4,
+.sn-flex.flex-1-1-3,
+.sn-flex.flex-1-3-4,
+.sn-flex.flex-1-3-3,
+.sn-flex.flex-1-1-4,
+.sn-flex.flex-1-4-4 {
+  display: block;
+}
+.sn-flex.flex-stack-mobile > *,
+.sn-flex.flex-1 > *,
+.sn-flex.flex-1-1-2 > *,
+.sn-flex.flex-1-2-2 > *,
+.sn-flex.flex-1-2-3 > *,
+.sn-flex.flex-1-2-4 > *,
+.sn-flex.flex-1-1-3 > *,
+.sn-flex.flex-1-3-4 > *,
+.sn-flex.flex-1-3-3 > *,
+.sn-flex.flex-1-1-4 > *,
+.sn-flex.flex-1-4-4 > * {
+  margin-left: 0;
+}
+.sn-flex.item-justify-left {
+  justify-content: flex-start;
+}
+.sn-flex.item-justify-right {
+  justify-content: flex-end;
+}
+.sn-flex.item-justify-center {
+  justify-content: center;
+}
+.sn-flex.item-justify-between {
+  justify-content: space-between;
+}
+.sn-flex.item-justify-around {
+  justify-content: space-around;
+}
+.sn-flex.item-align-start {
+  align-items: flex-start;
+}
+.sn-flex.item-align-end {
+  align-items: flex-end;
+}
+.sn-flex.item-align-center {
+  align-items: center;
+}
+.sn-flex.item-align-between {
+  align-items: space-between;
+}
+.sn-flex.item-align-around {
+  align-items: space-around;
+}
+.sn-flex.inline {
+  display: inline-flex;
+}
+.sn-flex .no-grow {
+  flex-grow: 0;
+}
+.sn-flex.grid-flex-overwrite {
+  flex-wrap: wrap;
+}
+.sn-flex.grid-flex-overwrite .flex-overwrite {
+  flex: 0 0 100%;
+  max-width: 100%;
+  margin-left: 0;
+}
+.sn-flex.grid-flex-overwrite .flex-overwrite + * {
+  margin-left: 0;
+}
+.sn-flex.flex-none > * {
+  flex: 0 0 auto;
+}
+.sn-flex.no-vertical-margin > *:nth-child(even),
+.sn-flex.no-vertical-margin > *:nth-child(odd) {
+  margin-bottom: 0;
+}
+.sn-flex.grid-flex-no-margin > *:nth-child(even),
+.sn-flex.grid-flex-no-margin > *:nth-child(odd) {
+  margin-left: 0 !important;
+}
+.sn-flex .sn-flex {
+  margin-bottom: 0;
+}
+.sn-flex-jc-ac {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.sn-flex-jc-ac > * {
+  flex: 1 1 auto;
+  margin-left: 0;
+  margin-bottom: 20px;
+}
+.sn-flex-jc-ac > *:first-child {
+  margin-left: 0;
+}
+.sn-flex-jc-ac.flex-stack-mobile,
+.sn-flex-jc-ac.flex-1,
+.sn-flex-jc-ac.flex-1-1-2,
+.sn-flex-jc-ac.flex-1-2-2,
+.sn-flex-jc-ac.flex-1-2-3,
+.sn-flex-jc-ac.flex-1-2-4,
+.sn-flex-jc-ac.flex-1-1-3,
+.sn-flex-jc-ac.flex-1-3-4,
+.sn-flex-jc-ac.flex-1-3-3,
+.sn-flex-jc-ac.flex-1-1-4,
+.sn-flex-jc-ac.flex-1-4-4 {
+  display: block;
+}
+.sn-flex-jc-ac.flex-stack-mobile > *,
+.sn-flex-jc-ac.flex-1 > *,
+.sn-flex-jc-ac.flex-1-1-2 > *,
+.sn-flex-jc-ac.flex-1-2-2 > *,
+.sn-flex-jc-ac.flex-1-2-3 > *,
+.sn-flex-jc-ac.flex-1-2-4 > *,
+.sn-flex-jc-ac.flex-1-1-3 > *,
+.sn-flex-jc-ac.flex-1-3-4 > *,
+.sn-flex-jc-ac.flex-1-3-3 > *,
+.sn-flex-jc-ac.flex-1-1-4 > *,
+.sn-flex-jc-ac.flex-1-4-4 > * {
+  margin-left: 0;
+}
+.sn-flex-jc-ac.item-justify-left {
+  justify-content: flex-start;
+}
+.sn-flex-jc-ac.item-justify-right {
+  justify-content: flex-end;
+}
+.sn-flex-jc-ac.item-justify-center {
+  justify-content: center;
+}
+.sn-flex-jc-ac.item-justify-between {
+  justify-content: space-between;
+}
+.sn-flex-jc-ac.item-justify-around {
+  justify-content: space-around;
+}
+.sn-flex-jc-ac.item-align-start {
+  align-items: flex-start;
+}
+.sn-flex-jc-ac.item-align-end {
+  align-items: flex-end;
+}
+.sn-flex-jc-ac.item-align-center {
+  align-items: center;
+}
+.sn-flex-jc-ac.item-align-between {
+  align-items: space-between;
+}
+.sn-flex-jc-ac.item-align-around {
+  align-items: space-around;
+}
+.sn-flex-jc-ac.inline {
+  display: inline-flex;
+}
+.sn-flex-jc-ac .no-grow {
+  flex-grow: 0;
+}
+.sn-flex-jc-ac.grid-flex-overwrite {
+  flex-wrap: wrap;
+}
+.sn-flex-jc-ac.grid-flex-overwrite .flex-overwrite {
+  flex: 0 0 100%;
+  max-width: 100%;
+  margin-left: 0;
+}
+.sn-flex-jc-ac.grid-flex-overwrite .flex-overwrite + * {
+  margin-left: 0;
+}
+.sn-flex-jc-ac.flex-none > * {
+  flex: 0 0 auto;
+}
+.sn-flex-jc-ac.no-vertical-margin > *:nth-child(even),
+.sn-flex-jc-ac.no-vertical-margin > *:nth-child(odd) {
+  margin-bottom: 0;
+}
+.sn-flex-jc-ac.grid-flex-no-margin > *:nth-child(even),
+.sn-flex-jc-ac.grid-flex-no-margin > *:nth-child(odd) {
+  margin-left: 0 !important;
+}
+.sn-flex-jc-ac .sn-flex {
+  margin-bottom: 0;
+}
+.sn-flex-jb-ac {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.sn-flex-jb-ac > * {
+  flex: 1 1 auto;
+  margin-left: 0;
+  margin-bottom: 20px;
+}
+.sn-flex-jb-ac > *:first-child {
+  margin-left: 0;
+}
+.sn-flex-jb-ac.flex-stack-mobile,
+.sn-flex-jb-ac.flex-1,
+.sn-flex-jb-ac.flex-1-1-2,
+.sn-flex-jb-ac.flex-1-2-2,
+.sn-flex-jb-ac.flex-1-2-3,
+.sn-flex-jb-ac.flex-1-2-4,
+.sn-flex-jb-ac.flex-1-1-3,
+.sn-flex-jb-ac.flex-1-3-4,
+.sn-flex-jb-ac.flex-1-3-3,
+.sn-flex-jb-ac.flex-1-1-4,
+.sn-flex-jb-ac.flex-1-4-4 {
+  display: block;
+}
+.sn-flex-jb-ac.flex-stack-mobile > *,
+.sn-flex-jb-ac.flex-1 > *,
+.sn-flex-jb-ac.flex-1-1-2 > *,
+.sn-flex-jb-ac.flex-1-2-2 > *,
+.sn-flex-jb-ac.flex-1-2-3 > *,
+.sn-flex-jb-ac.flex-1-2-4 > *,
+.sn-flex-jb-ac.flex-1-1-3 > *,
+.sn-flex-jb-ac.flex-1-3-4 > *,
+.sn-flex-jb-ac.flex-1-3-3 > *,
+.sn-flex-jb-ac.flex-1-1-4 > *,
+.sn-flex-jb-ac.flex-1-4-4 > * {
+  margin-left: 0;
+}
+.sn-flex-jb-ac.item-justify-left {
+  justify-content: flex-start;
+}
+.sn-flex-jb-ac.item-justify-right {
+  justify-content: flex-end;
+}
+.sn-flex-jb-ac.item-justify-center {
+  justify-content: center;
+}
+.sn-flex-jb-ac.item-justify-between {
+  justify-content: space-between;
+}
+.sn-flex-jb-ac.item-justify-around {
+  justify-content: space-around;
+}
+.sn-flex-jb-ac.item-align-start {
+  align-items: flex-start;
+}
+.sn-flex-jb-ac.item-align-end {
+  align-items: flex-end;
+}
+.sn-flex-jb-ac.item-align-center {
+  align-items: center;
+}
+.sn-flex-jb-ac.item-align-between {
+  align-items: space-between;
+}
+.sn-flex-jb-ac.item-align-around {
+  align-items: space-around;
+}
+.sn-flex-jb-ac.inline {
+  display: inline-flex;
+}
+.sn-flex-jb-ac .no-grow {
+  flex-grow: 0;
+}
+.sn-flex-jb-ac.grid-flex-overwrite {
+  flex-wrap: wrap;
+}
+.sn-flex-jb-ac.grid-flex-overwrite .flex-overwrite {
+  flex: 0 0 100%;
+  max-width: 100%;
+  margin-left: 0;
+}
+.sn-flex-jb-ac.grid-flex-overwrite .flex-overwrite + * {
+  margin-left: 0;
+}
+.sn-flex-jb-ac.flex-none > * {
+  flex: 0 0 auto;
+}
+.sn-flex-jb-ac.no-vertical-margin > *:nth-child(even),
+.sn-flex-jb-ac.no-vertical-margin > *:nth-child(odd) {
+  margin-bottom: 0;
+}
+.sn-flex-jb-ac.grid-flex-no-margin > *:nth-child(even),
+.sn-flex-jb-ac.grid-flex-no-margin > *:nth-child(odd) {
+  margin-left: 0 !important;
+}
+.sn-flex-jb-ac .sn-flex {
+  margin-bottom: 0;
+}
+.flex-stack-helper {
+  display: block;
+}
+.flex-stack-helper > * {
+  margin-left: 0;
+  margin-bottom: 0;
+}
+.flex-stack-helper-overwrite {
+  display: flex;
+}
+.flex-stack-helper-overwrite > * {
+  margin-left: 0;
+}
+.flex-stack-helper-overwrite > *:first-child {
+  margin-left: 0;
+}
+@media (min-width: 768px) {
+  .sn-flex > * {
+    margin-bottom: 20px;
+    margin-left: 0;
+  }
+  .sn-flex > *:first-child {
+    margin-left: 0;
+  }
+  .sn-flex.flex-stack-mobile,
+  .sn-flex.flex-1,
+  .sn-flex.flex-1-1-2,
+  .sn-flex.flex-1-2-2,
+  .sn-flex.flex-1-2-3,
+  .sn-flex.flex-1-2-4,
+  .sn-flex.flex-1-1-3,
+  .sn-flex.flex-1-3-4,
+  .sn-flex.flex-1-3-3,
+  .sn-flex.flex-1-1-4,
+  .sn-flex.flex-1-4-4 {
+    display: flex;
+    flex-wrap: nowrap;
+  }
+  .sn-flex.flex-stack-mobile > *,
+  .sn-flex.flex-1 > *,
+  .sn-flex.flex-1-1-2 > *,
+  .sn-flex.flex-1-2-2 > *,
+  .sn-flex.flex-1-2-3 > *,
+  .sn-flex.flex-1-2-4 > *,
+  .sn-flex.flex-1-1-3 > *,
+  .sn-flex.flex-1-3-4 > *,
+  .sn-flex.flex-1-3-3 > *,
+  .sn-flex.flex-1-1-4 > *,
+  .sn-flex.flex-1-4-4 > * {
+    margin-left: 0;
+  }
+  .sn-flex.flex-stack-mobile > *:first-child,
+  .sn-flex.flex-1 > *:first-child,
+  .sn-flex.flex-1-1-2 > *:first-child,
+  .sn-flex.flex-1-2-2 > *:first-child,
+  .sn-flex.flex-1-2-3 > *:first-child,
+  .sn-flex.flex-1-2-4 > *:first-child,
+  .sn-flex.flex-1-1-3 > *:first-child,
+  .sn-flex.flex-1-3-4 > *:first-child,
+  .sn-flex.flex-1-3-3 > *:first-child,
+  .sn-flex.flex-1-1-4 > *:first-child,
+  .sn-flex.flex-1-4-4 > *:first-child {
+    margin-left: 0;
+  }
+  .sn-flex.flex-1,
+  .sn-flex.flex-1-1-3,
+  .sn-flex.flex-2,
+  .sn-flex.flex-1-1-2,
+  .sn-flex.flex-1-2-2,
+  .sn-flex.flex-2,
+  .sn-flex.flex-1-2-3,
+  .sn-flex.flex-1-2-4,
+  .sn-flex.flex-1-3-4,
+  .sn-flex.flex-3,
+  .sn-flex.flex-1-3-4,
+  .sn-flex.flex-1-3-3,
+  .sn-flex.flex-4,
+  .sn-flex.flex-1-1-4,
+  .sn-flex.flex-1-4-4,
+  .sn-flex[class*="overflow"] {
+    flex-wrap: wrap;
+  }
+  .sn-flex.flex-1,
+  .sn-flex.flex-1-1-2,
+  .sn-flex.flex-1-1-3,
+  .sn-flex.flex-1-1-4 {
+    margin-left: 0;
+    margin-bottom: 20px;
+  }
+  .sn-flex.flex-2 > *,
+  .sn-flex.flex-1-2-2 > *,
+  .sn-flex.flex-1-2-3 > *,
+  .sn-flex.flex-1-2-4 > * {
+    flex: 0 0 auto;
+    flex-basis: calc(50% -  0);
+    max-width: calc(50% -  0);
+  }
+  .sn-flex.flex-2 > *:nth-child(2n+3),
+  .sn-flex.flex-1-2-2 > *:nth-child(2n+3),
+  .sn-flex.flex-1-2-3 > *:nth-child(2n+3),
+  .sn-flex.flex-1-2-4 > *:nth-child(2n+3) {
+    margin-left: 0;
+  }
+  .sn-flex.flex-3 > *,
+  .sn-flex.flex-1-3-4 > *,
+  .sn-flex.flex-1-3-3 > * {
+    flex: 0 0 auto;
+    flex-basis: calc(33.3333% -  0);
+    max-width: calc(33.3333% -  0);
+  }
+  .sn-flex.flex-3 > *:nth-child(3n+4),
+  .sn-flex.flex-1-3-4 > *:nth-child(3n+4),
+  .sn-flex.flex-1-3-3 > *:nth-child(3n+4) {
+    margin-left: 0;
+  }
+  .sn-flex.flex-4 > *,
+  .sn-flex.flex-1-4-4 > * {
+    flex: 0 0 auto;
+    flex-basis: calc(25% -  0);
+    max-width: calc(25% -  0);
+  }
+  .sn-flex.flex-4 > *:nth-child(4n+5),
+  .sn-flex.flex-1-4-4 > *:nth-child(4n+5) {
+    margin-left: 0;
+  }
+  .sn-flex .flex-width-12-col {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+  .sn-flex .flex-width-11-col {
+    flex-basis: 91.66666667%;
+    max-width: 91.66666667%;
+  }
+  .sn-flex .flex-width-10-col {
+    flex-basis: 83.33333333%;
+    max-width: 83.33333333%;
+  }
+  .sn-flex .flex-width-9-col {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+  .sn-flex .flex-width-8-col {
+    flex-basis: 66.66666667%;
+    max-width: 66.66666667%;
+  }
+  .sn-flex .flex-width-7-col {
+    flex-basis: 58.33333333%;
+    max-width: 58.33333333%;
+  }
+  .sn-flex .flex-width-6-col {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+  .sn-flex .flex-width-5-col {
+    flex-basis: 41.66666667%;
+    max-width: 41.66666667%;
+  }
+  .sn-flex .flex-width-4-col {
+    flex-basis: 33.33333333%;
+    max-width: 33.33333333%;
+  }
+  .sn-flex .flex-width-3-col {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+  .sn-flex .flex-width-2-col {
+    flex-basis: 16.66666667%;
+    max-width: 16.66666667%;
+  }
+  .sn-flex .flex-width-1-col {
+    flex-basis: 8.33333333%;
+    max-width: 8.33333333%;
+  }
+  .sn-flex.grow > * {
+    flex-basis: 0;
+    flex-grow: 1;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+  .sn-flex .grow-2 {
+    flex-grow: 2;
+  }
+  .sn-flex .grow-3 {
+    flex-grow: 3;
+  }
+  .sn-flex .grow-4 {
+    flex-grow: 4;
+  }
+}
+@media (min-width: 992px) {
+  .sn-flex.flex-1-2-3 > *:nth-child(2n+3),
+  .sn-flex.flex-1-2-4 > *:nth-child(2n+3) {
+    margin-left: 0;
+  }
+  .sn-flex.flex-1-3-4 > *:nth-child(3n+4) {
+    margin-left: 0;
+  }
+  .sn-flex.flex-2,
+  .sn-flex.flex-1-1-2,
+  .sn-flex.flex-1-2-2 {
+    display: flex;
+  }
+  .sn-flex.flex-2 > *,
+  .sn-flex.flex-1-1-2 > *,
+  .sn-flex.flex-1-2-2 > * {
+    margin-left: 0;
+  }
+  .sn-flex.flex-2 > *:first-child,
+  .sn-flex.flex-1-1-2 > *:first-child,
+  .sn-flex.flex-1-2-2 > *:first-child {
+    margin-left: 0;
+  }
+  .sn-flex.flex-2 > *,
+  .sn-flex.flex-1-1-2 > *,
+  .sn-flex.flex-1-2-2 > * {
+    flex: 0 0 auto;
+    flex-basis: calc(50% -  0);
+    max-width: calc(50% -  0);
+  }
+  .sn-flex.flex-2 > *:nth-child(2n+3),
+  .sn-flex.flex-1-1-2 > *:nth-child(2n+3),
+  .sn-flex.flex-1-2-2 > *:nth-child(2n+3) {
+    margin-left: 0;
+  }
+  .sn-flex.flex-3,
+  .sn-flex.flex-1-1-3,
+  .sn-flex.flex-1-2-3 {
+    display: flex;
+  }
+  .sn-flex.flex-3 > *,
+  .sn-flex.flex-1-1-3 > *,
+  .sn-flex.flex-1-2-3 > * {
+    margin-left: 0;
+  }
+  .sn-flex.flex-3 > *:first-child,
+  .sn-flex.flex-1-1-3 > *:first-child,
+  .sn-flex.flex-1-2-3 > *:first-child {
+    margin-left: 0;
+  }
+  .sn-flex.flex-3 > *,
+  .sn-flex.flex-1-1-3 > *,
+  .sn-flex.flex-1-2-3 > * {
+    flex: 0 0 auto;
+    flex-basis: calc(33.3333% -  0);
+    max-width: calc(33.3333% -  0);
+  }
+  .sn-flex.flex-3 > *:nth-child(3n+4),
+  .sn-flex.flex-1-1-3 > *:nth-child(3n+4),
+  .sn-flex.flex-1-2-3 > *:nth-child(3n+4) {
+    margin-left: 0;
+  }
+  .sn-flex.flex-3 .flex-overwrite,
+  .sn-flex.flex-1-1-3 .flex-overwrite,
+  .sn-flex.flex-1-2-3 .flex-overwrite {
+    margin-left: 0;
+  }
+  .sn-flex.flex-4,
+  .sn-flex.flex-1-1-4,
+  .sn-flex.flex-1-2-4,
+  .sn-flex.flex-1-3-4,
+  .sn-flex.flex-1-4-4 {
+    display: flex;
+  }
+  .sn-flex.flex-4 > *,
+  .sn-flex.flex-1-1-4 > *,
+  .sn-flex.flex-1-2-4 > *,
+  .sn-flex.flex-1-3-4 > *,
+  .sn-flex.flex-1-4-4 > * {
+    margin-left: 0;
+  }
+  .sn-flex.flex-4 > *:first-child,
+  .sn-flex.flex-1-1-4 > *:first-child,
+  .sn-flex.flex-1-2-4 > *:first-child,
+  .sn-flex.flex-1-3-4 > *:first-child,
+  .sn-flex.flex-1-4-4 > *:first-child {
+    margin-left: 0;
+  }
+  .sn-flex.flex-4 > *,
+  .sn-flex.flex-1-1-4 > *,
+  .sn-flex.flex-1-2-4 > *,
+  .sn-flex.flex-1-3-4 > *,
+  .sn-flex.flex-1-4-4 > * {
+    flex: 0 0 auto;
+    flex-basis: calc(25% -  0);
+    max-width: calc(25% -  0);
+  }
+  .sn-flex.flex-4 > *:nth-child(4n+5),
+  .sn-flex.flex-1-1-4 > *:nth-child(4n+5),
+  .sn-flex.flex-1-2-4 > *:nth-child(4n+5),
+  .sn-flex.flex-1-3-4 > *:nth-child(4n+5),
+  .sn-flex.flex-1-4-4 > *:nth-child(4n+5) {
+    margin-left: 0;
+  }
+  .sn-flex.flex-4 .flex-overwrite,
+  .sn-flex.flex-1-1-4 .flex-overwrite,
+  .sn-flex.flex-1-2-4 .flex-overwrite,
+  .sn-flex.flex-1-3-4 .flex-overwrite,
+  .sn-flex.flex-1-4-4 .flex-overwrite {
+    margin-left: 0;
+  }
+  .sn-flex .grow-md-4 {
+    flex-grow: 4;
+  }
+}
diff --git a/grid_sass.css b/grid_sass.css
new file mode 100644
index 0000000..e69de29
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..e0ee499
--- /dev/null
+++ b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "flex-grid",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build-grid": "lessc ./at_flex_grid/less/flex_grid.less > grid_less.css",
+    "node-sass": "copy con grid_sass.css | node-sass --output-style compressed ./at_flex_grid/sass/flex_grid.scss > grid_sass.css"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "less": "^3.10.3",
+    "node-sass": "^4.12.0"
+  }
+}