Refactors FlexGrid to have separate css files for grid, row, and col.…

… This help Svelte mainly since I do not have access to proper CSS Modules, and I can copy each over into SFC style tags. Had to update the other frameworks as such.

agnosticui-css/flexboxgrid-grid.css

@@ -0,0 +1,51 @@
+:root {
+  /**
+ * Redefine this with --agnosticui-gutter-width: at the :root {} level in your
+ * styles to opt-in and customize the grid gutters.
+ */
+  --agnosticui-default-gutter-width: 0; /* note: no gutters by default */
+  --gutter-width: var(
+    --agnosticui-gutter-width,
+    var(--agnosticui-default-gutter-width)
+  );
+  --gutter-compensation: calc((var(--gutter-width) * 0.5) * -1);
+  --half-gutter-width: calc((var(--gutter-width) * 0.5));
+  --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%;
+  }
+}

agnosticui-css/flexboxgrid-row.css

@@ -0,0 +1,197 @@
+
+.row {
+  box-sizing: border-box;
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin-right: var(--gutter-compensation);
+  margin-left: var(--gutter-compensation);
+}
+
+.reverse {
+  flex-direction: row-reverse;
+}
+
+.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;
+}
+
+@media only screen and (min-width: 576px) {
+  .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;
+  }
+}
+
+@media only screen and (min-width: 768px) {
+  .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;
+  }
+}
+
+@media only screen and (min-width: 992px) {
+  .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;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  .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;
+  }
+}

agnosticui-css/flexboxgrid.html

@@ -4,7 +4,9 @@
 
 <head>
   <title>FlexGrid</title>
-  <link rel="stylesheet" href="./flexboxgrid-custom.css">
+  <link rel="stylesheet" href="./flexboxgrid-grid.css">
+  <link rel="stylesheet" href="./flexboxgrid-row.css">
+  <link rel="stylesheet" href="./flexboxgrid-col.css">
   <style>
     body {
       margin-top: 2em;

agnosticui-react/copystyles.js

@@ -56,3 +56,12 @@ fs.writeFileSync('./src/stories/headernavitem.css', css, 'utf8');
 css = fs.readFileSync('../agnosticui-css/flexboxgrid-custom.css', 'utf8');
 fs.writeFileSync('./src/stories/FlexGrid/FlexBoxGrid2Custom.css', css, 'utf8');
 
+
+/**
+ * FlexGrid (grid, row, col get concatenated together. They're separated for Svelte SFC requirements fwiw.)
+ */
+const gridCss = fs.readFileSync('../agnosticui-css/flexboxgrid-grid.css', 'utf8');
+const rowCss = fs.readFileSync('../agnosticui-css/flexboxgrid-row.css', 'utf8');
+const colCss = fs.readFileSync('../agnosticui-css/flexboxgrid-col.css', 'utf8');
+const cssConcatenated = `${gridCss}\n${rowCss}\n${colCss}`;
+fs.writeFileSync('./src/stories/FlexGrid/FlexBoxGrid2Custom.module.css', cssConcatenated, 'utf8');