Refactoring grid in CSS package. Updating the showcase but not yet th…

…e Vue Grid
AgnosticUI · Sep 26, 2020 · 30d6bbe · 30d6bbe
1 parent c831995
commit 30d6bbe
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 91 deletions.
diff --git a/agnosticui-css/flexboxgrid.html b/agnosticui-css/flexboxgrid.html
@@ -16,8 +16,6 @@
     }
 
     .demo-only {
-      background: #f9f9f9;
-      border: 1px solid #eee;
       padding: 2rem 0;
     }
 
@@ -30,12 +28,37 @@
 
 <body>
 
+  <div class="flexgrid-container">
+    <h1>Gutter opt-in.</h1>
+    <p>By default, we remove magic gutters. But,
+      you can opt back in for them when you need them (cards or boxes
+      are a good example use case) by defining `--agnosticui-gutter-width` in your stylsheet.
+    </p>
+    <style>
+      :root {
+        --agnosticui-gutter-width: 16px;
+      }
+    </style>
+    <div class="row gutter-test demo-only">
+      <div class="col-xs-12 col-sm-3">
+        <p class="demo-only-field">xs={12} --agnosticui-gutter-width set</p>
+      </div>
+      <div class="col-xs-12 col-sm-3">
+        <p class="demo-only-field">xs={12} --agnosticui-gutter-width set</p>
+      </div>
+      <div class="col-xs-12 col-sm-3">
+        <p class="demo-only-field">xs={12} --agnosticui-gutter-width set</p>
+      </div>
+      <div class="col-xs-12 col-sm-3">
+        <p class="demo-only-field">xs={12} --agnosticui-gutter-width set</p>
+      </div>
+    </div>
+  </div>
   <div class="flexgrid-container">
     <h1>Basic Grid</h1>
     <p>Check out the demo storybooks in the framework you're interested in (React, Svelte, Vue, etc.).</p>
-    <p><i>xs</i> = Extra Small. <i>sm</i> = Small. <i>lg</i> = Large.</p>
-    <p>The following breakpoints can be overriden by redefining in your stylesheet and omitting the <i>-default</i>
-      part:</p>
+    <p><i>xs</i> = Extra Small. <i>sm</i> = Small. <i>lg</i> = Large. <i>xl</i> = Extra Large.</p>
+    <p>The following breakpoints are used by FlexGrid:</p>
     <pre>
       --agnosticui-default-sm-min: 576px;
       --agnosticui-default-md-min: 768px;
@@ -63,31 +86,6 @@ <h1>Basic Grid</h1>
       </div>
     </div>
   </div>
-
-  <div class="flexgrid-container">
-    <h1>Auto Width with opt-in gutters on 8pt grid.</h1>
-    <p>By default, we remove magic gutters. But,
-      you can opt back in for them when you need them (cards or boxes
-      are a good example use case) by applying gutter-4, gutter-8, gutter-16,
-      gutter-24, and finally gutter-32 on the row, and then using auto on the columns.
-      You can also do col-xs-12 (or col-sm-12 etc.), to ensure stacking on mobile or tablet
-      if you wish.</p>
-    <p>Here we've used gutter-16 to do so: </p>
-    <div class="row gutter-16 demo-only">
-      <div class="col-xs-12 auto">
-        <p class="demo-only-field">xs={12} auto</p>
-      </div>
-      <div class="col-xs-12 auto">
-        <p class="demo-only-field">xs={12} auto</p>
-      </div>
-      <div class="col-xs-12 auto">
-        <p class="demo-only-field">xs={12} auto</p>
-      </div>
-      <div class="col-xs-12 auto">
-        <p class="demo-only-field">xs={12} auto</p>
-      </div>
-    </div>
-  </div>
 </body>
 
 </html>
diff --git a/showcase/public/index.html b/showcase/public/index.html
@@ -41,6 +41,9 @@
       --hljs-accent-8: #009bac;
       --hljs-accent-9: #4f79d5;
 
+      /* For grid gutters */
+      --agnosticui-gutter-width: 48px;
+
       /* For the lofi component cards */
       --agnosticui-card-boxshadow1-offset-x: 0px;
       --agnosticui-card-boxshadow1-offset-y: 1px;

diff --git a/showcase/src/partials/Buttons.vue b/showcase/src/partials/Buttons.vue
@@ -12,7 +12,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             Maybe you recognize some of these buttons—if so, it's because most of them originally
             appeared in
@@ -26,7 +26,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             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
@@ -40,12 +40,12 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Core Buttons</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p class="flex">
             <Button>Go</Button>
             <Button isRounded>Go</Button>
@@ -56,7 +56,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;button class=&quot;btn&quot;&gt;Go&lt;/button&gt;
 &lt;button class=&quot;btn btn-rounded&quot;&gt;Go&lt;/button&gt;
@@ -67,12 +67,12 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Primary</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p class="flex">
             <Button mode="primary">Go</Button>
             <Button mode="primary" isRounded>Go</Button>
@@ -83,7 +83,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;button class=&quot;btn btn-primary&quot;&gt;Go&lt;/button&gt;
 &lt;button class=&quot;btn btn-primary btn-rounded&quot;&gt;Go&lt;/button&gt;
@@ -94,12 +94,12 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Secondary</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p class="flex">
             <Button mode="secondary">Go</Button>
             <Button mode="secondary" isRounded>Go</Button>
@@ -110,7 +110,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;button class=&quot;btn btn-secondary&quot;&gt;Go&lt;/Button&gt;
 &lt;button class=&quot;btn btn-secondary btn-rounded&quot;&gt;Go&lt;/Button&gt;
@@ -121,32 +121,32 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Disabled</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             <Button :isDisabled="true">Go</Button>
           </p>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;!-- Primary, Secondary, and all variants work the same. Just use the disabled attribute. --&gt;
 &lt;button class=&quot;btn&quot; disabled&gt;Disabled&lt;/Button&gt;
     </code></pre>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Sizes</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p style="display: initial;">
             <Button size="small">Go</Button>
             <Button>Go</Button>
@@ -155,7 +155,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;button class=&quot;btn btn-small&quot;&gt;Small&lt;/Button&gt;
 &lt;button class=&quot;btn&quot;&gt;Regular&lt;/Button&gt;
@@ -164,12 +164,12 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Block</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             <Button isBlock>Go</Button>
             <Button mode="primary" isBlock>Go</Button>
@@ -178,7 +178,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;button class=&quot;btn btn-block&quot;&gt;Go&lt;/Button&gt;
 &lt;button class=&quot;btn btn-primary btn-block&quot;&gt;Go&lt;/Button&gt;
@@ -187,33 +187,33 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Misc</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             <Button :isSkinned="false">No skin button (if you want to style yourself)</Button>
             <Button isBlank>Blank button</Button>
           </p>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;button class=&quot;btn-base&quot;&gt;Base no skin&lt;/button&gt;
 &lt;button class=&quot;btn btn-blank&quot;&gt;Blank&lt;/button&gt;
     </code></pre>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Button Icons</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p style="display: flex;">
             <Button mode="primary" v-bind:isRounded="true">
               Call
@@ -262,7 +262,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &#x3C;button class=&#x22;btn btn-primary btn-rounded&#x22;&#x3E; Call
   &#x3C;svg
@@ -308,12 +308,12 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <h6>Button Groups</h6>
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             <ButtonGroup>
               <Button>One</Button>
@@ -334,7 +334,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;div class=&quot;btn-group&quot; role=&quot;group&quot; aria-label=&quot;Button group example&quot;&gt;
   &lt;button class=&quot;btn&quot;&gt;One&lt;/button&gt;
@@ -355,7 +355,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             <ButtonGroup>
               <Button mode="primary">One</Button>
@@ -376,7 +376,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;div class=&quot;btn-group&quot; role=&quot;group&quot; aria-label=&quot;Button group example&quot;&gt;
   &lt;button class=&quot;btn btn-primary&quot;&gt;One&lt;/button&gt;
@@ -397,7 +397,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <p>
             <ButtonGroup>
               <Button mode="secondary">One</Button>
@@ -418,7 +418,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="html">
 &lt;div class=&quot;btn-group&quot; role=&quot;group&quot; aria-label=&quot;Button group example&quot;&gt;
   &lt;button class=&quot;btn btn-secondary&quot;&gt;One&lt;/button&gt;

diff --git a/showcase/src/partials/Colors.vue b/showcase/src/partials/Colors.vue
@@ -22,7 +22,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <div :class="$style.hotips">
             <p :class="$style.tip">
               <span class="quoted">Colors express the main psychic functions of man.</span>
@@ -93,7 +93,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs><code class="css">
 /**
 * You should override these by simply defining them less the `-default` in

diff --git a/showcase/src/partials/Grid.vue b/showcase/src/partials/Grid.vue
@@ -90,7 +90,7 @@
         </FlexCol>
       </FlexRow>
       <FlexRow v-bind:gutter="16">
-        <FlexCol v-bind:xs="12" auto>
+        <FlexCol v-bind:xs="12">
           <pre v-highlightjs>
       <code class="html">
 &lt;div class=&quot;flexgrid-container&quot;&gt;
@@ -157,8 +157,6 @@ export default {
 }
 
 .demoOnly {
-  background: #f9f9f9;
-  border: 1px solid #eee;
   padding: 2rem 0;
 }