diff --git a/agnosticui-svelte/src/stories/Button.svelte b/agnosticui-svelte/src/stories/Button.svelte
index cbf0238e5..be5fcfae8 100644
--- a/agnosticui-svelte/src/stories/Button.svelte
+++ b/agnosticui-svelte/src/stories/Button.svelte
@@ -59,7 +59,7 @@
 </script>
 
 <style>
-  /*
+/*
 * Base Button Style
 *
 * Please note that we have two versions of this:
@@ -70,134 +70,122 @@
 * base skin of the button does not work for you, another option is to only
 * apply `.btn-base` and then set your own "button skin".
 */
-  .btn-base,
-  .btn {
-    /* TODO test this fallback override syntax is correct */
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    appearance: none;
-    cursor: pointer;
-    box-sizing: border-box;
-    transition-property: all;
-    transition-duration: 0.3s;
-  }
-
-  .btn-skin,
-  .btn {
-    --agnosticui-default-btn-bgcolor: #e9e9e9;
-    --agnosticui-default-btn-raised-from: #f8f8f8;
-    --agnosticui-default-btn-raised-to: #d8d8d8;
-    --agnosticui-default-btn-primary: #1087db;
-    --agnosticui-default-btn-primary-color: #ffffff;
-    --agnosticui-default-btn-primary-raised-from: #34a5f8;
-    --agnosticui-default-btn-primary-raised-to: #088ef0;
-    --agnosticui-default-btn-primary-raised-hover-from: #42abf8;
-    --agnosticui-default-btn-secondary: #ff4351;
-    --agnosticui-default-btn-secondary-color: #ffffff;
-    --agnosticui-default-btn-secondary-raised-from: #ff5d69;
-    --agnosticui-default-btn-secondary-raised-to: #ff2a39;
-    --agnosticui-default-btn-secondary-raised-hover-from: #ff6c77;
-    --agnosticui-default-btn-disabled-bg: #cccccc;
-    --agnosticui-default-btn-disabled-color: #aaaaaa;
-    --agnosticui-default-btn-font-color: #333333;
-    --agnosticui-default-btn-font-weight: 300;
-    --agnosticui-default-btn-font-size: 16px;
-    /* The next few properties are actually quite important and influenced by an interview I heard
+.btn-base,
+.btn {
+  /* TODO test this fallback override syntax is correct */
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition-property: all;
+  transition-duration: 0.3s;
+}
+
+.btn-skin,
+.btn {
+  --agnosticui-default-btn-bgcolor: #e9e9e9;
+  --agnosticui-default-btn-raised-from: #f8f8f8;
+  --agnosticui-default-btn-raised-to: #d8d8d8;
+  --agnosticui-default-btn-primary: #1087db;
+  --agnosticui-default-btn-primary-color: #ffffff;
+  --agnosticui-default-btn-primary-raised-from: #34a5f8;
+  --agnosticui-default-btn-primary-raised-to: #088ef0;
+  --agnosticui-default-btn-primary-raised-hover-from: #42abf8;
+  --agnosticui-default-btn-secondary: #ff4351;
+  --agnosticui-default-btn-secondary-color: #ffffff;
+  --agnosticui-default-btn-secondary-raised-from: #ff5d69;
+  --agnosticui-default-btn-secondary-raised-to: #ff2a39;
+  --agnosticui-default-btn-secondary-raised-hover-from: #ff6c77;
+  --agnosticui-default-btn-disabled-bg: #cccccc;
+  --agnosticui-default-btn-disabled-color: #aaaaaa;
+  --agnosticui-default-btn-font-color: #333333;
+  --agnosticui-default-btn-font-weight: 300;
+  --agnosticui-default-btn-font-size: 16px;
+  /* The next few properties are actually quite important and influenced by an interview I heard
   with Adam Wathan re building TailwindUI: https://fullstackradio.com/135 and it made me realize
   some inconsistencies we had in button heights across the variants available. Now fixed! The
   default button height is 38px (I like bigger fonts then them, but otherwise it's quite similar).
    */
-    --agnosticui-default-btn-border-size: 1px;
-    --agnosticui-default-btn-vertical-pad: 8px;
-    --agnosticui-default-btn-line-height: 20px;
-    --agnosticui-default-btn-side-padding: calc(
-      1.5 * var(--agnosticui-default-btn-font-size)
-    );
-    --agnosticui-default-btn-font-family: -apple-system, BlinkMacSystemFont,
-      "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans",
-      "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-      "Segoe UI Symbol";
-    --agnosticui-default-btn-radius: 4px;
-
-    color: var(
-      --agnosticui-btn-font-color,
-      var(--agnosticui-default-btn-font-color)
-    );
-    background-color: var(
-      --agnosticui-btn-bgcolor,
-      var(--agnosticui-default-btn-bgcolor)
-    );
-    border-color: var(
-      --agnosticui-btn-bgcolor,
-      var(--agnosticui-default-btn-bgcolor)
-    );
-    /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
-    border-style: solid;
-    /* this can be overriden, but it might mess with the balance of the button heights across variants */
-    border-width: var(
-      --agnosticui-btn-border-size,
-      var(--agnosticui-default-btn-border-size)
-    );
-
-    font-family: var(
-      --agnosticui-btn-font-family,
-      var(--agnosticui-default-btn-font-family)
-    );
-    font-weight: var(
-      --agnosticui-btn-font-weight,
-      var(--agnosticui-default-btn-font-weight)
-    );
-    font-size: var(
-      --agnosticui-btn-font-size,
-      var(--agnosticui-default-btn-font-size)
-    );
-    /* this can be overriden, but it might mess with the balance of the button heights across variants */
-    line-height: var(--agnosticui-default-btn-line-height);
-    text-decoration: none;
-    text-align: center;
-    /* this can be overriden, but it might mess with the balance of the button heights across variants */
-    padding-top: var(
-      --agnosticui-btn-vertical-pad,
-      var(--agnosticui-default-btn-vertical-pad)
-    );
-    padding-bottom: var(
-      --agnosticui-btn-vertical-pad,
-      var(--agnosticui-default-btn-vertical-pad)
-    );
-    padding-left: var(--agnosticui-default-btn-side-padding);
-    padding-right: var(--agnosticui-default-btn-side-padding);
-    outline: none;
-  }
-
-  .btn:visited {
-    color: var(--agnosticui-default-btn-font-color);
-  }
-
-  .btn:hover {
-    opacity: 0.7;
-    text-decoration: none;
-  }
-
-  .btn:active {
-    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
-    text-decoration: none;
-    transition-duration: 0s;
-    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
-  }
-
-  .btn:focus {
-    box-shadow: 0 0 0 3px rgba(55, 149, 225, 0.5);
-  }
-
-  /*
+  --agnosticui-default-btn-border-size: 1px;
+  --agnosticui-default-btn-vertical-pad: 8px;
+  --agnosticui-default-btn-line-height: 20px;
+  --agnosticui-default-btn-side-padding: calc(
+    1.5 * var(--agnosticui-default-btn-font-size)
+  );
+  --agnosticui-default-btn-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  --agnosticui-default-btn-radius: 4px;
+
+  color: var(
+    --agnosticui-btn-font-color,
+    var(--agnosticui-default-btn-font-color)
+  );
+  background-color: var(
+    --agnosticui-btn-bgcolor,
+    var(--agnosticui-default-btn-bgcolor)
+  );
+  border-color: var(
+    --agnosticui-btn-bgcolor,
+    var(--agnosticui-default-btn-bgcolor)
+  );
+  /* seems like a reasonable default as chrome picks `outset` which results in a weird 3d effect */
+  border-style: solid;
+  /* this can be overriden, but it might mess with the balance of the button heights across variants */
+  border-width: var(--agnosticui-btn-border-size, var(--agnosticui-default-btn-border-size));
+  
+  font-family: var(
+    --agnosticui-btn-font-family,
+    var(--agnosticui-default-btn-font-family)
+  );
+  font-weight: var(
+    --agnosticui-btn-font-weight,
+    var(--agnosticui-default-btn-font-weight)
+  );
+  font-size: var(
+    --agnosticui-btn-font-size,
+    var(--agnosticui-default-btn-font-size)
+  );
+  /* this can be overriden, but it might mess with the balance of the button heights across variants */
+  line-height: var(--agnosticui-default-btn-line-height);
+  text-decoration: none;
+  text-align: center;
+  /* this can be overriden, but it might mess with the balance of the button heights across variants */
+  padding-top: var(--agnosticui-btn-vertical-pad, var(--agnosticui-default-btn-vertical-pad));
+  padding-bottom: var(--agnosticui-btn-vertical-pad, var(--agnosticui-default-btn-vertical-pad));
+  padding-left: var(--agnosticui-default-btn-side-padding);
+  padding-right: var(--agnosticui-default-btn-side-padding);
+  outline: none;
+}
+
+.btn:visited {
+  color: var(--agnosticui-default-btn-font-color);
+}
+
+.btn:hover {
+  opacity: 0.7;
+  text-decoration: none;
+}
+
+.btn:active {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
+  text-decoration: none;
+  transition-duration: 0s;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+.btn:focus {
+  box-shadow: 0 0 0 3px rgba(55, 149, 225, 0.5);
+}
+
+/*
 * Disabled State
 *
 * The disabled state uses the class .disabled, is-disabled,
@@ -205,339 +193,331 @@
 * The use of !important is only added because this is a state
 * that must be applied to all buttons when in a disabled state.
 */
-  .btn.disabled,
-  .btn:disabled {
-    top: 0 !important;
-    background: var(
-      --agnosticui-btn-disabled-bg,
-      var(--agnosticui-default-btn-disabled-bg)
-    ) !important;
-    text-shadow: 0 1px 1px rgba(255, 255, 255, 1) !important;
-    /* primary, secondary, natural, all look same when disabled; and we don't want to
+.btn.disabled,
+.btn:disabled {
+  top: 0 !important;
+  background: var(
+    --agnosticui-btn-disabled-bg,
+    var(--agnosticui-default-btn-disabled-bg)
+  ) !important;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 1) !important;
+  /* primary, secondary, natural, all look same when disabled; and we don't want to
   have an inadvertant looking blue primary border when disabled so it's transparent */
-    border-color: transparent;
-    color: var(
-      --agnosticui-btn-disabled-color,
-      var(--agnosticui-default-btn-disabled-color)
-    ) !important;
-    cursor: default !important;
-    appearance: none !important;
-    box-shadow: none !important;
-    opacity: 0.8 !important;
-  }
-
-  .btn-primary {
-    background-color: var(
-      --agnosticui-btn-primary,
-      var(--agnosticui-default-btn-primary)
-    );
-    border-color: var(
-      --agnosticui-btn-primary,
-      var(--agnosticui-default-btn-primary)
-    );
-    color: var(
-      --agnosticui-btn-primary-color,
-      var(--agnosticui-default-btn-primary-color)
-    );
-  }
-
-  /* Border and font is primary. When hovered, we invert with primary background and white font */
-  .btn-primary.btn-bordered {
-    color: var(--agnosticui-btn-primary, var(--agnosticui-default-btn-primary));
-  }
-  .btn-primary.btn-bordered:hover,
-  .btn-primary.btn-bordered:focus {
-    background-color: var(
-      --agnosticui-btn-primary,
-      var(--agnosticui-default-btn-primary)
-    );
-    color: var(
-      --agnosticui-btn-primary-color,
-      var(--agnosticui-default-btn-primary-color)
-    );
-  }
-
-  .btn-primary:visited {
-    color: var(
-      --agnosticui-btn-primary-color,
-      var(--agnosticui-default-btn-primary-color)
-    );
-  }
-
-  .btn-secondary {
-    background-color: var(
-      --agnosticui-btn-secondary,
-      var(--agnosticui-default-btn-secondary)
-    );
-    border-color: var(
-      --agnosticui-btn-secondary,
-      var(--agnosticui-default-btn-secondary)
-    );
-    color: var(
-      --agnosticui-btn-secondary-color,
-      var(--agnosticui-default-btn-secondary-color)
-    );
-  }
-
-  /* Border and font is secondary. When hovered, we invert with secondary background and white font */
-  .btn-secondary.btn-bordered {
-    color: var(
-      --agnosticui-btn-secondary,
-      var(--agnosticui-default-btn-secondary)
-    );
-  }
-  .btn-secondary.btn-bordered:hover,
-  .btn-secondary.btn-bordered:focus {
-    background-color: var(
-      --agnosticui-btn-secondary,
-      var(--agnosticui-default-btn-secondary)
-    );
-    color: var(
-      --agnosticui-btn-secondary-color,
-      var(--agnosticui-default-btn-secondary-color)
-    );
-  }
-
-  .btn-secondary:visited {
-    color: var(
-      --agnosticui-btn-secondary-color,
-      var(--agnosticui-default-btn-secondary-color)
-    );
-  }
-
-  /*
+  border-color: transparent;
+  color: var(
+    --agnosticui-btn-disabled-color,
+    var(--agnosticui-default-btn-disabled-color)
+  ) !important;
+  cursor: default !important;
+  appearance: none !important;
+  box-shadow: none !important;
+  opacity: 0.8 !important;
+}
+
+.btn-primary {
+  background-color: var(
+    --agnosticui-btn-primary,
+    var(--agnosticui-default-btn-primary)
+  );
+  border-color: var(
+    --agnosticui-btn-primary,
+    var(--agnosticui-default-btn-primary)
+  );
+  color: var(
+    --agnosticui-btn-primary-color,
+    var(--agnosticui-default-btn-primary-color)
+  );
+}
+
+/* Border and font is primary. When hovered, we invert with primary background and white font */
+.btn-primary.btn-bordered {
+  color: var(--agnosticui-btn-primary, var(--agnosticui-default-btn-primary));
+}
+.btn-primary.btn-bordered:hover,
+.btn-primary.btn-bordered:focus {
+  background-color: var(
+    --agnosticui-btn-primary,
+    var(--agnosticui-default-btn-primary)
+  );
+  color: var(
+    --agnosticui-btn-primary-color,
+    var(--agnosticui-default-btn-primary-color)
+  );
+}
+
+.btn-primary:visited {
+  color: var(
+    --agnosticui-btn-primary-color,
+    var(--agnosticui-default-btn-primary-color)
+  );
+}
+
+.btn-secondary {
+  background-color: var(
+    --agnosticui-btn-secondary,
+    var(--agnosticui-default-btn-secondary)
+  );
+  border-color: var(
+    --agnosticui-btn-secondary,
+    var(--agnosticui-default-btn-secondary)
+  );
+  color: var(
+    --agnosticui-btn-secondary-color,
+    var(--agnosticui-default-btn-secondary-color)
+  );
+}
+
+/* Border and font is secondary. When hovered, we invert with secondary background and white font */
+.btn-secondary.btn-bordered {
+  color: var(--agnosticui-btn-secondary, var(--agnosticui-default-btn-secondary));
+}
+.btn-secondary.btn-bordered:hover,
+.btn-secondary.btn-bordered:focus {
+  background-color: var(
+    --agnosticui-btn-secondary,
+    var(--agnosticui-default-btn-secondary)
+  );
+  color: var(
+    --agnosticui-btn-secondary-color,
+    var(--agnosticui-default-btn-secondary-color)
+  );
+}
+
+.btn-secondary:visited {
+  color: var(
+    --agnosticui-btn-secondary-color,
+    var(--agnosticui-default-btn-secondary-color)
+  );
+}
+
+/*
 * Raised Buttons
 *
 * A classic looking button that offers
 * great depth and affordance.
 */
-  .btn-raised {
-    border-color: var(
-      --agnosticui-btn-bgcolor,
-      var(--agnosticui-default-btn-bgcolor)
-    );
-    border-style: solid;
-    background: -webkit-gradient(
-      linear,
-      left top,
-      left bottom,
-      from(#f6f6f6),
-      to(#e1e1e1)
-    );
-    /* Note that while one can customize some of these slightly, we essentially have hard-coded
+.btn-raised {
+  border-color: var(
+    --agnosticui-btn-bgcolor,
+    var(--agnosticui-default-btn-bgcolor)
+  );
+  border-style: solid;
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    from(#f6f6f6),
+    to(#e1e1e1)
+  );
+  /* Note that while one can customize some of these slightly, we essentially have hard-coded
   box shadow rgba values so they can't really do so drastically which is probably fine :) */
-    background: linear-gradient(
-      var(
-        --agnosticui-btn-raised-from,
-        var(--agnosticui-default-btn-raised-from)
-      ),
-      var(--agnosticui-btn-raised-to, var(--agnosticui-default-btn-raised-to))
-    );
-    -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3),
-      0 1px 2px rgba(0, 0, 0, 0.15);
-    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3),
-      0 1px 2px rgba(0, 0, 0, 0.15);
-  }
-  .btn-raised:hover,
-  .btn-raised:focus {
-    background: -webkit-gradient(
-      linear,
-      left top,
-      left bottom,
-      from(white),
-      to(gainsboro)
-    );
-    background: linear-gradient(to bottom, white, gainsboro);
-  }
-  .btn-raised.active {
-    /* TODO -- maybe this shouldn't be hard coded */
-    background: #eeeeee;
-    -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white;
-    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white;
-  }
-
-  /*
+  background: linear-gradient(
+    var(--agnosticui-btn-raised-from, var(--agnosticui-default-btn-raised-from)),
+    var(--agnosticui-btn-raised-to, var(--agnosticui-default-btn-raised-to))
+  );
+  -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3),
+    0 1px 2px rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.3),
+    0 1px 2px rgba(0, 0, 0, 0.15);
+}
+.btn-raised:hover,
+.btn-raised:focus {
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    from(white),
+    to(gainsboro)
+  );
+  background: linear-gradient(to bottom, white, gainsboro);
+}
+.btn-raised.active {
+  /* TODO -- maybe this shouldn't be hard coded */
+  background: #eeeeee;
+  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white;
+  box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 0px white;
+}
+
+/*
 * Raised Primary Buttons
 */
-  .btn-raised.btn-primary {
-    border-color: var(
-      --agnosticui-btn-primary-raised-to,
-      var(--agnosticui-default-btn-primary-raised-to)
-    );
-    background: -webkit-gradient(
-      linear,
-      left top,
-      left bottom,
-      from(
-        var(
-          --agnosticui-btn-primary-raised-from,
-          var(--agnosticui-default-btn-primary-raised-from)
-        )
-      ),
-      to(
-        var(
-          --agnosticui-btn-primary-raised-to,
-          var(--agnosticui-default-btn-primary-raised-to)
-        )
-      )
-    );
-    background: linear-gradient(
+.btn-raised.btn-primary {
+  border-color: var(
+    --agnosticui-btn-primary-raised-to,
+    var(--agnosticui-default-btn-primary-raised-to)
+  );
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    from(
       var(
         --agnosticui-btn-primary-raised-from,
         var(--agnosticui-default-btn-primary-raised-from)
-      ),
+      )
+    ),
+    to(
       var(
         --agnosticui-btn-primary-raised-to,
         var(--agnosticui-default-btn-primary-raised-to)
       )
-    );
-  }
-
-  .btn-raised.btn-primary:hover,
-  .btn-raised.btn-primary:focus {
-    background: linear-gradient(to bottom, #42abf8, #0888e6);
-    background: -webkit-gradient(
-      linear,
-      left top,
-      left bottom,
-      from(
-        var(
-          --agnosticui-btn-primary-raised-hover-from,
-          var(--agnosticui-default-btn-primary-raised-hover-from)
-        )
-      ),
-      to(
-        var(
-          --agnosticui-btn-primary-raised-to,
-          var(--agnosticui-default-btn-primary-raised-to)
-        )
-      )
-    );
-    background: linear-gradient(
+    )
+  );
+  background: linear-gradient(
+    var(
+      --agnosticui-btn-primary-raised-from,
+      var(--agnosticui-default-btn-primary-raised-from)
+    ),
+    var(
+      --agnosticui-btn-primary-raised-to,
+      var(--agnosticui-default-btn-primary-raised-to)
+    )
+  );
+}
+
+.btn-raised.btn-primary:hover,
+.btn-raised.btn-primary:focus {
+  background: linear-gradient(to bottom, #42abf8, #0888e6);
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    from(
       var(
         --agnosticui-btn-primary-raised-hover-from,
         var(--agnosticui-default-btn-primary-raised-hover-from)
-      ),
+      )
+    ),
+    to(
       var(
         --agnosticui-btn-primary-raised-to,
         var(--agnosticui-default-btn-primary-raised-to)
       )
-    );
-  }
+    )
+  );
+  background: linear-gradient(
+    var(
+      --agnosticui-btn-primary-raised-hover-from,
+      var(--agnosticui-default-btn-primary-raised-hover-from)
+    ),
+    var(
+      --agnosticui-btn-primary-raised-to,
+      var(--agnosticui-default-btn-primary-raised-to)
+    )
+  );
+}
 
-  .btn-raised.btn-primary:active,
-  .btn-raised.btn-primary.active {
-    opacity: 0.9;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
-  }
+.btn-raised.btn-primary:active,
+.btn-raised.btn-primary.active {
+  opacity: 0.9;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
+}
 
-  /*
+/*
 * Raised Secondary Buttons
 */
-  .btn-raised.btn-secondary {
-    border-color: var(
-      --agnosticui-btn-secondary-raised-to,
-      var(--agnosticui-default-btn-secondary-raised-to)
-    );
-    background: -webkit-gradient(
-      linear,
-      left top,
-      left bottom,
-      from(
-        var(
-          --agnosticui-btn-secondary-raised-from,
-          var(--agnosticui-default-btn-secondary-raised-from)
-        )
-      ),
-      to(
-        var(
-          --agnosticui-btn-secondary-raised-to,
-          var(--agnosticui-default-btn-secondary-raised-to)
-        )
-      )
-    );
-    background: linear-gradient(
+.btn-raised.btn-secondary {
+  border-color: var(
+    --agnosticui-btn-secondary-raised-to,
+    var(--agnosticui-default-btn-secondary-raised-to)
+  );
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    from(
       var(
         --agnosticui-btn-secondary-raised-from,
         var(--agnosticui-default-btn-secondary-raised-from)
-      ),
+      )
+    ),
+    to(
       var(
         --agnosticui-btn-secondary-raised-to,
         var(--agnosticui-default-btn-secondary-raised-to)
       )
-    );
-  }
-
-  .btn-raised.btn-secondary:hover,
-  .btn-raised.btn-secondary:focus {
-    background: linear-gradient(to bottom, #42abf8, #0888e6);
-    background: -webkit-gradient(
-      linear,
-      left top,
-      left bottom,
-      from(
-        var(
-          --agnosticui-btn-secondary-raised-hover-from,
-          var(--agnosticui-default-btn-secondary-raised-hover-from)
-        )
-      ),
-      to(
-        var(
-          --agnosticui-btn-secondary-raised-to,
-          var(--agnosticui-default-btn-secondary-raised-to)
-        )
-      )
-    );
-    background: linear-gradient(
+    )
+  );
+  background: linear-gradient(
+    var(
+      --agnosticui-btn-secondary-raised-from,
+      var(--agnosticui-default-btn-secondary-raised-from)
+    ),
+    var(
+      --agnosticui-btn-secondary-raised-to,
+      var(--agnosticui-default-btn-secondary-raised-to)
+    )
+  );
+}
+
+.btn-raised.btn-secondary:hover,
+.btn-raised.btn-secondary:focus {
+  background: linear-gradient(to bottom, #42abf8, #0888e6);
+  background: -webkit-gradient(
+    linear,
+    left top,
+    left bottom,
+    from(
       var(
         --agnosticui-btn-secondary-raised-hover-from,
         var(--agnosticui-default-btn-secondary-raised-hover-from)
-      ),
+      )
+    ),
+    to(
       var(
         --agnosticui-btn-secondary-raised-to,
         var(--agnosticui-default-btn-secondary-raised-to)
       )
-    );
-  }
+    )
+  );
+  background: linear-gradient(
+    var(
+      --agnosticui-btn-secondary-raised-hover-from,
+      var(--agnosticui-default-btn-secondary-raised-hover-from)
+    ),
+    var(
+      --agnosticui-btn-secondary-raised-to,
+      var(--agnosticui-default-btn-secondary-raised-to)
+    )
+  );
+}
 
-  .btn-raised.btn-secondary:active,
-  .btn-raised.btn-secondary.active {
-    opacity: 0.9;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
-  }
+.btn-raised.btn-secondary:active,
+.btn-raised.btn-secondary.active {
+  opacity: 0.9;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
+}
 
-  /**
+/**
   * Border Buttons
   */
-  .btn-bordered {
-    border-width: 1px;
-    background: transparent;
-  }
+.btn-bordered {
+  border-width: 1px;
+  background: transparent;
+}
 
-  /**
+/**
   * Sizes
   */
-  .btn-large {
-    font-size: calc(
-      var(--agnosticui-btn-font-size, var(--agnosticui-default-btn-font-size)) +
-        4px
-    );
-    height: 48px;
-    line-height: 48px;
-    padding: 0 48px;
-  }
-
-  .btn-small {
-    font-size: calc(
-      var(--agnosticui-btn-font-size, var(--agnosticui-default-btn-font-size)) -
-        4px
-    );
-    height: 32px;
-    line-height: 32px;
-    padding: 0 32px;
-  }
-
-  /**
+.btn-large {
+  font-size: calc(
+    var(--agnosticui-btn-font-size, var(--agnosticui-default-btn-font-size)) + 4px
+  );
+  height: 48px;
+  line-height: 48px;
+  padding: 0 48px;
+}
+
+.btn-small {
+  font-size: calc(
+    var(--agnosticui-btn-font-size, var(--agnosticui-default-btn-font-size)) - 4px
+  );
+  height: 32px;
+  line-height: 32px;
+  padding: 0 32px;
+}
+
+/**
   * Rounded
   */
   .btn-rounded {
@@ -546,11 +526,11 @@
       var(--agnosticui-default-btn-radius)
     );
   }
-
+  
   .btn-pill {
     border-radius: 200px;
   }
-
+  
   /*
   * Size Adjustment for equal height & width buttons
   *
@@ -562,11 +542,10 @@
     height: 40px;
     padding: 0 !important;
   }
-
+  
   .btn-circle-large {
     font-size: calc(
-      var(--agnosticui-btn-font-size, var(--agnosticui-default-btn-font-size)) +
-        4px
+      var(--agnosticui-btn-font-size, var(--agnosticui-default-btn-font-size)) + 4px
     );
     width: 48px;
     height: 48px;
@@ -574,42 +553,41 @@
 
   .btn-circle-small {
     font-size: calc(
-      var(--agnosticui-btn-font-size, var(--agnosticui-default-btn-font-size)) -
-        4px
+      var(--agnosticui-btn-font-size, var(--agnosticui-default-btn-font-size)) - 4px
     );
     width: 32px;
     height: 32px;
   }
 
-  /**
+/**
  * Button Block (stacked)
  */
-  .btn-block {
-    width: 100%;
-  }
-  /* This is a utility class used if you literally want to stack block buttons one after another.
+.btn-block {
+  width: 100%;
+}
+/* This is a utility class used if you literally want to stack block buttons one after another.
 Apply this class to the nth-of-type(2) onwards to ensure the borders line up properly. */
-  .btn-block-following {
-    margin-top: -1px;
-  }
+.btn-block-following {
+  margin-top: -1px;
+}
 
-  /**
+/**
  * Invisible buttons. Generally used for a Cancel or icon button that behaves like a button,
  * semantically and for a11y, but, does so without all the typical "button chrome" behind it.
  */
-  .btn-blank {
-    background-color: transparent;
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-  }
-  .btn-blank:hover,
-  .btn-blank:active,
-  .btn-blank:focus {
-    background: none;
-    outline: none;
-    box-shadow: none;
-  }
+.btn-blank {
+  background-color: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.btn-blank:hover,
+.btn-blank:active,
+.btn-blank:focus {
+  background: none;
+  outline: none;
+  box-shadow: none;
+}
 </style>
 
 <button {type} class={klasses} on:click={handleClick}>
diff --git a/agnosticui-vue/copystyles.js b/agnosticui-vue/copystyles.js
index 4a28db397..bbc8f4cc1 100644
--- a/agnosticui-vue/copystyles.js
+++ b/agnosticui-vue/copystyles.js
@@ -53,4 +53,11 @@ fs.writeFileSync('./src/stories/Header.vue', headerSynchronized, 'utf8');
 css = fs.readFileSync('../agnosticui-css/headernav.css', 'utf8');
 const headerNavVue = fs.readFileSync('./src/stories/HeaderNav.vue', 'utf8');
 const headerNavSynchronized = headerNavVue.replace(styleRegex, `<style module>\n${css}\n</style>`);
-fs.writeFileSync('./src/stories/HeaderNav.vue', headerNavSynchronized, 'utf8');
\ No newline at end of file
+fs.writeFileSync('./src/stories/HeaderNav.vue', headerNavSynchronized, 'utf8');
+
+
+/**
+ * FlexGrid
+ */
+css = fs.readFileSync('../agnosticui-css/flexboxgrid-custom.css', 'utf8');
+fs.writeFileSync('./src/stories/FlexGrid/FlexBoxGrid2Custom.module.css', css, 'utf8');
diff --git a/agnosticui-vue/src/stories/Button.stories.js b/agnosticui-vue/src/stories/Button.stories.js
index 6c3d80c9c..d4b89ba5a 100644
--- a/agnosticui-vue/src/stories/Button.stories.js
+++ b/agnosticui-vue/src/stories/Button.stories.js
@@ -18,7 +18,6 @@ export const Buttons = () => ({
   title: 'Buttons',
   components: { ButtonTests },
   template: `<button-tests />`,
-
 });
 Buttons.parameters = {
   docs: {
diff --git a/agnosticui-vue/src/stories/FlexGrid.stories.js b/agnosticui-vue/src/stories/FlexGrid.stories.js
new file mode 100644
index 000000000..d768b4f43
--- /dev/null
+++ b/agnosticui-vue/src/stories/FlexGrid.stories.js
@@ -0,0 +1,37 @@
+import FlexGrid from './FlexGrid/FlexGrid.vue';
+import FlexGridTests from './FlexGridTests.vue';
+// import FlexRow from './FlexGrid/FlexRow.js'
+// import FlexCol from './FlexGrid/FlexCol.js'
+// import styles from './FlexGrid/FlexGridExample.module.css'
+// const Field = ({ label = "Field" }) => <p className={styles.Field}>{label}</p>
+
+/*
+import AgnosticHeader from "./Header.vue";
+import AgnosticHeaderNav from "./HeaderNav.vue";
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { AgnosticHeader, AgnosticHeaderNav },
+  template: '<agnostic-header v-bind="$props"><template v-slot:logoleft><a href="#">Logo on Left</a></template><template v-slot:headernav><agnostic-header-nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li></ul></agnostic-header-nav></template><template v-slot:logoright><a href="#">Logo on Right</a></template></agnostic-header>'
+});
+
+*/
+export default {
+  title: 'FlexGrid',
+  component: FlexGrid,
+}
+
+export const Grid = () => ({
+  title: 'Grids',
+  components: { FlexGridTests },
+  template: '<flex-grid-tests />'
+});
+Grid.parameters = {
+  docs: {
+    source: {
+      code: `
+      /* TBD */
+      `
+    }
+  }
+}
\ No newline at end of file
diff --git a/agnosticui-vue/src/stories/FlexGrid/FlexBoxGrid2Custom.module.css b/agnosticui-vue/src/stories/FlexGrid/FlexBoxGrid2Custom.module.css
new file mode 100644
index 000000000..5d72d7f26
--- /dev/null
+++ b/agnosticui-vue/src/stories/FlexGrid/FlexBoxGrid2Custom.module.css
@@ -0,0 +1,1125 @@
+:root {
+  --agnosticui-default-sm-min: 576px;
+  --agnosticui-default-md-min: 768px;
+  --agnosticui-default-lg-min: 992px;
+  --agnosticui-default-xl-min: 1200px;
+}
+
+.flexgrid-container {
+  box-sizing: border-box;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@media only screen and (min-width: 576px) {
+  .flexgrid-container {
+    width: var(--agnosticui-sm-min, var(--agnosticui-default-sm-min));
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .flexgrid-container {
+    width: var(--agnosticui-md-min, var(--agnosticui-default-md-min));
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .flexgrid-container {
+    width: var(--agnosticui-lg-min, var(--agnosticui-default-lg-min));
+    max-width: 100%;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .flexgrid-container {
+    width: var(--agnosticui-xl-min, var(--agnosticui-default-xl-min));
+    max-width: 100%;
+  }
+}
+
+.row {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.row.reverse {
+  flex-direction: row-reverse;
+}
+
+.col.reverse {
+  flex-direction: column-reverse;
+}
+
+.col-xs,
+.col-xs-1,
+.col-xs-2,
+.col-xs-3,
+.col-xs-4,
+.col-xs-5,
+.col-xs-6,
+.col-xs-7,
+.col-xs-8,
+.col-xs-9,
+.col-xs-10,
+.col-xs-11,
+.col-xs-12,
+.col-xs-offset-0,
+.col-xs-offset-1,
+.col-xs-offset-2,
+.col-xs-offset-3,
+.col-xs-offset-4,
+.col-xs-offset-5,
+.col-xs-offset-6,
+.col-xs-offset-7,
+.col-xs-offset-8,
+.col-xs-offset-9,
+.col-xs-offset-10,
+.col-xs-offset-11,
+.col-xs-offset-12,
+.col-sm,
+.col-sm-1,
+.col-sm-2,
+.col-sm-3,
+.col-sm-4,
+.col-sm-5,
+.col-sm-6,
+.col-sm-7,
+.col-sm-8,
+.col-sm-9,
+.col-sm-10,
+.col-sm-11,
+.col-sm-12,
+.col-sm-offset-0,
+.col-sm-offset-1,
+.col-sm-offset-2,
+.col-sm-offset-3,
+.col-sm-offset-4,
+.col-sm-offset-5,
+.col-sm-offset-6,
+.col-sm-offset-7,
+.col-sm-offset-8,
+.col-sm-offset-9,
+.col-sm-offset-10,
+.col-sm-offset-11,
+.col-sm-offset-12,
+.col-md,
+.col-md-1,
+.col-md-2,
+.col-md-3,
+.col-md-4,
+.col-md-5,
+.col-md-6,
+.col-md-7,
+.col-md-8,
+.col-md-9,
+.col-md-10,
+.col-md-11,
+.col-md-12,
+.col-md-offset-0,
+.col-md-offset-1,
+.col-md-offset-2,
+.col-md-offset-3,
+.col-md-offset-4,
+.col-md-offset-5,
+.col-md-offset-6,
+.col-md-offset-7,
+.col-md-offset-8,
+.col-md-offset-9,
+.col-md-offset-10,
+.col-md-offset-11,
+.col-md-offset-12,
+.col-lg,
+.col-lg-1,
+.col-lg-2,
+.col-lg-3,
+.col-lg-4,
+.col-lg-5,
+.col-lg-6,
+.col-lg-7,
+.col-lg-8,
+.col-lg-9,
+.col-lg-10,
+.col-lg-11,
+.col-lg-12,
+.col-lg-offset-0,
+.col-lg-offset-1,
+.col-lg-offset-2,
+.col-lg-offset-3,
+.col-lg-offset-4,
+.col-lg-offset-5,
+.col-lg-offset-6,
+.col-lg-offset-7,
+.col-lg-offset-8,
+.col-lg-offset-9,
+.col-lg-offset-10,
+.col-lg-offset-11,
+.col-lg-offset-12,
+.col-xl,
+.col-xl-1,
+.col-xl-2,
+.col-xl-3,
+.col-xl-4,
+.col-xl-5,
+.col-xl-6,
+.col-xl-7,
+.col-xl-8,
+.col-xl-9,
+.col-xl-10,
+.col-xl-11,
+.col-xl-12,
+.col-xl-offset-0,
+.col-xl-offset-1,
+.col-xl-offset-2,
+.col-xl-offset-3,
+.col-xl-offset-4,
+.col-xl-offset-5,
+.col-xl-offset-6,
+.col-xl-offset-7,
+.col-xl-offset-8,
+.col-xl-offset-9,
+.col-xl-offset-10,
+.col-xl-offset-11,
+.col-xl-offset-12 {
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  flex-basis: 100%;
+  max-width: 100%;
+}
+
+.col-xs {
+  flex-grow: 1;
+  flex-basis: 0;
+  max-width: 100%;
+}
+
+.col-xs-1 {
+  flex-basis: 8.33333333%;
+  max-width: 8.33333333%;
+}
+
+.col-xs-2 {
+  flex-basis: 16.66666667%;
+  max-width: 16.66666667%;
+}
+
+.col-xs-3 {
+  flex-basis: 25%;
+  max-width: 25%;
+}
+
+.col-xs-4 {
+  flex-basis: 33.33333333%;
+  max-width: 33.33333333%;
+}
+
+.col-xs-5 {
+  flex-basis: 41.66666667%;
+  max-width: 41.66666667%;
+}
+
+.col-xs-6 {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.col-xs-7 {
+  flex-basis: 58.33333333%;
+  max-width: 58.33333333%;
+}
+
+.col-xs-8 {
+  flex-basis: 66.66666667%;
+  max-width: 66.66666667%;
+}
+
+.col-xs-9 {
+  flex-basis: 75%;
+  max-width: 75%;
+}
+
+.col-xs-10 {
+  flex-basis: 83.33333333%;
+  max-width: 83.33333333%;
+}
+
+.col-xs-11 {
+  flex-basis: 91.66666667%;
+  max-width: 91.66666667%;
+}
+
+.col-xs-12 {
+  flex-basis: 100%;
+  max-width: 100%;
+}
+
+.col-xs-offset-0 {
+  margin-left: 0;
+}
+
+.col-xs-offset-1 {
+  margin-left: 8.33333333%;
+}
+
+.col-xs-offset-2 {
+  margin-left: 16.66666667%;
+}
+
+.col-xs-offset-3 {
+  margin-left: 25%;
+}
+
+.col-xs-offset-4 {
+  margin-left: 33.33333333%;
+}
+
+.col-xs-offset-5 {
+  margin-left: 41.66666667%;
+}
+
+.col-xs-offset-6 {
+  margin-left: 50%;
+}
+
+.col-xs-offset-7 {
+  margin-left: 58.33333333%;
+}
+
+.col-xs-offset-8 {
+  margin-left: 66.66666667%;
+}
+
+.col-xs-offset-9 {
+  margin-left: 75%;
+}
+
+.col-xs-offset-10 {
+  margin-left: 83.33333333%;
+}
+
+.col-xs-offset-11 {
+  margin-left: 91.66666667%;
+}
+
+.start-xs {
+  justify-content: flex-start;
+  text-align: start;
+}
+
+.center-xs {
+  justify-content: center;
+  text-align: center;
+}
+
+.end-xs {
+  justify-content: flex-end;
+  text-align: end;
+}
+
+.top-xs {
+  align-items: flex-start;
+}
+
+.middle-xs {
+  align-items: center;
+}
+
+.bottom-xs {
+  align-items: flex-end;
+}
+
+.around-xs {
+  justify-content: space-around;
+}
+
+.between-xs {
+  justify-content: space-between;
+}
+
+.first-xs {
+  order: -1;
+}
+
+.last-xs {
+  order: 1;
+}
+
+.initial-order-xs {
+  order: initial;
+}
+
+@media only screen and (min-width: 576px) {
+  .col-sm {
+    flex-grow: 1;
+    flex-basis: 0;
+    max-width: 100%;
+  }
+
+  .col-sm-1 {
+    flex-basis: 8.33333333%;
+    max-width: 8.33333333%;
+  }
+
+  .col-sm-2 {
+    flex-basis: 16.66666667%;
+    max-width: 16.66666667%;
+  }
+
+  .col-sm-3 {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+
+  .col-sm-4 {
+    flex-basis: 33.33333333%;
+    max-width: 33.33333333%;
+  }
+
+  .col-sm-5 {
+    flex-basis: 41.66666667%;
+    max-width: 41.66666667%;
+  }
+
+  .col-sm-6 {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+
+  .col-sm-7 {
+    flex-basis: 58.33333333%;
+    max-width: 58.33333333%;
+  }
+
+  .col-sm-8 {
+    flex-basis: 66.66666667%;
+    max-width: 66.66666667%;
+  }
+
+  .col-sm-9 {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+
+  .col-sm-10 {
+    flex-basis: 83.33333333%;
+    max-width: 83.33333333%;
+  }
+
+  .col-sm-11 {
+    flex-basis: 91.66666667%;
+    max-width: 91.66666667%;
+  }
+
+  .col-sm-12 {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+
+  .col-sm-offset-0 {
+    margin-left: 0;
+  }
+
+  .col-sm-offset-1 {
+    margin-left: 8.33333333%;
+  }
+
+  .col-sm-offset-2 {
+    margin-left: 16.66666667%;
+  }
+
+  .col-sm-offset-3 {
+    margin-left: 25%;
+  }
+
+  .col-sm-offset-4 {
+    margin-left: 33.33333333%;
+  }
+
+  .col-sm-offset-5 {
+    margin-left: 41.66666667%;
+  }
+
+  .col-sm-offset-6 {
+    margin-left: 50%;
+  }
+
+  .col-sm-offset-7 {
+    margin-left: 58.33333333%;
+  }
+
+  .col-sm-offset-8 {
+    margin-left: 66.66666667%;
+  }
+
+  .col-sm-offset-9 {
+    margin-left: 75%;
+  }
+
+  .col-sm-offset-10 {
+    margin-left: 83.33333333%;
+  }
+
+  .col-sm-offset-11 {
+    margin-left: 91.66666667%;
+  }
+
+  .start-sm {
+    justify-content: flex-start;
+    text-align: start;
+  }
+
+  .center-sm {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .end-sm {
+    justify-content: flex-end;
+    text-align: end;
+  }
+
+  .top-sm {
+    align-items: flex-start;
+  }
+
+  .middle-sm {
+    align-items: center;
+  }
+
+  .bottom-sm {
+    align-items: flex-end;
+  }
+
+  .around-sm {
+    justify-content: space-around;
+  }
+
+  .between-sm {
+    justify-content: space-between;
+  }
+
+  .first-sm {
+    order: -1;
+  }
+
+  .last-sm {
+    order: 1;
+  }
+
+  .initial-order-sm {
+    order: initial;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .col-md,
+  .col-md-1,
+  .col-md-2,
+  .col-md-3,
+  .col-md-4,
+  .col-md-5,
+  .col-md-6,
+  .col-md-7,
+  .col-md-8,
+  .col-md-9,
+  .col-md-10,
+  .col-md-11,
+  .col-md-12,
+  .col-md-offset-0,
+  .col-md-offset-1,
+  .col-md-offset-2,
+  .col-md-offset-3,
+  .col-md-offset-4,
+  .col-md-offset-5,
+  .col-md-offset-6,
+  .col-md-offset-7,
+  .col-md-offset-8,
+  .col-md-offset-9,
+  .col-md-offset-10,
+  .col-md-offset-11,
+  .col-md-offset-12 {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+  }
+
+  .col-md {
+    flex-grow: 1;
+    flex-basis: 0;
+    max-width: 100%;
+  }
+
+  .col-md-1 {
+    flex-basis: 8.33333333%;
+    max-width: 8.33333333%;
+  }
+
+  .col-md-2 {
+    flex-basis: 16.66666667%;
+    max-width: 16.66666667%;
+  }
+
+  .col-md-3 {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+
+  .col-md-4 {
+    flex-basis: 33.33333333%;
+    max-width: 33.33333333%;
+  }
+
+  .col-md-5 {
+    flex-basis: 41.66666667%;
+    max-width: 41.66666667%;
+  }
+
+  .col-md-6 {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+
+  .col-md-7 {
+    flex-basis: 58.33333333%;
+    max-width: 58.33333333%;
+  }
+
+  .col-md-8 {
+    flex-basis: 66.66666667%;
+    max-width: 66.66666667%;
+  }
+
+  .col-md-9 {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+
+  .col-md-10 {
+    flex-basis: 83.33333333%;
+    max-width: 83.33333333%;
+  }
+
+  .col-md-11 {
+    flex-basis: 91.66666667%;
+    max-width: 91.66666667%;
+  }
+
+  .col-md-12 {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+
+  .col-md-offset-0 {
+    margin-left: 0;
+  }
+
+  .col-md-offset-1 {
+    margin-left: 8.33333333%;
+  }
+
+  .col-md-offset-2 {
+    margin-left: 16.66666667%;
+  }
+
+  .col-md-offset-3 {
+    margin-left: 25%;
+  }
+
+  .col-md-offset-4 {
+    margin-left: 33.33333333%;
+  }
+
+  .col-md-offset-5 {
+    margin-left: 41.66666667%;
+  }
+
+  .col-md-offset-6 {
+    margin-left: 50%;
+  }
+
+  .col-md-offset-7 {
+    margin-left: 58.33333333%;
+  }
+
+  .col-md-offset-8 {
+    margin-left: 66.66666667%;
+  }
+
+  .col-md-offset-9 {
+    margin-left: 75%;
+  }
+
+  .col-md-offset-10 {
+    margin-left: 83.33333333%;
+  }
+
+  .col-md-offset-11 {
+    margin-left: 91.66666667%;
+  }
+
+  .start-md {
+    justify-content: flex-start;
+    text-align: start;
+  }
+
+  .center-md {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .end-md {
+    justify-content: flex-end;
+    text-align: end;
+  }
+
+  .top-md {
+    align-items: flex-start;
+  }
+
+  .middle-md {
+    align-items: center;
+  }
+
+  .bottom-md {
+    align-items: flex-end;
+  }
+
+  .around-md {
+    justify-content: space-around;
+  }
+
+  .between-md {
+    justify-content: space-between;
+  }
+
+  .first-md {
+    order: -1;
+  }
+
+  .last-md {
+    order: 1;
+  }
+
+  .initial-order-md {
+    order: initial;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .col-lg,
+  .col-lg-1,
+  .col-lg-2,
+  .col-lg-3,
+  .col-lg-4,
+  .col-lg-5,
+  .col-lg-6,
+  .col-lg-7,
+  .col-lg-8,
+  .col-lg-9,
+  .col-lg-10,
+  .col-lg-11,
+  .col-lg-12,
+  .col-lg-offset-0,
+  .col-lg-offset-1,
+  .col-lg-offset-2,
+  .col-lg-offset-3,
+  .col-lg-offset-4,
+  .col-lg-offset-5,
+  .col-lg-offset-6,
+  .col-lg-offset-7,
+  .col-lg-offset-8,
+  .col-lg-offset-9,
+  .col-lg-offset-10,
+  .col-lg-offset-11,
+  .col-lg-offset-12 {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+  }
+
+  .col-lg {
+    flex-grow: 1;
+    flex-basis: 0;
+    max-width: 100%;
+  }
+
+  .col-lg-1 {
+    flex-basis: 8.33333333%;
+    max-width: 8.33333333%;
+  }
+
+  .col-lg-2 {
+    flex-basis: 16.66666667%;
+    max-width: 16.66666667%;
+  }
+
+  .col-lg-3 {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+
+  .col-lg-4 {
+    flex-basis: 33.33333333%;
+    max-width: 33.33333333%;
+  }
+
+  .col-lg-5 {
+    flex-basis: 41.66666667%;
+    max-width: 41.66666667%;
+  }
+
+  .col-lg-6 {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+
+  .col-lg-7 {
+    flex-basis: 58.33333333%;
+    max-width: 58.33333333%;
+  }
+
+  .col-lg-8 {
+    flex-basis: 66.66666667%;
+    max-width: 66.66666667%;
+  }
+
+  .col-lg-9 {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+
+  .col-lg-10 {
+    flex-basis: 83.33333333%;
+    max-width: 83.33333333%;
+  }
+
+  .col-lg-11 {
+    flex-basis: 91.66666667%;
+    max-width: 91.66666667%;
+  }
+
+  .col-lg-12 {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+
+  .col-lg-offset-0 {
+    margin-left: 0;
+  }
+
+  .col-lg-offset-1 {
+    margin-left: 8.33333333%;
+  }
+
+  .col-lg-offset-2 {
+    margin-left: 16.66666667%;
+  }
+
+  .col-lg-offset-3 {
+    margin-left: 25%;
+  }
+
+  .col-lg-offset-4 {
+    margin-left: 33.33333333%;
+  }
+
+  .col-lg-offset-5 {
+    margin-left: 41.66666667%;
+  }
+
+  .col-lg-offset-6 {
+    margin-left: 50%;
+  }
+
+  .col-lg-offset-7 {
+    margin-left: 58.33333333%;
+  }
+
+  .col-lg-offset-8 {
+    margin-left: 66.66666667%;
+  }
+
+  .col-lg-offset-9 {
+    margin-left: 75%;
+  }
+
+  .col-lg-offset-10 {
+    margin-left: 83.33333333%;
+  }
+
+  .col-lg-offset-11 {
+    margin-left: 91.66666667%;
+  }
+
+  .start-lg {
+    justify-content: flex-start;
+    text-align: start;
+  }
+
+  .center-lg {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .end-lg {
+    justify-content: flex-end;
+    text-align: end;
+  }
+
+  .top-lg {
+    align-items: flex-start;
+  }
+
+  .middle-lg {
+    align-items: center;
+  }
+
+  .bottom-lg {
+    align-items: flex-end;
+  }
+
+  .around-lg {
+    justify-content: space-around;
+  }
+
+  .between-lg {
+    justify-content: space-between;
+  }
+
+  .first-lg {
+    order: -1;
+  }
+
+  .last-lg {
+    order: 1;
+  }
+
+  .initial-order-lg {
+    order: initial;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .col-xl,
+  .col-xl-1,
+  .col-xl-2,
+  .col-xl-3,
+  .col-xl-4,
+  .col-xl-5,
+  .col-xl-6,
+  .col-xl-7,
+  .col-xl-8,
+  .col-xl-9,
+  .col-xl-10,
+  .col-xl-11,
+  .col-xl-12,
+  .col-xl-offset-0,
+  .col-xl-offset-1,
+  .col-xl-offset-2,
+  .col-xl-offset-3,
+  .col-xl-offset-4,
+  .col-xl-offset-5,
+  .col-xl-offset-6,
+  .col-xl-offset-7,
+  .col-xl-offset-8,
+  .col-xl-offset-9,
+  .col-xl-offset-10,
+  .col-xl-offset-11,
+  .col-xl-offset-12 {
+    box-sizing: border-box;
+    flex: 0 0 auto;
+  }
+
+  .col-xl {
+    flex-grow: 1;
+    flex-basis: 0;
+    max-width: 100%;
+  }
+
+  .col-xl-1 {
+    flex-basis: 8.33333333%;
+    max-width: 8.33333333%;
+  }
+
+  .col-xl-2 {
+    flex-basis: 16.66666667%;
+    max-width: 16.66666667%;
+  }
+
+  .col-xl-3 {
+    flex-basis: 25%;
+    max-width: 25%;
+  }
+
+  .col-xl-4 {
+    flex-basis: 33.33333333%;
+    max-width: 33.33333333%;
+  }
+
+  .col-xl-5 {
+    flex-basis: 41.66666667%;
+    max-width: 41.66666667%;
+  }
+
+  .col-xl-6 {
+    flex-basis: 50%;
+    max-width: 50%;
+  }
+
+  .col-xl-7 {
+    flex-basis: 58.33333333%;
+    max-width: 58.33333333%;
+  }
+
+  .col-xl-8 {
+    flex-basis: 66.66666667%;
+    max-width: 66.66666667%;
+  }
+
+  .col-xl-9 {
+    flex-basis: 75%;
+    max-width: 75%;
+  }
+
+  .col-xl-10 {
+    flex-basis: 83.33333333%;
+    max-width: 83.33333333%;
+  }
+
+  .col-xl-11 {
+    flex-basis: 91.66666667%;
+    max-width: 91.66666667%;
+  }
+
+  .col-xl-12 {
+    flex-basis: 100%;
+    max-width: 100%;
+  }
+
+  .col-xl-offset-0 {
+    margin-left: 0;
+  }
+
+  .col-xl-offset-1 {
+    margin-left: 8.33333333%;
+  }
+
+  .col-xl-offset-2 {
+    margin-left: 16.66666667%;
+  }
+
+  .col-xl-offset-3 {
+    margin-left: 25%;
+  }
+
+  .col-xl-offset-4 {
+    margin-left: 33.33333333%;
+  }
+
+  .col-xl-offset-5 {
+    margin-left: 41.66666667%;
+  }
+
+  .col-xl-offset-6 {
+    margin-left: 50%;
+  }
+
+  .col-xl-offset-7 {
+    margin-left: 58.33333333%;
+  }
+
+  .col-xl-offset-8 {
+    margin-left: 66.66666667%;
+  }
+
+  .col-xl-offset-9 {
+    margin-left: 75%;
+  }
+
+  .col-xl-offset-10 {
+    margin-left: 83.33333333%;
+  }
+
+  .col-xl-offset-11 {
+    margin-left: 91.66666667%;
+  }
+
+  .start-xl {
+    justify-content: flex-start;
+    text-align: start;
+  }
+
+  .center-xl {
+    justify-content: center;
+    text-align: center;
+  }
+
+  .end-xl {
+    justify-content: flex-end;
+    text-align: end;
+  }
+
+  .top-xl {
+    align-items: flex-start;
+  }
+
+  .middle-xl {
+    align-items: center;
+  }
+
+  .bottom-xl {
+    align-items: flex-end;
+  }
+
+  .around-xl {
+    justify-content: space-around;
+  }
+
+  .between-xl {
+    justify-content: space-between;
+  }
+
+  .first-xl {
+    order: -1;
+  }
+
+  .last-xl {
+    order: 1;
+  }
+
+  .initial-order-xl {
+    order: initial;
+  }
+}
+
+@media only screen and (max-width: 576px) {
+  .hidden-xs {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 576px) and (max-width: 768px) {
+  .hidden-sm {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 992px) {
+  .hidden-md {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1200px) {
+  .hidden-lg {
+    display: none;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .hidden-xl {
+    display: none;
+  }
+}
diff --git a/agnosticui-vue/src/stories/FlexGrid/FlexCol.js b/agnosticui-vue/src/stories/FlexGrid/FlexCol.js
new file mode 100644
index 000000000..e046df0f0
--- /dev/null
+++ b/agnosticui-vue/src/stories/FlexGrid/FlexCol.js
@@ -0,0 +1,95 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import createProps from './createProps'
+import getClass from './classNames'
+import { ColumnSizeType, ViewportSizeType } from './types'
+
+const propTypes = {
+  /** xs - number of units when viewport is "extra small" */
+  xs: ColumnSizeType,
+  /** sm - number of units when viewport is "small" */
+  sm: ColumnSizeType,
+  /** md - number of units when viewport is "medium" */
+  md: ColumnSizeType,
+  /** lg - number of units when viewport is "large" */
+  lg: ColumnSizeType,
+  /** xl - number of units when viewport is "extra large" */
+  xl: ColumnSizeType,
+  /** xsOffset - number of units to offset when viewport is "extra small" */
+  xsOffset: PropTypes.number,
+  /** smOffset - number of units to offset when viewport is "small" */
+  smOffset: PropTypes.number,
+  /** mdOffset - number of units to offset when viewport is "medium" */
+  mdOffset: PropTypes.number,
+  /** lgOffset - number of units to offset when viewport is "large" */
+  lgOffset: PropTypes.number,
+  /** xlOffset - number of units to offset when viewport is "extra large" */
+  xlOffset: PropTypes.number,
+  /** first - Forces a column to appear first */
+  first: ViewportSizeType,
+  /** last - Forces a column to appear last */
+  last: ViewportSizeType,
+  /** className - additional custom class to use */
+  className: PropTypes.string,
+  /** tagName - tag to use defaults to div */
+  tagName: PropTypes.string,
+  /** children - react children */
+  children: PropTypes.node,
+}
+
+const classMap = {
+  xs: 'col-xs',
+  sm: 'col-sm',
+  md: 'col-md',
+  lg: 'col-lg',
+  xl: 'col-xl',
+  xsOffset: 'col-xs-offset',
+  smOffset: 'col-sm-offset',
+  mdOffset: 'col-md-offset',
+  lgOffset: 'col-lg-offset',
+  xlOffset: 'col-xl-offset',
+}
+
+function isInteger(value) {
+  return (
+    typeof value === 'number' && isFinite(value) && Math.floor(value) === value
+  )
+}
+
+function getColClassNames(props) {
+  const extraClasses = []
+
+  if (props.className) {
+    extraClasses.push(props.className)
+  }
+
+  if (props.first) {
+    extraClasses.push(getClass('first-' + props.first))
+  }
+
+  if (props.last) {
+    extraClasses.push(getClass('last-' + props.last))
+  }
+
+  return Object.keys(props)
+    .filter((key) => classMap[key])
+    .map((key) =>
+      getClass(
+        isInteger(props[key]) ? classMap[key] + '-' + props[key] : classMap[key]
+      )
+    )
+    .concat(extraClasses)
+}
+
+export function getColumnProps(props) {
+  return createProps(propTypes, props, getColClassNames(props))
+}
+
+const FlexCol = (props) => {
+  const { tagName, ...columnProps } = props
+  return React.createElement(tagName || 'div', getColumnProps(columnProps))
+}
+
+FlexCol.propTypes = propTypes
+
+export default FlexCol;
diff --git a/agnosticui-vue/src/stories/FlexGrid/FlexGrid.test.js b/agnosticui-vue/src/stories/FlexGrid/FlexGrid.test.js
new file mode 100644
index 000000000..821614259
--- /dev/null
+++ b/agnosticui-vue/src/stories/FlexGrid/FlexGrid.test.js
@@ -0,0 +1,37 @@
+import FlexGrid from './FlexGrid';
+import FlexRow from './FlexRow';
+// import FlexCol from './FlexCol';
+// import styles from './FlexGridExample.module.css'
+import renderer from 'react-test-renderer'
+
+// const Field = () => <p className={styles.Field}>Field</p>
+
+describe('FlexGrid', () => {
+  describe('API', () => {
+    test('exports properly', () => {
+      expect(FlexGrid).toBeDefined()
+      expect(FlexRow).toBeDefined()
+      // expect(FlexCol).toBeDefined()
+    })
+  })
+
+  xdescribe('rendering component', () => {
+    test('default', () => {
+      const tree = renderer
+        .create(
+          <FlexGrid>
+            <FlexRow>
+              <FlexCol xs={12} sm={4} lg={6}>
+                <span>yo</span>
+              </FlexCol>
+              <FlexCol xs={12} sm={4} lg={6}>
+                <span>yo</span>
+              </FlexCol>
+            </FlexRow>
+          </FlexGrid>
+        )
+        .toJSON()
+      expect(tree).toMatchSnapshot()
+    })
+  })
+})
diff --git a/agnosticui-vue/src/stories/FlexGrid/FlexGrid.vue b/agnosticui-vue/src/stories/FlexGrid/FlexGrid.vue
new file mode 100644
index 000000000..76d465176
--- /dev/null
+++ b/agnosticui-vue/src/stories/FlexGrid/FlexGrid.vue
@@ -0,0 +1,33 @@
+<template>
+  <component :is="tagName" :class="classNames">
+    <slot />
+  </component>
+</template>
+<script>
+import getClass from "./classNames";
+export default {
+  name: "agnostic-flexgrid",
+  computed: {
+    classNames() {
+      const klasses = [this.customClasses, this.containerClass];
+      // console.log("in classNames() -- klasses: ", klasses);
+      return klasses;
+    },
+    containerClass() {
+      const containerKlass = getClass("flexgrid-container");
+      // console.log("in containerClass() -- containerKlass: ", containerKlass);
+      return containerKlass;
+    },
+  },
+  props: {
+    customClasses: {
+      type: String,
+      default: "",
+    },
+    tagName: {
+      type: String,
+      default: "div",
+    },
+  },
+};
+</script>
diff --git a/agnosticui-vue/src/stories/FlexGrid/FlexRow.vue b/agnosticui-vue/src/stories/FlexGrid/FlexRow.vue
new file mode 100644
index 000000000..47c28cedd
--- /dev/null
+++ b/agnosticui-vue/src/stories/FlexGrid/FlexRow.vue
@@ -0,0 +1,66 @@
+<template>
+  <component :is="tagName" :class="classNames">
+    <slot />
+  </component>
+</template>
+<script>
+import getClass from "./classNames";
+import { ViewportSizeTypeProp } from "./types";
+const rowKeys = [
+  "start",
+  "center",
+  "end",
+  "top",
+  "middle",
+  "bottom",
+  "around",
+  "between",
+];
+
+export default {
+  name: "agnostic-flexrow",
+  computed: {
+    classNames() {
+      const modifiers = [this.customClasses, getClass("row")];
+
+      for (let i = 0; i < rowKeys.length; ++i) {
+        const key = rowKeys[i];
+        console.log("key: ", key);
+        const value = this[key];
+        console.log("value: ", value);
+        if (value) {
+          modifiers.push(getClass(`${key}-${value}`));
+        }
+      }
+
+      if (this.reverse) {
+        modifiers.push(getClass("reverse"));
+      }
+      return modifiers;
+    },
+  },
+  props: {
+    // see https://roylee0704.github.io/react-flexbox-grid/
+    reverse: {
+      type: Boolean,
+      default: false,
+    },
+    start: ViewportSizeTypeProp,
+    center: ViewportSizeTypeProp,
+    end: ViewportSizeTypeProp,
+    top: ViewportSizeTypeProp,
+    middle: ViewportSizeTypeProp,
+    bottom: ViewportSizeTypeProp,
+    around: ViewportSizeTypeProp,
+    between: ViewportSizeTypeProp,
+    customClasses: {
+      type: String,
+      default: "",
+    },
+    tagName: {
+      type: String,
+      default: "div",
+    },
+  },
+};
+</script>
diff --git a/agnosticui-vue/src/stories/FlexGrid/License.md b/agnosticui-vue/src/stories/FlexGrid/License.md
new file mode 100644
index 000000000..524e28413
--- /dev/null
+++ b/agnosticui-vue/src/stories/FlexGrid/License.md
@@ -0,0 +1,17 @@
+MIT License
+
+Copyright 2018 Roy Lee
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+---
+
+Here's a link to the original author's GitHub for this software:
+
+https://github.com/roylee0704/react-flexbox-grid/blob/master/package.json#L88
+
+Note that we looked for a License file in the react-flexbox-grid GitHub repository, but there was none that we could find but it was clearly listed as MIT in the README.md and package.json. Given that, I've added the MIT License above explicitly crediting the original author, Roy Lee.
diff --git a/agnosticui-vue/src/stories/FlexGrid/classNames.js b/agnosticui-vue/src/stories/FlexGrid/classNames.js
new file mode 100644
index 000000000..0b776a991
--- /dev/null
+++ b/agnosticui-vue/src/stories/FlexGrid/classNames.js
@@ -0,0 +1,5 @@
+import styles from './FlexBoxGrid2Custom.module.css'
+
+export default function getClass(className) {
+  return styles && styles[className] ? styles[className] : className
+}
diff --git a/agnosticui-vue/src/stories/FlexGrid/createProps.js b/agnosticui-vue/src/stories/FlexGrid/createProps.js
new file mode 100644
index 000000000..c6615ef25
--- /dev/null
+++ b/agnosticui-vue/src/stories/FlexGrid/createProps.js
@@ -0,0 +1,10 @@
+export default function createProps(propTypes, props, classNames) {
+  const newProps = {}
+
+  Object.keys(props)
+    .filter((key) => key === 'children' || !propTypes[key])
+    .forEach((key) => (newProps[key] = props[key]))
+
+  const className = classNames.filter((cn) => cn).join(' ')
+  return Object.assign({}, newProps, { className })
+}
diff --git a/agnosticui-vue/src/stories/FlexGrid/createProps.test.js b/agnosticui-vue/src/stories/FlexGrid/createProps.test.js
new file mode 100644
index 000000000..99b474b36
--- /dev/null
+++ b/agnosticui-vue/src/stories/FlexGrid/createProps.test.js
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import createProps from './createProps';
+
+const propTypes = {
+  b: PropTypes.bool,
+  s: PropTypes.string,
+  children: PropTypes.node,
+}
+test('removes prop types besides children', async () => {
+  const classNames = ['class_a', 'class_b']
+  const props = {
+    s: 'string', // expected: gets removed
+    b: true, // expected: gets removed
+    style: 'color: hotpink;', // expected: preserved
+    children: 'le children',
+  }
+
+  const result = createProps(propTypes, props, classNames)
+  expect(result.children).toEqual('le children')
+  expect(result.className).toEqual('class_a class_b')
+  // keys that are not in propTypes are preserved
+  expect(result.style).toBeDefined();
+
+  // only the children component prop (and props not in propTypes) are preserved
+  expect(result.b).toBeUndefined()
+  expect(result.s).toBeUndefined()
+})
\ No newline at end of file
diff --git a/agnosticui-vue/src/stories/FlexGrid/types.js b/agnosticui-vue/src/stories/FlexGrid/types.js
new file mode 100644
index 000000000..211563d4a
--- /dev/null
+++ b/agnosticui-vue/src/stories/FlexGrid/types.js
@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types'
+
+// export const ColumnSizeType = PropTypes.oneOfType([
+//   PropTypes.number,
+//   PropTypes.bool,
+// ])
+export const ColumnSizeType = [Number, Boolean];
+
+export const ViewportSizeType = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+export const ViewportSizeTypeProp = {
+  type: String,
+  validator: (v) => ViewportSizeType.includes(v),
+}
+
+// export const ViewportSizeType = PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
diff --git a/agnosticui-vue/src/stories/FlexGridTests.vue b/agnosticui-vue/src/stories/FlexGridTests.vue
new file mode 100644
index 000000000..969b39dfe
--- /dev/null
+++ b/agnosticui-vue/src/stories/FlexGridTests.vue
@@ -0,0 +1,30 @@
+<template>
+  <FlexGrid tagName="section" customClasses="custom-grid-klass">
+    <!-- Purposely adding all row keys just check they get inserted on row element :) -->
+    <FlexRow
+      start="sm"
+      center="md"
+      end="lg"
+      top="xl"
+      middle="xs"
+      bottom="xs"
+      around="sm"
+      between="lg"
+      customClasses="custom-row-klass"
+    >
+      <span>FlexCol to come soon...</span>
+    </FlexRow>
+  </FlexGrid>
+</template>
+
+<script>
+/*
+
+    */
+import FlexGrid from "./FlexGrid/FlexGrid.vue";
+import FlexRow from "./FlexGrid/FlexRow.vue";
+export default {
+  name: "flex-grid-tests",
+  components: { FlexGrid, FlexRow },
+};
+</script>
\ No newline at end of file