Skip to content

Commit 21eb58f

Browse files
author
mrmrs
committed
Update links docs.
1 parent 4982ff7 commit 21eb58f

File tree

2 files changed

+498
-52
lines changed

2 files changed

+498
-52
lines changed

‎docs/elements/links/index.html

+249-26
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<title>
5-
Links / Themes / Docs / TACHYONS
5+
Links / Elements / Docs / TACHYONS
66
</title>
77
<meta name="description" content="css">
88
<meta charset="utf-8">
@@ -76,42 +76,263 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-links</h4>
7676
</dl>
7777
</div>
7878
<p class="measure f4 f3-ns lh-copy">
79-
Tachyons has some basic link styling utilities - but the framework
80-
assumes you'll want to customize colors and animations yourself.
81-
</p>
82-
<p class="measure lh-copy f5 f4-ns">
83-
Applying the link class to anchor elements will remove the default
84-
underline style on links.
79+
Tachyons doesn't style links by default, but provides the necessary classes to
80+
generate a wide variety of link styles.
8581
</p>
8682
</article>
8783
<div class="ph3 ph5-ns pt4 pb5">
88-
<h2 class="f3 bold">Examples</h2>
84+
<h2 class="f5 f4-ns fw6 bold">Examples</h2>
85+
<h4 class="f5">Underline links and animate to color</h4>
86+
<p>
87+
To keep the default underline, but animate the color transition, combine classes from skins and skins-pseudo.
88+
</p>
89+
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
90+
<a href="#" class="link underline blue hover-orange">link text</a>
91+
<code class="f6 db mt3">&lt;a href="#" class="link underline blue hover-orange"&gt;link text&lt;/a&gt; </code>
92+
</div>
93+
<h4 class="f5 mt4 mt5-ns">Underline on hover</h4>
8994
<p>
90-
<a href="#" class="db b link pv1 hover-gray focus-gray black">Black link</a>
91-
<a href="#" class="db b link pv1 hover-black focus-black near-black">Near-black link</a>
92-
<a href="#" class="db b link pv1 hover-black focus-black dark-gray">Dark-gray link</a>
93-
<a href="#" class="db b link pv1 hover-black focus-black mid-gray">Mid-gray link</a>
94-
<a href="#" class="db b link pv1 hover-black focus-black gray">Gray link</a>
95+
To add an underline on hover and focus, use the class 'underline-hover'.
9596
</p>
96-
<div class="mt5 cf">
97-
<div class="dib mr4">
98-
<h4 class="f6 fw6">Previous</h4>
97+
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
98+
<a href="#" class="link underline-hover red">link text</a>
99+
<code class="f6 db mt3">&lt;a href="#" class="link underline-hover red"&gt;link text&lt;/a&gt; </code>
100+
</div>
101+
<h4 class="f5 mt4 mt5-ns">Dim on hover</h4>
102+
<p>
103+
To dim a link on hover, add the dim class.
104+
</p>
105+
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
106+
<a href="#" class="dim">link text</a>
107+
<code class="f6 db mt3">&lt;a href="#" class="dim"&gt;link text&lt;/a&gt; </code>
108+
</div>
109+
<h4 class="f5 mt4 mt5-ns">Add background color on hover</h4>
110+
<p>
111+
You can add any background color from the skins-pseudo module.
112+
</p>
113+
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
114+
<a href="#" class="link black hover-bg-light-blue">link text</a>
115+
<code class="f6 db mt3">&lt;a href="#" class="link black hover-bg-light-blue"&gt;link text&lt;/a&gt; </code>
116+
117+
</div>
118+
<h4 class="f5 mt4 mt5-ns">Animate background color on hover</h4>
119+
<p>
120+
You can add any background color from the skins-pseudo module.
121+
</p>
122+
<div class="bl-ns bw2-ns b--black-05 pl3-ns">
123+
<a href="#" class="link black bg-animate hover-bg-light-blue">link text</a>
124+
<code class="f6 db mt3">&lt;a href="#" class="link black bg-animate hover-bg-light-blue"&gt;link text&lt;/a&gt; </code>
125+
</div>
126+
127+
<h4 class="f5 mt4 mt5-ns">Colors</h4>
128+
<p>Below are examples of combining each color in the skins module with the dim class.</p>
129+
<ul class="list pl0">
130+
<li class="f5 pv2 bb b--black-10">
131+
<a href="#" class="link dim black">black link</a>
132+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim black"&gt;black link&lt;/a&gt; </code>
133+
</li>
134+
<li class="f5 pv2 bb b--black-10">
135+
<a href="#" class="link dim near-black">near-black link</a>
136+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim near-black"&gt;near-black link&lt;/a&gt;</code>
137+
</li>
138+
<li class="f5 pv2 bb b--black-10">
139+
<a href="#" class="link dim dark-gray">dark-gray link</a>
140+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim dark-gray"&gt;dark-gray link&lt;/a&gt;</code>
141+
</li>
142+
<li class="f5 pv2 bb b--black-10">
143+
<a href="#" class="link dim mid-gray">mid-gray link</a>
144+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim mid-gray"&gt;mid-gray link&lt;/a&gt;</code>
145+
</li>
146+
<li class="f5 pv2 bb b--black-10">
147+
<a href="#" class="link dim gray">gray link</a>
148+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim gray"&gt;gray link&lt;/a&gt;</code>
149+
</li>
150+
<li class="f5 pv2 bb b--black-10">
151+
<a href="#" class="link dim black-90">black-90 link</a>
152+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim black-90"&gt;black-90 link&lt;/a&gt;</code>
153+
</li>
154+
<li class="f5 pv2 bb b--black-10">
155+
<a href="#" class="link dim black-80">black-80 link</a>
156+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim black-80"&gt;black-80 link&lt;/a&gt;</code>
157+
</li>
158+
<li class="f5 pv2 bb b--black-10">
159+
<a href="#" class="link dim black-70">black-70 link</a>
160+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim black-70"&gt;black-70 link&lt;/a&gt;</code>
161+
</li>
162+
<li class="f5 pv2 bb b--black-10">
163+
<a href="#" class="link dim black-60">black-60 link</a>
164+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim black-60"&gt;black-60 link&lt;/a&gt;</code>
165+
</li>
166+
<li class="f5 pv2 bb b--black-10">
167+
<a href="#" class="link dim black-50">black-50 link</a>
168+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim black-50"&gt;black-50 link&lt;/a&gt;</code>
169+
</li>
170+
<li class="f5 pv2 bb b--black-10">
171+
<a href="#" class="link dim navy">navy link</a>
172+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim navy"&gt;navy link&lt;/a&gt;</code>
173+
</li>
174+
<li class="f5 pv2 bb b--black-10">
175+
<a href="#" class="link dim dark-blue">dark-blue link</a>
176+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim dark-blue"&gt;dark-blue link&lt;/a&gt;</code>
177+
</li>
178+
<li class="f5 pv2 bb b--black-10">
179+
<a href="#" class="link dim blue">blue link</a>
180+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim blue"&gt;blue link&lt;/a&gt;</code>
181+
</li>
182+
<li class="f5 pv2 bb b--black-10">
183+
<a href="#" class="link dim dark-red">dark-red link</a>
184+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim dark-red"&gt;dark-red link&lt;/a&gt;</code>
185+
</li>
186+
</ul>
187+
<ul class="list pl0 bg-near-black white-80">
188+
<li class="f5 pv2 bb b--black-10">
189+
<a href="#" class="link dim silver">silver link</a>
190+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim silver"&gt;silver link&lt;/a&gt;</code>
191+
</li>
192+
<li class="f5 pv2 bb b--black-10">
193+
<a href="#" class="link dim light-silver">light-silver link</a>
194+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim light-silver"&gt;light-silver link&lt;/a&gt;</code>
195+
</li>
196+
<li class="f5 pv2 bb b--black-10">
197+
<a href="#" class="link dim moon-gray">moon-gray link</a>
198+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim moon-gray"&gt;moon-gray link&lt;/a&gt;</code>
199+
</li>
200+
<li class="f5 pv2 bb b--black-10">
201+
<a href="#" class="link dim light-gray">light-gray link</a>
202+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim light-gray"&gt;light-gray link&lt;/a&gt;</code>
203+
</li>
204+
<li class="f5 pv2 bb b--black-10">
205+
<a href="#" class="link dim near-white">near-white link</a>
206+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim near-white"&gt;near-white link&lt;/a&gt;</code>
207+
</li>
208+
<li class="f5 pv2 bb b--black-10">
209+
<a href="#" class="link dim white">white link</a>
210+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim white"&gt;white link&lt;/a&gt;</code>
211+
</li>
212+
<li class="f5 pv2 bb b--black-10">
213+
<a href="#" class="link dim white-90">white-90 link</a>
214+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim white-90"&gt;white-90 link&lt;/a&gt;</code>
215+
</li>
216+
<li class="f5 pv2 bb b--black-10">
217+
<a href="#" class="link dim white-80">white-80 link</a>
218+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim white-80"&gt;white-80 link&lt;/a&gt;</code>
219+
</li>
220+
<li class="f5 pv2 bb b--black-10">
221+
<a href="#" class="link dim white-70">white-70 link</a>
222+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim white-70"&gt;white-70 link&lt;/a&gt;</code>
223+
</li>
224+
<li class="f5 pv2 bb b--black-10">
225+
<a href="#" class="link dim white-60">white-60 link</a>
226+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim white-60"&gt;white-60 link&lt;/a&gt;</code>
227+
</li>
228+
<li class="f5 pv2 bb b--black-10">
229+
<a href="#" class="link dim white-50">white-50 link</a>
230+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim white-50"&gt;white-50 link&lt;/a&gt;</code>
231+
</li>
232+
<li class="f5 pv2 bb b--black-10">
233+
<a href="#" class="link dim red">red link</a>
234+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim red"&gt;red link&lt;/a&gt;</code>
235+
</li>
236+
<li class="f5 pv2 bb b--black-10">
237+
<a href="#" class="link dim light-red">light-red link</a>
238+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim light-red"&gt;light-red link&lt;/a&gt;</code>
239+
</li>
240+
<li class="f5 pv2 bb b--black-10">
241+
<a href="#" class="link dim orange">orange link</a>
242+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim orange"&gt;orange link&lt;/a&gt;</code>
243+
</li>
244+
<li class="f5 pv2 bb b--black-10">
245+
<a href="#" class="link dim gold">gold link</a>
246+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim gold"&gt;gold link&lt;/a&gt;</code>
247+
</li>
248+
<li class="f5 pv2 bb b--black-10">
249+
<a href="#" class="link dim yellow">yellow link</a>
250+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim yellow"&gt;yellow link&lt;/a&gt;</code>
251+
</li>
252+
<li class="f5 pv2 bb b--black-10">
253+
<a href="#" class="link dim light-yellow">light-yellow link</a>
254+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim light-yellow"&gt;light-yellow link&lt;/a&gt;</code>
255+
</li>
256+
<li class="f5 pv2 bb b--black-10">
257+
<a href="#" class="link dim purple">purple link</a>
258+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim purple"&gt;purple link&lt;/a&gt;</code>
259+
</li>
260+
<li class="f5 pv2 bb b--black-10">
261+
<a href="#" class="link dim light-purple">light-purple link</a>
262+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim light-purple"&gt;light-purple link&lt;/a&gt;</code>
263+
</li>
264+
<li class="f5 pv2 bb b--black-10">
265+
<a href="#" class="link dim dark-pink">dark-pink link</a>
266+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim dark-pink"&gt;dark-pink link&lt;/a&gt;</code>
267+
</li>
268+
<li class="f5 pv2 bb b--black-10">
269+
<a href="#" class="link dim hot-pink">hot-pink link</a>
270+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim hot-pink"&gt;hot-pink link&lt;/a&gt;</code>
271+
</li>
272+
<li class="f5 pv2 bb b--black-10">
273+
<a href="#" class="link dim pink">pink link</a>
274+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim pink"&gt;pink link&lt;/a&gt;</code>
275+
</li>
276+
<li class="f5 pv2 bb b--black-10">
277+
<a href="#" class="link dim light-pink">light-pink link</a>
278+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim light-pink"&gt;light-pink link&lt;/a&gt;</code>
279+
</li>
280+
<li class="f5 pv2 bb b--black-10">
281+
<a href="#" class="link dim dark-green">dark-green link</a>
282+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim dark-green"&gt;dark-green link&lt;/a&gt;</code>
283+
</li>
284+
<li class="f5 pv2 bb b--black-10">
285+
<a href="#" class="link dim green">green link</a>
286+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim green"&gt;green link&lt;/a&gt;</code>
287+
</li>
288+
<li class="f5 pv2 bb b--black-10">
289+
<a href="#" class="link dim light-green">light-green link</a>
290+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim light-green"&gt;light-green link&lt;/a&gt;</code>
291+
</li>
292+
<li class="f5 pv2 bb b--black-10">
293+
<a href="#" class="link dim light-blue">light-blue link</a>
294+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim light-blue"&gt;light-blue link&lt;/a&gt;</code>
295+
</li>
296+
<li class="f5 pv2 bb b--black-10">
297+
<a href="#" class="link dim lightest-blue">lightest-blue link</a>
298+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim lightest-blue"&gt;lightest-blue link&lt;/a&gt;</code>
299+
</li>
300+
<li class="f5 pv2 bb b--black-10">
301+
<a href="#" class="link dim washed-blue">washed-blue link</a>
302+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim washed-blue"&gt;washed-blue link&lt;/a&gt;</code>
303+
</li>
304+
<li class="f5 pv2 bb b--black-10">
305+
<a href="#" class="link dim washed-green">washed-green link</a>
306+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim washed-green"&gt;washed-green link&lt;/a&gt;</code>
307+
</li>
308+
<li class="f5 pv2 bb b--black-10">
309+
<a href="#" class="link dim washed-yellow">washed-yellow link</a>
310+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim washed-yellow"&gt;washed-yellow link&lt;/a&gt;</code>
311+
</li>
312+
<li class="f5 pv2 bb b--black-10">
313+
<a href="#" class="link dim washed-red">washed-red link</a>
314+
<code class="f6 db di-ns pl4-ns">&lt;a href="#" class="link dim washed-red"&gt;washed-red link&lt;/a&gt;</code>
315+
</li>
316+
</ul>
317+
<div class="mt5 pv4 bt bb b--black-10">
318+
<div class="dib mb4 mr5 v-top">
319+
<h4 class="f6 fw6 mt0">Previous</h4>
99320
<a href="/docs/elements/images/" class="link fw6 blue dim">Images</a>
100321
</div>
101-
<div class="dib">
102-
<h4 class="f6 fw6">Next</h4>
322+
<div class="dib mb4 mr5-m mr6-l v-top">
323+
<h4 class="f6 fw6 mt0">Next</h4>
103324
<a href="/docs/elements/lists/" class="link fw6 blue dim">Lists</a>
104325
</div>
105-
</div>
106-
<div class="mt5">
107-
<h4 class="f6 fw6">Reference</h4>
108-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover" class="link db fw6 blue dim">MDN - Hover</a>
109-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus" class="link db fw6 blue dim">MDN - Focus</a>
326+
<div class="dib">
327+
<h4 class="f6 fw6 mt0">Reference</h4>
328+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover" class="link db dib-ns fw6 blue dim mr4-ns">MDN - Hover</a>
329+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus" class="link db dib-ns fw6 blue dim">MDN - Focus</a>
330+
</div>
110331
</div>
111332
</div>
112-
<section class="bg-white black-70 pt4 pb5 overflow-container">
333+
<section class="bg-white black-70 pb5 overflow-container">
113334
<header class="ph3 ph5-ns pt4">
114-
<kbd>src/_links.css</kbd>
335+
<h4 class="fw6 f6 di pr3">Source code</h4> <kbd>src/_links.css</kbd>
115336
</header>
116337
<pre class="ph3 ph5-ns">
117338
<code class="code" style="font-size: .75rem;">
@@ -146,7 +367,8 @@ <h4 class="f6 fw6">Reference</h4>
146367
</code>
147368
</pre>
148369
</section>
149-
<div class="ph3 ph5-ns pb5">
370+
<div class="bt b--black-10 pt4">
371+
<div class="ph3 ph5-ns pb5">
150372
<article class="pb3">
151373
<h2 class="f6 fw7 ttu tracked">Overview of Tachyons</h2>
152374
<a class="f5 fw4 dim link blue db pv1" href="/docs/table-of-styles/" title="View a list of styles">Table of Styles</a>
@@ -214,6 +436,7 @@ <h2 class="f6 fw7 ttu tracked">Elements</h2>
214436
</section>
215437
</div>
216438

439+
</div>
217440
</main>
218441
<footer class="bg-white black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
219442
<div class="mw9 center">

0 commit comments

Comments
 (0)