Merge pull request #548 from StackExchange/feature/one-pixel-positioning

aaronshekey · web-flow · commit 05b650be0d47 · 2020-10-16T14:51:49.000-05:00
Add 1 pixel position coordinate classes
diff --git a/docs/_data/spacing.json b/docs/_data/spacing.json
@@ -102,37 +102,37 @@
   "position": [
     {
       "prefix": "t",
-      "values": "0, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
+      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
     },
     {
       "prefix": "r",
-      "values": "0, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
+      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
     },
     {
       "prefix": "l",
-      "values": "0, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
+      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
     },
     {
       "prefix": "b",
-      "values": "0, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
+      "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
     }
   ],
   "negative-position": [
     {
       "prefix": "tn",
-      "values": "2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
+      "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
     },
     {
       "prefix": "rn",
-      "values": "2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
+      "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
     },
     {
       "prefix": "ln",
-      "values": "2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
+      "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
     },
     {
       "prefix": "bn",
-      "values": "2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
+      "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"
     }
   ],
   "margin-definitions": [
@@ -366,6 +366,10 @@
       "term": 0,
       "define": "0;"
     },
+    {
+      "term": 1,
+      "define": "1px;"
+    },
     {
       "term": 2,
       "define": "2px;"
diff --git a/docs/product/base/position.html b/docs/product/base/position.html
@@ -68,10 +68,10 @@
             </thead>
             <tbody>
                 {% for space in spacing.position-definitions %}
-                  <tr>
-                      <th scope="row">{{ space.term }}</th>
-                      <td>{{ space.define }}</td>
-                  </tr>
+                    <tr>
+                        <th scope="row">{{ space.term }}</th>
+                        <td>{{ space.define }}</td>
+                    </tr>
                 {% endfor %}
             </tbody>
         </table>
@@ -115,6 +115,7 @@
                 <tr>
                     <th scope="col">Prefix</th>
                     <th scope="col" class="ta-center ff-mono">0</th>
+                    <th scope="col" class="ta-center ff-mono">1px</th>
                     <th scope="col" class="ta-center ff-mono">2px</th>
                     <th scope="col" class="ta-center ff-mono">4px</th>
                     <th scope="col" class="ta-center ff-mono">6px</th>
@@ -132,14 +133,14 @@
                 </tr>
             </thead>
             <tbody>
-              {% for class in spacing.position %}
-              {% assign prefix-value = class.values | split: ", " %}
-                  <tr>
-                      <th scope="row" class="-cell1">{{ class.prefix }}</th>
-                      {% for values in prefix-value %}
-                       <td class="ta-center"><code class="fs1">.{{ class.prefix }}{{ values }}</code></td>
-                      {% endfor %}
-                  </tr>
+                {% for class in spacing.position %}
+                {% assign prefix-value = class.values | split: ", " %}
+                    <tr>
+                        <th scope="row" class="-cell1">{{ class.prefix }}</th>
+                        {% for values in prefix-value %}
+                            <td class="ta-center"><code class="fs1">.{{ class.prefix }}{{ values }}</code></td>
+                        {% endfor %}
+                    </tr>
                 {% endfor %}
             </tbody>
         </table>
@@ -151,6 +152,7 @@
             <thead>
                 <tr>
                     <th scope="col">Prefix</th>
+                    <th scope="col" class="ta-center ff-mono">-1px</th>
                     <th scope="col" class="ta-center ff-mono">-2px</th>
                     <th scope="col" class="ta-center ff-mono">-4px</th>
                     <th scope="col" class="ta-center ff-mono">-6px</th>
@@ -168,14 +170,14 @@
                 </tr>
             </thead>
             <tbody>
-              {% for class in spacing.negative-position %}
-              {% assign prefix-value = class.values | split: ", " %}
-                  <tr>
-                      <th scope="row" class="-cell1">{{ class.prefix }}</th>
-                      {% for values in prefix-value %}
-                       <td class="ta-center"><code class="fs1">.{{ class.prefix }}{{ values }}</code></td>
-                      {% endfor %}
-                  </tr>
+                {% for class in spacing.negative-position %}
+                {% assign prefix-value = class.values | split: ", " %}
+                    <tr>
+                        <th scope="row" class="-cell1">{{ class.prefix }}</th>
+                        {% for values in prefix-value %}
+                            <td class="ta-center"><code class="fs1">.{{ class.prefix }}{{ values }}</code></td>
+                        {% endfor %}
+                    </tr>
                 {% endfor %}
             </tbody>
         </table>
diff --git a/lib/css/atomic/_stacks-spacing.less b/lib/css/atomic/_stacks-spacing.less
@@ -140,23 +140,23 @@
 //  $$ Top
 #stacks-internals #build-classes(
     '.t', { .template(@value) { top: @value !important; } },
-    0 @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
+    0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
 );
 
 //  $$ Right
 #stacks-internals #build-classes(
     '.r', { .template(@value) { right: @value !important; } },
-    0 @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
+    0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
 );
 
 //  $$ Bottom
 #stacks-internals #build-classes(
     '.b', { .template(@value) { bottom: @value !important; } },
-    0 @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
+    0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
 );
 
 //  $$ Left
 #stacks-internals #build-classes(
     '.l', { .template(@value) { left: @value !important; } },
-    0 @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
+    0 1px -1px @su2 -@su2 @su4 -@su4 @su6 -@su6 @su8 -@su8 @su12 -@su12 @su16 -@su16 @su24 -@su24 @su32 -@su32 @su48 -@su48 @su64 -@su64 @su96 -@su96 @su128 -@su128 50% -50% 100% -100%
 );

Original file line number	Diff line number	Diff line change
`@@ -102,37 +102,37 @@`
`102`	`102`	`"position": [`
`103`	`103`	`{`
`104`	`104`	`"prefix": "t",`
`105`		`- "values": "0, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
	`105`	`+ "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
`106`	`106`	`},`
`107`	`107`	`{`
`108`	`108`	`"prefix": "r",`
`109`		`- "values": "0, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
	`109`	`+ "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
`110`	`110`	`},`
`111`	`111`	`{`
`112`	`112`	`"prefix": "l",`
`113`		`- "values": "0, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
	`113`	`+ "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
`114`	`114`	`},`
`115`	`115`	`{`
`116`	`116`	`"prefix": "b",`
`117`		`- "values": "0, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
	`117`	`+ "values": "0, 1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
`118`	`118`	`}`
`119`	`119`	`],`
`120`	`120`	`"negative-position": [`
`121`	`121`	`{`
`122`	`122`	`"prefix": "tn",`
`123`		`- "values": "2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
	`123`	`+ "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
`124`	`124`	`},`
`125`	`125`	`{`
`126`	`126`	`"prefix": "rn",`
`127`		`- "values": "2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
	`127`	`+ "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
`128`	`128`	`},`
`129`	`129`	`{`
`130`	`130`	`"prefix": "ln",`
`131`		`- "values": "2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
	`131`	`+ "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
`132`	`132`	`},`
`133`	`133`	`{`
`134`	`134`	`"prefix": "bn",`
`135`		`- "values": "2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
	`135`	`+ "values": "1, 2, 4, 6, 8, 12, 16, 24, 32, 48, 64, 96, 128, 50, 100"`
`136`	`136`	`}`
`137`	`137`	`],`
`138`	`138`	`"margin-definitions": [`
`@@ -366,6 +366,10 @@`
`366`	`366`	`"term": 0,`
`367`	`367`	`"define": "0;"`
`368`	`368`	`},`
	`369`	`+ {`
	`370`	`+ "term": 1,`
	`371`	`+ "define": "1px;"`
	`372`	`+ },`
`369`	`373`	`{`
`370`	`374`	`"term": 2,`
`371`	`375`	`"define": "2px;"`