Add .g1 atomic class for gap: 1px (#810)

This also adds a 1px spacing unit (`@su1`)

Author: dancormier

docs/_data/grid.json

@@ -247,6 +247,12 @@
       "define": "Add no space between grid items",
       "responsive": true
     },
+    {
+      "class": "g1",
+      "output": "gap: 1px",
+      "define": "Space out grid items by 1px",
+      "responsive": true
+    },
     {
       "class": "g2",
       "output": "gap: 2px",

docs/product/base/grid.html

@@ -134,6 +134,7 @@
     <div class="stacks-preview">
 {% highlight html %}
 <div class="d-grid g0">…</div>
+<div class="d-grid g1">…</div>
 <div class="d-grid g2">…</div>
 <div class="d-grid g4">…</div>
 <div class="d-grid g8">…</div>
@@ -155,6 +156,18 @@
                 <div class="grid--item bg-black-100 p8 h32 ba bc-black-4"></div>
                 <div class="grid--item bg-black-100 p8 h32 ba bc-black-4"></div>
             </div>
+
+            <div class="mb16 d-grid g1 grid__3 bg-black-075 ba bc-black-3 p16">
+                <div class="grid--item bg-black-100 p8 h32 ba bc-black-4">
+                    .g1
+                </div>
+                <div class="grid--item bg-black-100 p8 h32 ba bc-black-4"></div>
+                <div class="grid--item bg-black-100 p8 h32 ba bc-black-4"></div>
+                <div class="grid--item bg-black-100 p8 h32 ba bc-black-4"></div>
+                <div class="grid--item bg-black-100 p8 h32 ba bc-black-4"></div>
+                <div class="grid--item bg-black-100 p8 h32 ba bc-black-4"></div>
+            </div>
+
             <div class="mb16 d-grid g2 grid__3 bg-black-075 ba bc-black-3 p16">
                 <div class="grid--item bg-black-100 p8 h32 ba bc-black-4">
                     .g2

lib/css/atomic/_stacks-grid.less

@@ -21,6 +21,7 @@
 //      into its own section and documentation
 //  ----------------------------------------------------------------------------
 #stacks-internals #responsify('.g0', { gap: 0 });
+#stacks-internals #responsify('.g1', { gap: @su1 });
 #stacks-internals #responsify('.g2', { gap: @su2 });
 #stacks-internals #responsify('.g4', { gap: @su4; });
 #stacks-internals #responsify('.g6', { gap: @su6; });

lib/css/exports/_stacks-constants-helpers.less

@@ -52,6 +52,7 @@
 //  ============================================================================
 //  $  SPACING UNITS (su-)
 //  ----------------------------------------------------------------------------
+@su1:                   1px;
 @su2:                   2px;
 @su4:                   4px;
 @su6:                   6px;