Skip to content

Commit ec5399d

Browse files
author
mrmrs
committed
Update docs
1 parent 3004d93 commit ec5399d

File tree

3 files changed

+166
-67
lines changed

3 files changed

+166
-67
lines changed

‎docs/typography/font-weight/index.html

+47-19
Original file line numberDiff line numberDiff line change
@@ -85,24 +85,52 @@ <h3 class="f6 ttu tracked mt0">Font Weight</h3>
8585
</article>
8686
<div class="ph3 ph5-ns pt4 pb5">
8787
<h3 class="f5 mb4 pb2 bb">Examples</h3>
88-
<h3 class="f5 fw4 pt4">String Values</h3>
89-
<div class="cf">
90-
<div class="fl f5 f2-m f1-l normal v-mid tc"><span class="db bg-washed-blue pv3 ba b--white ph4">Aa <span class="db f6 fw4">normal</span></span></div>
91-
<div class="fl f5 f2-m f1-l b v-mid tc"><span class="db bg-washed-blue pv3 ba b--white ph4">Aa <span class="db f6 fw4">b</span></span></div>
92-
</div>
93-
<h3 class="f5 fw4 pt4">Literal Number Values</h3>
94-
<div class="dt w-100" style="table-layout: fixed;">
95-
<div class="dtc f5 f2-m f1-l fw1 v-mid tc"><span class="db bg-washed-blue pv3 ba b--white">Aa <span class="db f6 fw4">100</span></span></div>
96-
<div class="dtc f5 f2-m f1-l fw2 v-mid tc"><span class="db bg-washed-blue pv3 ba b--white">Aa <span class="db f6 fw4">200</span></span></div>
97-
<div class="dtc f5 f2-m f1-l fw3 v-mid tc"><span class="db bg-washed-blue pv3 ba b--white">Aa <span class="db f6 fw4">300</span></span></div>
98-
<div class="dtc f5 f2-m f1-l fw4 v-mid tc"><span class="db bg-washed-blue pv3 ba b--white">Aa <span class="db f6 fw4">400</span></span></div>
99-
<div class="dtc f5 f2-m f1-l fw5 v-mid tc"><span class="db bg-washed-blue pv3 ba b--white">Aa <span class="db f6 fw4">500</span></span></div>
100-
<div class="dtc f5 f2-m f1-l fw6 v-mid tc"><span class="db bg-washed-blue pv3 ba b--white">Aa <span class="db f6 fw4">600</span></span></div>
101-
<div class="dtc f5 f2-m f1-l fw7 v-mid tc"><span class="db bg-washed-blue pv3 ba b--white">Aa <span class="db f6 fw4">700</span></span></div>
102-
<div class="dtc f5 f2-m f1-l fw8 v-mid tc"><span class="db bg-washed-blue pv3 ba b--white">Aa <span class="db f6 fw4">800</span></span></div>
103-
<div class="dtc f5 f2-m f1-l fw9 v-mid tc"><span class="db bg-washed-blue pv3 ba b--white">Aa <span class="db f6 fw4">900</span></span></div>
104-
</div>
105-
88+
<h3 class="f5 fw6 pt4">String Values</h3>
89+
<code class="f6 db">
90+
&lt;p class="normal"&gt;Font-weight: normal&lt;/p&gt;
91+
</code>
92+
<p class="f4 f3-ns normal pl3 pl4-ns bl bw2 b--black-10 mb5">Font-weight: normal</p>
93+
<code class="f6 db">
94+
&lt;p class="b"&gt;Font-weight: bold&lt;/p&gt;
95+
</code>
96+
<p class="f4 f3-ns b pl3 pl4-ns bl bw2 b--black-10 mb5">Font-weight: bold</p>
97+
<h3 class="f5 fw6 mt4">Number values</h3>
98+
<code class="f6 db">
99+
&lt;p class="fw1"&gt;Font-weight: 100&lt;/p&gt;
100+
</code>
101+
<p class="f4 f3-ns fw2 pl3 pl4-ns bl bw2 b--black-10 mb5">Font-weight: 100</p>
102+
<code class="f6 db">
103+
&lt;p class="fw2"&gt;Font-weight: 200&lt;/p&gt;
104+
</code>
105+
<p class="f4 f3-ns fw2 pl3 pl4-ns bl bw2 b--black-10 mb5">Font-weight: 200</p>
106+
<code class="f6 db">
107+
&lt;p class="fw3"&gt;Font-weight: 300&lt;/p&gt;
108+
</code>
109+
<p class="f4 f3-ns fw3 pl3 pl4-ns bl bw2 b--black-10 mb5">Font-weight: 300</p>
110+
<code class="f6 db">
111+
&lt;p class="fw4"&gt;Font-weight: 400&lt;/p&gt;
112+
</code>
113+
<p class="f4 f3-ns fw4 pl3 pl4-ns bl bw2 b--black-10 mb5">Font-weight: 400</p>
114+
<code class="f6 db">
115+
&lt;p class="fw5"&gt;Font-weight: 500&lt;/p&gt;
116+
</code>
117+
<p class="f4 f3-ns fw5 pl3 pl4-ns bl bw2 b--black-10 mb5">Font-weight: 500</p>
118+
<code class="f6 db">
119+
&lt;p class="fw6"&gt;Font-weight: 600&lt;/p&gt;
120+
</code>
121+
<p class="f4 f3-ns fw6 pl3 pl4-ns bl bw2 b--black-10 mb5">Font-weight: 600</p>
122+
<code class="f6 db">
123+
&lt;p class="fw7"&gt;Font-weight: 700&lt;/p&gt;
124+
</code>
125+
<p class="f4 f3-ns fw7 pl3 pl4-ns bl bw2 b--black-10 mb5">Font-weight: 700</p>
126+
<code class="f6 db">
127+
&lt;p class="fw8"&gt;Font-weight: 800&lt;/p&gt;
128+
</code>
129+
<p class="f4 f3-ns fw8 pl3 pl4-ns bl bw2 b--black-10 mb5">Font-weight: 800</p>
130+
<code class="f6 db">
131+
&lt;p class="fw9"&gt;Font-weight: 900&lt;/p&gt;
132+
</code>
133+
<p class="f4 f3-ns fw9 pl3 pl4-ns bl bw2 b--black-10 mb5">Font-weight: 900</p>
106134
<div class="mt5 cf">
107135
<div class="dib mr4">
108136
<h4 class="f6 fw6">Previous</h4>
@@ -118,7 +146,7 @@ <h4 class="f6 fw6">Reference</h4>
118146
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight" class="link fw6 blue dim">MDN - Font Weight</a>
119147
</div>
120148
</div>
121-
<section class="bg-white bt bb b--black-40 black-70 pt4 pb5 overflow-container">
149+
<section class="bg-white bt bb b--black-40 black-70 pt4 pb5 mb5 overflow-container">
122150
<header class="ph3 ph5-ns pt4">
123151
<h4 class="f4 mv0 fw6 dib mr4">tachyons-font-weight</h4>
124152
<span class="f4 b dib pl0 ml0 mr4">v5.0.1</span>

‎docs/typography/text-transform/index.html

+10-12
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
</div>
7171
</header>
7272
<article class="pa3 ph5-ns">
73-
<h3 class="f6 ttu tracked mt0">Measure</h3>
73+
<h3 class="f6 ttu tracked mt0">Text Transform</h3>
7474
<p class="measure f4 f3-ns lh-copy">
7575
Use these classes to set the capitalization of text.
7676
</p>
@@ -79,17 +79,15 @@ <h3 class="f6 ttu tracked mt0">Measure</h3>
7979
</p>
8080
</article>
8181
<div class="ph3 ph5-ns pt4 pb5">
82-
<h2 class="f3 b">Examples</h2>
83-
<h3 class="fw4 ttu mbn">Uppercase</h3>
84-
<code class="code">.ttu </code>
85-
<h3 class="fw4 ttl mbn">LOWERCASE</h3>
86-
<code class="code">.ttl </code>
87-
<h3 class="fw4 ttc mbn">capitalize multiple words</h3>
88-
<code class="code">.ttc</code>
89-
<h3 class="fw4 ttn mbn">TEXT Transform none</h3>
90-
<code class="code">.ttn</code>
91-
<h3 class="fw4 ttu tracked mbn">Uppercase with tracking</h3>
92-
<code class="code">.ttu.tracked</code>
82+
<h3 class="f5 mb4 pb2 bb">Examples</h3>
83+
<code class="f6 db"> &lt;p class="ttu tracked"&gt;Uppercase&lt;/p&gt; </code>
84+
<p class="fw4 ttu tracked mb0">Uppercase</p>
85+
86+
<code class="f6 db mt4"> &lt;p class="ttl"&gt;Uppercase&lt;/p&gt; </code>
87+
<p class="fw4 ttl mb0">LOWERCASE</p>
88+
89+
<code class="f6 db mt4"> &lt;p class="ttc"&gt;Capitalize&lt;/p&gt; </code>
90+
<p class="fw4 ttc mb0">capitalize multiple words</p>
9391

9492
<div class="mt5 cf">
9593
<div class="dib mr4">

‎docs/typography/vertical-align/index.html

+109-36
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
<h3 class="f6 ttu tracked mt0">Vertical Align</h3>
7474
<p class="measure f4 f3-ns lh-copy">
7575
Use vertical align to set typography just right. Vertical align
76-
works on text and on table cells.
76+
works on inline-level elements (display inline and inline-block) and on table cells.
7777
</p>
7878
<p class="measure f5 f4-ns lh-copy">
7979
This documents how vertical align affects text elements. If you'd
@@ -82,54 +82,127 @@ <h3 class="f6 ttu tracked mt0">Vertical Align</h3>
8282
</article>
8383
<div class="ph3 ph5-ns pt4 pb5">
8484
<h3 class="f5 mb4 pb2 bb">Examples</h3>
85-
<h3 class="f5 book sans-serif pt4 caps">Inline Alignment</h3>
86-
<p class="f4 measure">
87-
Lorem ipsum dolor sit amet, consetetur sadipscing
88-
<span class="v-sub bg-lightest-red">Sub aligned text (v-sub)</span>
89-
elitr, sed diam nonumy eirmod
90-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
91-
<span class="v-sup bg-lightest-red">Super aligned text (v-sup)</span>
92-
vero eos et accusam et justo duo dolores et ea rebum.
93-
</p>
94-
<h3 class="f5 book sans-serif pt4 caps">Table Alignment</h3>
85+
<h3 class="f5 mt4">Table Alignment</h3>
86+
<p class="measure lh-copy">You can use vertical alignment classes on either td elements or on elements with a class of <code>dtc</code> that are direct
87+
children of an element with a class of <code>dt</code>.
9588
<table border="0" cellspacing="8" cellpadding="8">
9689
<tr>
97-
<td>
98-
.v-mid
99-
</td>
100-
<td class="measure bg-black-10">
101-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
102-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
90+
<td class="measure bg-light-red">
91+
<img width="128" src="http://mrmrs.io/images/0001.jpg">
10392
</td>
104-
<td class="v-mid bg-black-05">
105-
Aligned to middle
93+
<td class="v-mid bg-black-025">
94+
<code class="db f6">.v-mid</code>
95+
Align text to the middle.
10696
</td>
10797
</tr>
10898
<tr class="bt b--white bw3">
109-
<td>
110-
.v-top
111-
</td>
112-
<td class="measure bg-black-10">
113-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
114-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
99+
<td class="bg-light-red">
100+
<img width="128" src="http://mrmrs.io/images/0002.jpg">
115101
</td>
116-
<td class="v-top bg-black-05">
117-
Aligned to top
102+
<td class="v-top bg-black-025">
103+
<code class="db f6">.v-top</code>
104+
Align text to the top.
118105
</td>
119106
</tr>
120107
<tr class="bt b--white bw3">
121-
<td>
122-
.v-btm
108+
<td class="measure bg-light-red">
109+
<img width="128" src="http://mrmrs.io/images/0005.jpg">
123110
</td>
124-
<td class="measure bg-black-10">
125-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
126-
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
127-
</td>
128-
<td class="v-btm bg-black-05">
129-
Aligned to Bottom
111+
<td class="v-btm bg-black-025">
112+
<code class="db f6">.v-btm</code>
113+
Align text to the middle.
130114
</td>
131115
</tr>
132116
</table>
117+
<h3 class="f5 mt5">Inline-block Alignment</h3>
118+
<h4 class="f6 mt4">Align to the top</h4>
119+
<code class="f6 pre db">
120+
&lt;p class="dib v-top"&gt;Content&lt;/p&gt;
121+
&lt;p class="dib v-top"&gt;Content&lt;/p&gt;
122+
&lt;p class="dib v-top"&gt;Content&lt;/p&gt;
123+
</code>
124+
<div class="pl4-l bl-l bw2-l b--black-10 mt4">
125+
<p class="f6 measure-narrow dib v-top mr4 outline">
126+
You can say, "I love you," in Helvetica. And you can say it with Helvetica
127+
Extra Light if you want to be really fancy. Or you can say it with the Extra
128+
Bold if it's really intensive and passionate, you know, and it might work.
129+
</p>
130+
<p class="f6 measure-narrow dib v-top mr4 outline">
131+
You can say, "I love you," in Helvetica. And you can say it with Helvetica
132+
Extra Light...
133+
</p>
134+
<p class="f6 measure-narrow dib v-top outline">
135+
if you want to be really fancy. Or you can say it with the Extra
136+
Bold if it's really intensive and passionate, you know, and it might work.
137+
</p>
138+
</div>
139+
<h4 class="f6 mt5">Mix and match</h4>
140+
<code class="f6 pre db">
141+
&lt;p class="dib v-top"&gt;Content&lt;/p&gt;
142+
&lt;p class="dib v-btm"&gt;Content&lt;/p&gt;
143+
&lt;p class="dib v-top"&gt;Content&lt;/p&gt;
144+
</code>
145+
<div class="pl4-l bl-l bw2-l b--black-10 mt4">
146+
<p class="f6 measure-narrow dib v-top mr4 outline">
147+
You can say, "I love you," in Helvetica. And you can say it with Helvetica
148+
Extra Light if you want to be really fancy. Or you can say it with the Extra
149+
Bold if it's really intensive and passionate, you know, and it might work.
150+
</p>
151+
<p class="f6 measure-narrow dib v-btm mr4 outline">
152+
You can say, "I love you," in Helvetica. And you can say it with Helvetica
153+
Extra Light...
154+
</p>
155+
<p class="f6 measure-narrow dib v-top outline">
156+
if you want to be really fancy. Or you can say it with the Extra
157+
Bold if it's really intensive and passionate, you know, and it might work.
158+
</p>
159+
</div>
160+
<h4 class="f6 mt5">Align to the middle</h4>
161+
<code class="f6 pre db">
162+
&lt;p class="dib v-mid"&gt;Content&lt;/p&gt;
163+
&lt;p class="dib v-mid"&gt;Content&lt;/p&gt;
164+
&lt;p class="dib v-mid"&gt;Content&lt;/p&gt;
165+
</code>
166+
<div class="pl4-l bl-l bw2-l b--black-10 mt4">
167+
<p class="f6 measure-narrow dib v-mid mr4 outline">
168+
You can say, "I love you," in Helvetica. And you can say it with Helvetica
169+
Extra Light if you want to be really fancy. Or you can say it with the Extra
170+
Bold if it's really intensive and passionate, you know, and it might work.
171+
</p>
172+
<p class="f6 measure-narrow dib v-mid mr4 outline">
173+
You can say, "I love you," in Helvetica. And you can say it with Helvetica
174+
Extra Light...
175+
</p>
176+
<p class="f6 measure-narrow dib v-mid outline">
177+
if you want to be really fancy.
178+
</p>
179+
</div>
180+
<h4 class="f6 mt5">Align to the bottom</h4>
181+
<code class="f6 pre db">
182+
&lt;p class="dib v-btm"&gt;Content&lt;/p&gt;
183+
&lt;p class="dib v-btm"&gt;Content&lt;/p&gt;
184+
&lt;p class="dib v-btm"&gt;Content&lt;/p&gt;
185+
</code>
186+
<div class="pl4-l bl-l bw2-l b--black-10 mt4">
187+
<p class="f6 measure-narrow dib v-btm mr4 outline">
188+
You can say, "I love you," in Helvetica. And you can say it with Helvetica
189+
Extra Light if you want to be really fancy. Or you can say it with the Extra
190+
Bold if it's really intensive and passionate, you know, and it might work.
191+
</p>
192+
<p class="f6 measure-narrow dib v-btm mr4 outline">
193+
You can say, "I love you," in Helvetica. And you can say it with Helvetica
194+
Extra Light...
195+
</p>
196+
<p class="f6 measure-narrow dib v-btm outline">
197+
if you want to be really fancy.
198+
</p>
199+
</div>
200+
201+
202+
203+
204+
205+
133206
<div class="mt5 cf">
134207
<div class="dib mr4">
135208
<h4 class="f6 fw6">Previous</h4>
@@ -145,7 +218,7 @@ <h4 class="f6 fw6">Reference</h4>
145218
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align" class="link fw6 blue dim">MDN - Vertical Align</a>
146219
</div>
147220
</div>
148-
<section class="bg-white black-70 bt bb b--black-40 pt4 pb5 overflow-container">
221+
<section class="bg-white black-70 bt bb b--black-40 pt4 pb5 overflow-container mb5">
149222
<header class="ph3 ph5-ns pt4">
150223
<h4 class="f4 mv0 fw6 dib mr4">tachyons-vertical-align</h4>
151224
<span class="f4 b dib pl0 ml0 mr4">v4.0.1</span>

0 commit comments

Comments
 (0)