Skip to content

Commit 343e9b9

Browse files
author
mrmrs
committed
Update docs
1 parent 6f87cf4 commit 343e9b9

File tree

3 files changed

+76
-42
lines changed

3 files changed

+76
-42
lines changed

‎docs/typography/line-height/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,8 @@ <h3 class="f6 ttu tracked mt0">Line Height</h3>
8686
</p>
8787
</article>
8888
<div class="ph3 ph5-ns pt4 pb5">
89-
<h3 class="f5 mb4">Examples</h3>
89+
<h3 class="f5 mb4 pb2 bb">Examples</h3>
90+
<h4 class="f6 ttu tracked fw6 mv0">6rem/96px at 30em</h4>
9091
<h4 class="f5 fw4 mt5">No applied line-height (default)</h4>
9192
<p class="measure">
9293
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod

‎docs/typography/measure/index.html

+6-6
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,12 @@
5757
<div class="nowrap mw9 center">
5858
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/scale/" title="Type">Type Scale</a>
5959
<a class="f6 fw6 dim link black pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/measure/" title="Measure">Measure</a>
60-
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/line-height" title="Line Height">Line Height / Leading</a>
61-
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/tracking" title="Tracking">Tracking</a>
62-
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-weight" title="Font Weights">Font Weights</a>
63-
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-style" title="Font Families">Font Style</a>
64-
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/vertical-align" title="Font Families">Vertical Align</a>
65-
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-align" title="Text Align">Text Align</a>
60+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/line-height/" title="Line Height">Line Height / Leading</a>
61+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/tracking/" title="Tracking">Tracking</a>
62+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-weight/" title="Font Weights">Font Weights</a>
63+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-style/" title="Font Families">Font Style</a>
64+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/vertical-align/" title="Font Families">Vertical Align</a>
65+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-align/" title="Text Align">Text Align</a>
6666
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a>
6767
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a>
6868
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/white-space" title="White Space">White Space</a>

‎docs/typography/tracking/index.html

+68-35
Original file line numberDiff line numberDiff line change
@@ -54,50 +54,62 @@
5454
</header>
5555

5656
<main class="bg-white black-70">
57-
<article class="bt b--black-10 pa3 ph5-ns">
58-
<h4 class="f4 mv0 fw6 dib mr4">tachyons-letter-spacing</h4>
59-
<span class="f4 b dib pl0 ml0 mr4">v3.0.1</span>
60-
<span class="f4 b dib pl0 ml0 mr4">159 B</span>
61-
<div>
62-
<dl class="dib mr4 mt0">
63-
<dt class="f6 db">Declarations </dt>
64-
<dd class="db pl0 ml0 f4 f2-ns b">12</dd>
65-
</dl>
66-
<dl class="dib mr4">
67-
<dt class="f6 db pr2">Selectors </dt>
68-
<dd class="db pl0 ml0 f4 f2-ns b">12</dd>
69-
</dl>
70-
<dl class="dib mr4">
71-
<dt class="f6 db pr2">Max. Specificity Score </dt>
72-
<dd class="db pl0 ml0 f4 f2-ns b">10</dd>
73-
</dl>
74-
<dl class="dib mr4">
75-
<dt class="f6 db pr2">Size of Avg. Rule </dt>
76-
<dd class="db pl0 ml0 f4 f2-ns b">1</dd>
77-
</dl>
57+
<header class="ph3 ph5-ns w-100 pv3 mb4 mb5-ns bt bb b--black-10 overflow-auto">
58+
<div class="nowrap mw9 center">
59+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/scale" title="Type">Type Scale</a>
60+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/measure/" title="Measure">Measure</a>
61+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/line-height" title="Line Height">Line Height / Leading</a>
62+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/tracking" title="Tracking">Tracking</a>
63+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-weight" title="Font Weights">Font Weights</a>
64+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-style" title="Font Families">Font Style</a>
65+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/vertical-align" title="Font Families">Vertical Align</a>
66+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-align" title="Text Align">Text Align</a>
67+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a>
68+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a>
69+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/white-space" title="White Space">White Space</a>
70+
<a class="f6 fw6 dim link black-70 pb2-ns mr2 mr3-m mr4-l" href="/docs/typography/font-family" title="Font Families">Font Families</a>
7871
</div>
79-
<p class="measure f4 f3-ns lh-copy">
72+
</header>
73+
<article class="pa3 ph5-ns">
74+
<h3 class="f6 ttu tracked mt0">Tracking</h3>
75+
<p class="measure f4 f3-ns lh-copy mt2">
8076
Letter-spacing is the consistent white-space between letters in a piece of text.
8177
In typography, letter-spacing is commonly known as tracking.
8278
Text that is set to uppercase should be tracked to improve readability.
79+
</p>
80+
<p class="f4 lh-copy">
8381
<i class="db mv2">Lowercase text should never be tracked.</i>
82+
</p>
83+
<p class="f4 lh-copy">
8484
For some larger text, depending on the typeface, a negative tracking might be desirable.
8585
</p>
86-
<p class="measure f5 f4-ns lh-copy">
87-
There are three classes to set tracking on uppercased text: tracked, tracked-tight, tracked-mega.
86+
<p class="measure f4 lh-copy">
87+
There are three possible values to choose from when tracking uppercased text:
8888
</p>
89+
<code class="pre f6">
90+
.tracked { letter-spacing: .1em; }
91+
.tracked-tight { letter-spacing: -.05em; }
92+
.tracked-mega { letter-spacing: .25em; }
93+
</code>
8994
</article>
9095
<div class="ph3 ph5-ns pt4 pb5">
91-
<h2 class="f3 bold">Examples</h2>
96+
<h3 class="f5 mb4 mb5-ns pb2 bb">Examples</h3>
97+
<h3 class="f5 fw4 sans-serif">Default</h3>
98+
<h4 class="f1 ttu b mt0">Title Example</h4>
99+
<code class="f6 fw4 mb3 mt4 db">
100+
&lt;h4 class="f1 ttu tracked mt0"&gt;Title Example&lt;/h4&gt;
101+
</code>
102+
<h4 class="f1 ttu tracked mt0">Title Example</h4>
103+
104+
<code class="f6 fw4 mb3 mt4 db">
105+
&lt;h4 class="f1 ttu tracked-mega mt0"&gt;Title Example&lt;/h4&gt;
106+
</code>
107+
<h4 class="f1 ttu tracked-mega b mt0">Title Example</h4>
92108

93-
<h3 class="f5 fw4 sans-serif pt4 caps black-100">Default</h3>
94-
<h4 class="f1 ttu bold mt0">Title Example</h4>
95-
<code class="f5 fw4 pt4">.tracked</code>
96-
<h4 class="f1 ttu tracked bold mt0">Title Example</h4>
97-
<code class="f5 fw4 pt4">.tracked-mega</code>
98-
<h4 class="f1 ttu tracked-mega bold mt0">Title Example</h4>
99-
<code class="f5 fw4 pt4">.tracked-tight</code>
100-
<h4 class="f-headline tracked-tight bold mt0">title example</h4>
109+
<code class="f6 fw4 mb3 mt4 db">
110+
&lt;h4 class="f1 ttu tracked-tight mt0"&gt;Title Example&lt;/h4&gt;
111+
</code>
112+
<h4 class="f-headline tracked-tight b mt0">title example</h4>
101113
<div class="mt5 cf">
102114
<div class="dib mr4">
103115
<h4 class="f6 fw6">Previous</h4>
@@ -113,8 +125,29 @@ <h4 class="f6 fw6">Reference</h4>
113125
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing" class="link fw6 blue dim">MDN - Letter Spacing</a>
114126
</div>
115127
</div>
116-
<section class="bg-white black-70 pt4 pb5 overflow-container">
117-
<header class="ph3 ph5-ns pt4">
128+
<section class="bg-white black-70 pv5 mb5 bt bb b--black-40 overflow-container">
129+
<header class="ph3 ph5-ns">
130+
<h4 class="f4 mv0 fw6 dib mr4">tachyons-letter-spacing</h4>
131+
<span class="f4 b dib pl0 ml0 mr4">v3.0.1</span>
132+
<span class="f4 b dib pl0 ml0 mr4">159 B</span>
133+
<div>
134+
<dl class="dib mr4 mt0">
135+
<dt class="f6 db">Declarations </dt>
136+
<dd class="db pl0 ml0 f4 f2-ns b">12</dd>
137+
</dl>
138+
<dl class="dib mr4">
139+
<dt class="f6 db pr2">Selectors </dt>
140+
<dd class="db pl0 ml0 f4 f2-ns b">12</dd>
141+
</dl>
142+
<dl class="dib mr4">
143+
<dt class="f6 db pr2">Max. Specificity Score </dt>
144+
<dd class="db pl0 ml0 f4 f2-ns b">10</dd>
145+
</dl>
146+
<dl class="dib mr4">
147+
<dt class="f6 db pr2">Size of Avg. Rule </dt>
148+
<dd class="db pl0 ml0 f4 f2-ns b">1</dd>
149+
</dl>
150+
</div>
118151
<kbd>src/_letter-spacing.css</kbd>
119152
</header>
120153
<pre class="ph3 ph5-ns">

0 commit comments

Comments
 (0)