Skip to content

Commit 7974c36

Browse files
author
mrmrs
committed
Update type scale and spacing docs pages.
1 parent 4ff4ca7 commit 7974c36

File tree

2 files changed

+54
-52
lines changed

2 files changed

+54
-52
lines changed

‎docs/layout/spacing/index.html

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
229229
<code class="small">
230230
/* Variables */
231231

232+
/* Spacing Scale - based on a ratio of 1:2 */
232233
:root {
233234
--spacing-none: 0;
234235
--spacing-extra-small: .25rem;
@@ -265,61 +266,61 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
265266
b = bottom
266267
l = left
267268

268-
n = none
269-
1 = extra small
270-
s = small
271-
m = medium
272-
l = large
273-
x = extra
274-
5 = extra large
275-
xxx = extra extra large
269+
0 = none
270+
1 = 1st step in spacing scale
271+
2 = 2nd step in spacing scale
272+
3 = 3rd step in spacing scale
273+
4 = 4th step in spacing scale
274+
5 = 5th step in spacing scale
275+
6 = 6th step in spacing scale
276+
7 = 7th step in spacing scale
276277

277278
*/
278279

279280

280-
.pa0 { padding: var(--spacing-none); }
281-
.pa1 { padding: var(--spacing-extra-small); }
282-
.pa2 { padding: var(--spacing-small); }
283-
.pa3 { padding: var(--spacing-medium); }
284-
.pa4 { padding: var(--spacing-large); }
285-
.pa5 { padding: var(--spacing-extra-large); }
286-
.pa6 { padding: var(--spacing-extra-extra-large); }
281+
.pa0 { padding: var(--spacing-none); }
282+
.pa1 { padding: var(--spacing-extra-small); }
283+
.pa2 { padding: var(--spacing-small); }
284+
.pa3 { padding: var(--spacing-medium); }
285+
.pa4 { padding: var(--spacing-large); }
286+
.pa5 { padding: var(--spacing-extra-large); }
287+
.pa6 { padding: var(--spacing-extra-extra-large); }
287288
.pa7 { padding: var(--spacing-extra-extra-extra-large); }
288289

289-
.pl0 { padding-left: var(--spacing-none); }
290-
.pl1 { padding-left: var(--spacing-extra-small); }
291-
.pl2 { padding-left: var(--spacing-small); }
292-
.pl3 { padding-left: var(--spacing-medium); }
293-
.pl4 { padding-left: var(--spacing-large); }
294-
.pl5 { padding-left: var(--spacing-extra-large); }
295-
.pl6 { padding-left: var(--spacing-extra-extra-large); }
290+
.pl0 { padding-left: var(--spacing-none); }
291+
.pl1 { padding-left: var(--spacing-extra-small); }
292+
.pl2 { padding-left: var(--spacing-small); }
293+
.pl3 { padding-left: var(--spacing-medium); }
294+
.pl4 { padding-left: var(--spacing-large); }
295+
.pl5 { padding-left: var(--spacing-extra-large); }
296+
.pl6 { padding-left: var(--spacing-extra-extra-large); }
296297
.pl7 { padding-left: var(--spacing-extra-extra-extra-large); }
297298

298-
.pr0 { padding-right: var(--spacing-none); }
299-
.pr1 { padding-right: var(--spacing-extra-small); }
300-
.pr2 { padding-right: var(--spacing-small); }
301-
.pr3 { padding-right: var(--spacing-medium); }
302-
.pr4 { padding-right: var(--spacing-large); }
303-
.pr5 { padding-right: var(--spacing-extra-large); }
304-
.pr6 { padding-right: var(--spacing-extra-extra-large); }
299+
.pr0 { padding-right: var(--spacing-none); }
300+
.pr1 { padding-right: var(--spacing-extra-small); }
301+
.pr2 { padding-right: var(--spacing-small); }
302+
.pr3 { padding-right: var(--spacing-medium); }
303+
.pr4 { padding-right: var(--spacing-large); }
304+
.pr5 { padding-right: var(--spacing-extra-large); }
305+
.pr6 { padding-right: var(--spacing-extra-extra-large); }
305306
.pr7 { padding-right: var(--spacing-extra-extra-extra-large); }
306307

307-
.pb0 { padding-bottom: var(--spacing-none); }
308-
.pb1 { padding-bottom: var(--spacing-extra-small); }
309-
.pb2 { padding-bottom: var(--spacing-small); }
310-
.pb3 { padding-bottom: var(--spacing-medium); }
311-
.pb4 { padding-bottom: var(--spacing-large); }
312-
.pb5 { padding-bottom: var(--spacing-extra-large); }
313-
.pb6 { padding-bottom: var(--spacing-extra-extra-large); }
308+
.pb0 { padding-bottom: var(--spacing-none); }
309+
.pb1 { padding-bottom: var(--spacing-extra-small); }
310+
.pb2 { padding-bottom: var(--spacing-small); }
311+
.pb3 { padding-bottom: var(--spacing-medium); }
312+
.pb4 { padding-bottom: var(--spacing-large); }
313+
.pb5 { padding-bottom: var(--spacing-extra-large); }
314+
.pb6 { padding-bottom: var(--spacing-extra-extra-large); }
314315
.pb7 { padding-bottom: var(--spacing-extra-extra-extra-large); }
315316

316-
.pt0 { padding-top: var(--spacing-none); }
317-
.pt1 { padding-top: var(--spacing-extra-small); }
318-
.pt2 { padding-top: var(--spacing-small); }
319-
.pt3 { padding-top: var(--spacing-medium); }
320-
.pt4 { padding-top: var(--spacing-large); }
321-
.pt5 { padding-top: var(--spacing-extra-large); }
322-
.pt6 { padding-top: var(--spacing-extra-extra-large); }
317+
.pt0 { padding-top: var(--spacing-none); }
318+
.pt1 { padding-top: var(--spacing-extra-small); }
319+
.pt2 { padding-top: var(--spacing-small); }
320+
.pt3 { padding-top: var(--spacing-medium); }
321+
.pt4 { padding-top: var(--spacing-large); }
322+
.pt5 { padding-top: var(--spacing-extra-large); }
323+
.pt6 { padding-top: var(--spacing-extra-extra-large); }
323324
.pt7 { padding-top: var(--spacing-extra-extra-extra-large); }
324325

325326
.pv0 {
@@ -1069,7 +1070,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
10691070
.ma6-l { margin: var(--spacing-extra-extra-large); }
10701071
.ma7-l { margin: var(--spacing-extra-extra-extra-large); }
10711072

1072-
.mlo-l { margin-left: var(--spacing-none); }
1073+
.ml0-l { margin-left: var(--spacing-none); }
10731074
.ml1-l { margin-left: var(--spacing-extra-small); }
10741075
.ml2-l { margin-left: var(--spacing-small); }
10751076
.ml3-l { margin-left: var(--spacing-medium); }

‎docs/typography/scale/index.html

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -85,14 +85,15 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-type-scale</h4>
8585
</article>
8686
<div class="ph3 ph5-ns pt4 pb5">
8787
<h2 class="f3 bold">Examples</h2>
88-
<p class="f-headline lh-solid oh w-100">Sample headline</p>
89-
<p class="f-subheadline lh-solid w-100 oh">Sample subheadline</p>
90-
<p class="f1 lh-solid">Sample text with the f1 class </p>
91-
<p class="f2 lh-solid">Sample text with the f2 class </p>
92-
<p class="f3">Sample text with the f3 class </p>
93-
<p class="f4">Sample text with the f4 class </p>
94-
<p class="f5">Sample text with the f5 class </p>
95-
<p class="f6">Sample text with the f6 class </p>
88+
<p class="f-headline lh-solid oh w-100 mb0"><b>Aa</b> Aa</p>
89+
<code class="f6">.f-headline 6rem</code>
90+
<p class="f-subheadline lh-solid w-100 oh"><b>Aa</b> Aa</p>
91+
<p class="f1 lh-solid"><b>Aa</b> Aa </p>
92+
<p class="f2 lh-solid"><b>Aa</b> Aa </p>
93+
<p class="f3 lh-solid"><b>Aa</b> Aa </p>
94+
<p class="f4 lh-solid"><b>Aa</b> Aa </p>
95+
<p class="f5 lh-solid"><b>Aa</b> Aa </p>
96+
<p class="f6 lh-solid"><b>Aa</b> Aa </p>
9697
<div class="mt5 cf">
9798
<div class="dib mr4">
9899
<h1 class="f4 ttu tracked fw6">Previous</h1>

0 commit comments

Comments
 (0)