Adds the Grid to the showcase. Tightens up the showcase a bit too.

AgnosticUI · Sep 20, 2020 · 4a3631e · 4a3631e
1 parent c311bf3
commit 4a3631e
Show file tree

Hide file tree

Showing 6 changed files with 140 additions and 24 deletions.
diff --git a/agnosticui-css/flexboxgrid.html b/agnosticui-css/flexboxgrid.html
@@ -3,7 +3,7 @@
 <html>
 
 <head>
-  <title>Card</title>
+  <title>FlexGrid</title>
   <link rel="stylesheet" href="./flexboxgrid-custom.css">
   <style>
     body {

diff --git a/showcase/src/App.vue b/showcase/src/App.vue
@@ -23,6 +23,7 @@
 import "agnosticui-css/colors.css";
 import "agnosticui-css/typography.css";
 import "agnosticui-css/spacing.css";
+import "agnosticui-css/flexboxgrid-custom.css";
 import BackToTop from "./components/BackToTop.vue";
 import Colors from "./partials/Colors.vue";
 import Grid from "./partials/Grid.vue";

diff --git a/showcase/src/partials/Colors.vue b/showcase/src/partials/Colors.vue
@@ -2,16 +2,15 @@
   <section :class="$style.component">
     <h1 id="color">Colors</h1>
     <h3>
-      The appropriate use of color can set the
+      The appropriate and
       <a
-        href="https://www.canva.com/learn/choose-right-colors-brand/"
-        class="href"
-      >tone of your brand</a>
-      while helping to guide users to
+        href="https://medium.com/@raquel/inclusive-color-resources-for-your-a11y-color-needs-cf3448c63335"
+      >inclusive use of color</a>
+      can help to set the tone of your brand and encourage users to
       <a
         href="https://blog.adobe.com/en/publish/2017/03/29/the-impact-of-color-on-conversion-rates.html#gs.f5rtr2"
         class="href"
-      >take action</a>.
+      >take certain actions</a>.
     </h3>
     <div :class="$style.hotips">
       <p :class="$style.tip">
@@ -24,9 +23,9 @@
       <div :class="$style.tipcontent">
         <p>
           AgnosticUI creates a minimal set of color tokens which you're encouraged to customize
-          and extend by simply redefining them in your top-level stylesheet. While we use sensible
-          neutral gray colors by default, we purposely use gaudy primary and secondary colors to, ahem,
-          encourage you to redefine and customize these!
+          and extend by simply redefining them in your top-level stylesheet. We use sensible
+          neutral gray color defaults, but intentionally use loud primary and secondary colors
+          in hopes that it will persuade you to define your own.
         </p>
 
         <p>Here's what the defaults look like if not redefined:</p>
@@ -94,7 +93,7 @@
 :root {
   /* Please, please, please, at mimimum redefine primary and secondary ;) */
   --agnosticui-default-primary: Fuchsia;
-  --agnosticui-default-secondary: Teal;
+  --agnosticui-default-secondary: Tomato;
   --agnosticui-default-gray-extra-light: #f8f8f8;
   --agnosticui-default-gray-light: #e9e9e9;
   --agnosticui-default-gray-mid: #d8d8d8;
@@ -120,7 +119,7 @@ the override naming convention of removing the `-default` part: */
   /* TODO -- REPLACE THES ONCE AGNOSTICUI COLORS COMPONENT DONE! */
 
   --agnosticui-primary: Fuchsia;
-  --agnosticui-secondary: Teal;
+  --agnosticui-secondary: Tomato;
   --agnosticui-gray-extra-light: #f8f8f8;
   --agnosticui-gray-light: #e9e9e9;
   --agnosticui-gray-mid: #d8d8d8;

diff --git a/showcase/src/partials/Grid.vue b/showcase/src/partials/Grid.vue
@@ -3,9 +3,14 @@
   <section :class="$style.component">
     <h1 id="grid">Grid</h1>
     <h3>
-      Our flexbox-based grid is based on a 12-unit system. Each column unit counts for 1/12
-      of the whole (3 units is a fourth, 4 units a third, 6 units a half, etc.)
+      Our flexbox grid is based on a 12-unit grid system where each column counts for 1/12
+      of the grid.
     </h3>
+    <p>
+      Put differently, 12-units represents 100% of the width of the containing
+      element your grid resides within. For example, a 3 unit column takes up a fourth of the full width, 4 unit columns a third,
+      6 unit columns a half, and so on.
+    </p>
     <div :class="$style.hotips">
       <p :class="$style.tip">
         <span class="quoted">The grid system is an aid, not a guarantee.</span>
@@ -14,9 +19,95 @@
         >Josef Müller-Brockmann</a>
       </p>
       <div :class="$style.tipcontent">
-        <p>TBD 1234</p>
+        <p>
+          AgnosticUI's grid leverages
+          <a
+            href="https://evgenyrodionov.github.io/flexboxgrid2/"
+          >flexboxgrid2</a>
+          under the hood, which in turn leverages
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"
+          >Flexbox</a>.
+        </p>
+        <p>
+          The grid uses a declarative approach where you add certain CSS classes to your html markup to
+          layout your page or section on a 12-unit grid.
+          If you're using the CSS AgnosticUI package, you can simply apply the global CSS classes
+          you see in the demo below. However, if you're using React, Svelte, or
+          Vue, you should utilize that framework's version of FlexGrid as it will provide
+          localized CSS via
+          <a
+            href="https://github.com/css-modules/css-modules"
+          >CSS Modules</a> (React, Vue) or
+          <a href="https://vuejs.org/v2/guide/single-file-components.html">SFC</a> styles (Svelte).
+        </p>
+        <h5 :class="$style.customize">Gutters</h5>
+        <p>
+          Our implementation removes &ldquo;magic gutters&rdquo; so subdivisions are predictable. You
+          can certainly apply gutters yourself, but we feel automagicaly grid gutters to more harm then good.
+        </p>
       </div>
     </div>
+
+    <p>
+      FlexGrid is a work-in-progress, so please first check the
+      <a
+        href="https://github.com/AgnosticUI/agnosticui/issues/1"
+      >Component Coverage List</a> to see if your framework of choice has been
+      implemented yet. If so, you should have a look at the corresponding framework's
+      <a
+        href="https://storybook.js.org/"
+      >Storybook</a> examples.
+    </p>
+    <div class="flexgrid-container">
+      <div class="row" :class="$style.demoOnly">
+        <div class="col-xs-12 col-sm-4 col-lg-6">
+          <p :class="$style.demoOnlyField">xs={12} sm={4} lg={6}</p>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-lg-6">
+          <p :class="$style.demoOnlyField">xs={12} sm={4} lg={6}</p>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-lg-3">
+          <p :class="$style.demoOnlyField">xs={12} sm={4} lg={3}</p>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-lg-3">
+          <p :class="$style.demoOnlyField">xs={12} sm={4} lg={3}</p>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-lg-3">
+          <p :class="$style.demoOnlyField">xs={12} sm={4} lg={3}</p>
+        </div>
+        <div class="col-xs-12 col-sm-4 col-lg-3">
+          <p :class="$style.demoOnlyField">xs={12} sm={4} lg={3}</p>
+        </div>
+      </div>
+    </div>
+
+    <pre v-highlightjs>
+      <code class="html">
+&lt;div class=&quot;flexgrid-container&quot;&gt;
+  &lt;div class=&quot;row&quot;&gt;
+    &lt;div class=&quot;col-xs-12 col-sm-4 col-lg-6&quot;&gt;
+      &lt;p&gt;xs={12} sm={4} lg={6}&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;col-xs-12 col-sm-4 col-lg-6&quot;&gt;
+      &lt;p&gt;xs={12} sm={4} lg={6}&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;col-xs-12 col-sm-4 col-lg-3&quot;&gt;
+      &lt;p&gt;xs={12} sm={4} lg={3}&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;col-xs-12 col-sm-4 col-lg-3&quot;&gt;
+      &lt;p&gt;xs={12} sm={4} lg={3}&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;col-xs-12 col-sm-4 col-lg-3&quot;&gt;
+      &lt;p&gt;xs={12} sm={4} lg={3}&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;col-xs-12 col-sm-4 col-lg-3&quot;&gt;
+      &lt;p&gt;xs={12} sm={4} lg={3}&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+      </code>
+    </pre>
   </section>
 </template>
 <style module>
@@ -32,4 +123,19 @@
 .tip {
   composes: tip from "./partials.module.css";
 }
+.customize {
+  margin-top: var(--Space-56);
+  margin-bottom: var(--Space-8);
+}
+
+.demoOnly {
+  background: #f9f9f9;
+  border: 1px solid #eee;
+  padding: 2rem 0;
+}
+
+.demoOnlyField {
+  border: 1px solid #cccccc;
+  padding: 1.5rem 3rem;
+}
 </style>
diff --git a/showcase/src/partials/Spacing.vue b/showcase/src/partials/Spacing.vue
@@ -2,13 +2,14 @@
 <template>
   <section :class="$style.component">
     <h1 id="spacing">Spacing</h1>
-    <h3>
-      Consistent spacing is key to visual harmony and balance. AgnosticUI's spacing is based off of an
+    <h3>Consistent spacing is key to visual harmony and balance.</h3>
+    <p>
+      AgnosticUI's spacing is based off of an
       <a
         href="https://www.designsystems.com/space-grids-and-layouts/"
       >8pt system</a> which is conveniently
       relative to the base 16px (1rem) unit used on the web. Spacing is done via CSS custom property tokens.
-    </h3>
+    </p>
     <pre v-highlightjs><code class="css">
 /**
  * agnostic-default- is not used here since these are, essentially, literals for

diff --git a/showcase/src/partials/Typography.vue b/showcase/src/partials/Typography.vue
@@ -17,22 +17,31 @@
           <li :class="$style.li">Small bytes go down easier</li>
           <li :class="$style.li">If you don’t have something good to say, don’t say anything</li>
         </ul>
-        <h5 :class="$style.customize">Customize &amp; Theme</h5>
+        <h5 :class="$style.customize">Using CSS Custom to Theme</h5>
         <p>
-          <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS custom properties</a>
-          are an underutilized tool for web designers and developers alike. They allow us to define and use 
-          <span class="quoted">variables</span> that can be shared across our app. But, even more powerfully, they
+          <a
+            href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties"
+          >CSS custom properties</a>
+          are an underutilized tool for web designers and developers alike. They allow us to define and use
+          <span
+            class="quoted"
+          >variables</span> that can be shared across our app. But, even more powerfully, they
           provide a built-in fallback system which allows us to replace default values with our own.
           This makes theming easy!
         </p>
         <p>
           For example, AgnosticUI uses a system font stack by default, but you
           may want to instead use your own. This can be achieved by simply defining
           the custom css property for font family. Under the hood, AgnosticUI will do:
-          <pre class="inline-code">var(--agnosticui-font-family, var(--agnosticui-default-font-family));</pre>
+        </p>
+        <pre class="inline-code">
+          var(--agnosticui-font-family,
+          var(--agnosticui-default-font-family));</pre>
+        <p>
           Essentially, the left variable will be used if defined, otherwise it will fallback to
           default one. All override variables in AgnosticUI are defined using this same naming
-          convention where the override variable is the same with the <i>--default</i> removed.
+          convention where you simply remove the
+          <i>--default</i>.
         </p>
       </div>
     </div>