Skip to content

Commit ce0a6ec

Browse files
author
mrmrs
committed
Update docs.
1 parent cc4747c commit ce0a6ec

File tree

38 files changed

+1433
-893
lines changed

38 files changed

+1433
-893
lines changed

‎css/tachyons.css

+2
Original file line numberDiff line numberDiff line change
@@ -822,6 +822,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
822822
.light-gray { color: #eee; }
823823
.near-white { color: #f4f4f4; }
824824
.white { color: #fff; }
825+
.blue { color: #0074D9; }
826+
.bg-blue { background-color: #0074D9; }
825827
/* Background colors */
826828
.bg-black { background-color: #111; }
827829
.bg-near-black { background-color: #111; }

‎css/tachyons.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/elements/forms/index.html

+222
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,222 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
6+
<title>
7+
Forms / Themes / Docs / TACHYONS
8+
</title>
9+
<meta name="author" content="@mrmrs">
10+
<meta name="description" content="CSS">
11+
<meta name="viewport" content="width=device-width, initial-scale=1">
12+
<link rel="stylesheet" href="/css/tachyons.css">
13+
</head>
14+
<body class="w-100 sans-serif">
15+
16+
<header class="w-100 pa3 ph5-ns bg-near-white">
17+
<div class="dt w-100">
18+
<div class="dtc v-mid tl w-50">
19+
<a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-50 dim" title="Home">
20+
Tachyons
21+
<div class="dib">
22+
<small class="nowrap f6 mt2 mt3-ns pr2 black-50 fw2">v4.0.0-beta.5</small>
23+
</div>
24+
</a>
25+
</div>
26+
<div class="db dtc v-mid w-100 tr">
27+
28+
<a title="Documentation" href="/docs/"
29+
class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
30+
Docs
31+
</a>
32+
<a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/"
33+
class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
34+
GitHub
35+
</a>
36+
<a title="Tachyons Npm Modules" href="/#npm"
37+
class="f6 b link black-50 dim dib">
38+
Npm
39+
</a>
40+
</div>
41+
</div>
42+
</header>
43+
44+
<main class="">
45+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
46+
<h4 class="f4 mv0 fw6 dib mr4">tachyons-forms</h4>
47+
<span class="f4 b dib pl0 ml0 mr4">v2.0.1</span>
48+
<span class="f4 b dib pl0 ml0 mr4">94 B</span>
49+
<div>
50+
<dl class="dib mr4 mt0">
51+
<dt class="f6 db">Declarations </dt>
52+
<dd class="db pl0 ml0 f4 f2-ns b">4</span></dd>
53+
</dl>
54+
<dl class="dib mr4">
55+
<dt class="f6 db pr2">Selectors </dt>
56+
<dd class="db pl0 ml0 f4 f2-ns b">2</dd>
57+
</dl>
58+
<dl class="dib mr4">
59+
<dt class="f6 db pr2">Max. Specificity Score </dt>
60+
<dd class="db pl0 ml0 f4 f2-ns b">10</dd>
61+
</dl>
62+
<dl class="dib mr4">
63+
<dt class="f6 db pr2">Size of Avg. Rule </dt>
64+
<dd class="db pl0 ml0 f4 f2-ns b">2</dd>
65+
</dl>
66+
</div>
67+
<p class="measure f4 f3-ns lh-copy">
68+
Tachyons has some basic form control resets to remove default styles for mobile devices.
69+
</p>
70+
</article>
71+
<div class="ph3 ph5-ns pt4 pb5">
72+
<h2 class="f3 bold">Examples</h2>
73+
<form>
74+
75+
<code class="f6 db">.input-reset</code>
76+
<input type="text" name="" value="" id="" class="input-reset">
77+
78+
<code class="f6 db">.input-reset br2 pa2 ba b--light-gray</code>
79+
<input type="text" name="" value="" id="" class="input-reset br2 ba b--light-gray pa2">
80+
81+
</form>
82+
<div class="mt5 cf">
83+
<div class="dib mr4">
84+
<h1 class="f4 ttu tracked fw6">Previous</h1>
85+
<a href="/docs/layout/position/" class="link fw6 blue dim">Position</a>
86+
</div>
87+
<div class="dib">
88+
<h1 class="f4 ttu tracked fw6">Next</h1>
89+
<a href="/docs/themes/background-size/" class="link fw6 blue dim">Background Size</a>
90+
</div>
91+
</div>
92+
<div class="mt5">
93+
<h1 class="f4 ttu tracked fw6">Reference</h1>
94+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover" class="link db fw6 blue dim">MDN - Hover</a>
95+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus" class="link db fw6 blue dim">MDN - Focus</a>
96+
</div>
97+
</div>
98+
<section class="bg-near-white black-70 pt4 pb5">
99+
<header class="ph3 ph5-ns pt4">
100+
<kbd class="yellow">src/_links.css</kbd>
101+
</header>
102+
<pre class="ph3 ph5-ns">
103+
<code class="code" style="font-size: .75rem;">
104+
/*
105+
106+
FORMS
107+
108+
*/
109+
110+
.input-reset {
111+
-webkit-appearance: none;
112+
-moz-appearance: none;
113+
}
114+
115+
.input-invisible {
116+
outline: 0;
117+
border: 0;
118+
}
119+
120+
121+
</code>
122+
</pre>
123+
</section>
124+
<div class="ph3 ph5-ns pt3 pb5">
125+
<section>
126+
<h2 class="f6 fw7 ttu tracked">Elements</h2>
127+
<a class="f5 fw4 dim link blue db pv1" href="/docs/elements/images/" title="Images">Images</a>
128+
<a class="f5 fw4 dim link blue db pv1" href="/docs/elements/links/" title="Images">Links</a>
129+
<a class="f5 fw4 dim link blue db pv1" href="/docs/elements/lists/" title="Images">Lists</a>
130+
<a class="f5 fw4 dim link blue db pv1 dn" href="/docs/elements/forms/" title="Images">Forms</a>
131+
<section class="cf w-100 mt3">
132+
<article class="fn fl-ns w-100 w-25-l">
133+
<h2 class="f6 fw7 ttu tracked" id="typography">Typography</h2>
134+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/scale" title="Type">Type Scale</a>
135+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/measure/garamond/" title="Measure">Measure</a>
136+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/line-height" title="Line Height">Line Height / Leading</a>
137+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/tracking" title="Tracking">Tracking</a>
138+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/font-weight" title="Font Weights">Font Weights</a>
139+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/font-family" title="Font Families">Font Families</a>
140+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/font-style" title="Font Families">Font Style</a>
141+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/vertical-align" title="Font Families">Vertical Align</a>
142+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/text-align" title="Text Align">Text Align</a>
143+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a>
144+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a>
145+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/white-space" title="White Space">White Space</a>
146+
</article>
147+
<article class="fn fl-ns w-100 w-25-l">
148+
<h2 class="f6 fw7 ttu tracked" id="layout">Layout</h2>
149+
<a class="f5 fw4 dim link blue db pv1" href="/docs/debug/" title="Debugging">Debugging</a>
150+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/box-sizing" title="Box Sizing">Box Sizing</a>
151+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/spacing" title="Spacing">Spacing</a>
152+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/floats" title="Floats">Floats</a>
153+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/clearfix" title="Clears">Clearfix</a>
154+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/display" title="Display">Display</a>
155+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/widths" title="Widths">Widths</a>
156+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/max-widths" title="Max Widths">Max Widths</a>
157+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/heights" title="Heights">Heights</a>
158+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/position" title="Position">Position</a>
159+
</article>
160+
<article class="fn fl-ns w-100 w-25-l">
161+
<h2 class="f6 fw7 ttu tracked">Theming</h2>
162+
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/skins/" title="Hovers">Skins</a>
163+
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/hovers/" title="Hovers">Hovers</a>
164+
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/background-size/" title="Background Size">Background Size</a>
165+
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/borders/" title="Borders">Borders</a>
166+
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/border-radius/" title="Border Radius">Border Radius</a>
167+
</article>
168+
</section>
169+
</section>
170+
</div>
171+
172+
</main>
173+
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--light-gray">
174+
<a href="https://twitter.com/intent/tweet?text=Tachyons: Functional CSS for Humans.&url=http://tachyons.io" target="_blank" class="dn mb3 twitter bg-white link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
175+
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
176+
<path d="M2 4 C6 8 10 12 15 11 A6 6 0 0 1 22 4 A6 6 0 0 1 26 6 A8 8 0 0 0 31 4 A8 8 0 0 1 28 8 A8 8 0 0 0 32 7 A8 8 0 0 1 28 11 A18 18 0 0 1 10 30 A18 18 0 0 1 0 27 A12 12 0 0 0 8 24 A8 8 0 0 1 3 20 A8 8 0 0 0 6 19.5 A8 8 0 0 1 0 12 A8 8 0 0 0 3 13 A8 8 0 0 1 2 4"/>
177+
</svg>
178+
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
179+
</a>
180+
<article>
181+
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
182+
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
183+
</article>
184+
185+
<p>
186+
<a class="black-70 link dim b dib mr3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
187+
Join our Slack Channel
188+
</a>
189+
<a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
190+
Open an Issue
191+
</a>
192+
<a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
193+
GitHub
194+
</a>
195+
</p>
196+
<p class="measure copy lh-copy">
197+
Have a question? Need help? Feel free to open an issue on GitHub or ask a
198+
question in our slack channel. We're here to try and help make designing in
199+
the browser fun.
200+
</p>
201+
<small class="f6 measure db lh-copy mt5">
202+
A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
203+
that always moves faster than light.
204+
The word comes from the Greek:
205+
<br> <br>
206+
ταχύς or tachys, meaning "swift, quick, fast, rapid"
207+
</small>
208+
</footer>
209+
210+
<script>
211+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
212+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
213+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
214+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
215+
216+
ga('create', 'UA-55773803-1', 'auto');
217+
ga('send', 'pageview');
218+
219+
</script>
220+
221+
</body>
222+
</html>

‎docs/elements/images/index.html

+31-31
Original file line numberDiff line numberDiff line change
@@ -96,46 +96,46 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
9696
<div class="ph3 ph5-ns pt3 pb5">
9797
<section>
9898
<h2 class="f6 fw7 ttu tracked">Elements</h2>
99-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/general/images/" title="Images">Images</a>
100-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/general/links/" title="Images">Links</a>
101-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/general/lists/" title="Images">Lists</a>
102-
<a class="f5 fw4 dim link mid-gray db pv1 dn" href="/docs/general/forms/" title="Images">Forms</a>
99+
<a class="f5 fw4 dim link blue db pv1" href="/docs/elements/images/" title="Images">Images</a>
100+
<a class="f5 fw4 dim link blue db pv1" href="/docs/elements/links/" title="Images">Links</a>
101+
<a class="f5 fw4 dim link blue db pv1" href="/docs/elements/lists/" title="Images">Lists</a>
102+
<a class="f5 fw4 dim link blue db pv1 dn" href="/docs/elements/forms/" title="Images">Forms</a>
103103
<section class="cf w-100 mt3">
104104
<article class="fn fl-ns w-100 w-25-l">
105105
<h2 class="f6 fw7 ttu tracked" id="typography">Typography</h2>
106-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/scale" title="Type">Type Scale</a>
107-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/measure/garamond/" title="Measure">Measure</a>
108-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/line-height" title="Line Height">Line Height / Leading</a>
109-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/tracking" title="Tracking">Tracking</a>
110-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/font-weight" title="Font Weights">Font Weights</a>
111-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/font-family" title="Font Families">Font Families</a>
112-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/font-style" title="Font Families">Font Style</a>
113-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/vertical-align" title="Font Families">Vertical Align</a>
114-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/text-align" title="Text Align">Text Align</a>
115-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a>
116-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a>
117-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/typography/white-space" title="White Space">White Space</a>
106+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/scale" title="Type">Type Scale</a>
107+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/measure/garamond/" title="Measure">Measure</a>
108+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/line-height" title="Line Height">Line Height / Leading</a>
109+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/tracking" title="Tracking">Tracking</a>
110+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/font-weight" title="Font Weights">Font Weights</a>
111+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/font-family" title="Font Families">Font Families</a>
112+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/font-style" title="Font Families">Font Style</a>
113+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/vertical-align" title="Font Families">Vertical Align</a>
114+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/text-align" title="Text Align">Text Align</a>
115+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a>
116+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a>
117+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/white-space" title="White Space">White Space</a>
118118
</article>
119119
<article class="fn fl-ns w-100 w-25-l">
120120
<h2 class="f6 fw7 ttu tracked" id="layout">Layout</h2>
121-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/debug/" title="Debugging">Debugging</a>
122-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/box-sizing" title="Box Sizing">Box Sizing</a>
123-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/spacing" title="Spacing">Spacing</a>
124-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/floats" title="Floats">Floats</a>
125-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/clearfix" title="Clears">Clearfix</a>
126-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/display" title="Display">Display</a>
127-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/widths" title="Widths">Widths</a>
128-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/max-widths" title="Max Widths">Max Widths</a>
129-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/heights" title="Heights">Heights</a>
130-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/layout/position" title="Position">Position</a>
121+
<a class="f5 fw4 dim link blue db pv1" href="/docs/debug/" title="Debugging">Debugging</a>
122+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/box-sizing" title="Box Sizing">Box Sizing</a>
123+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/spacing" title="Spacing">Spacing</a>
124+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/floats" title="Floats">Floats</a>
125+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/clearfix" title="Clears">Clearfix</a>
126+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/display" title="Display">Display</a>
127+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/widths" title="Widths">Widths</a>
128+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/max-widths" title="Max Widths">Max Widths</a>
129+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/heights" title="Heights">Heights</a>
130+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/position" title="Position">Position</a>
131131
</article>
132132
<article class="fn fl-ns w-100 w-25-l">
133133
<h2 class="f6 fw7 ttu tracked">Theming</h2>
134-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/skins/" title="Hovers">Skins</a>
135-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/hovers/" title="Hovers">Hovers</a>
136-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/background-size/" title="Background Size">Background Size</a>
137-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/borders/" title="Borders">Borders</a>
138-
<a class="f5 fw4 dim link mid-gray db pv1" href="/docs/themes/border-radius/" title="Border Radius">Border Radius</a>
134+
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/skins/" title="Hovers">Skins</a>
135+
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/hovers/" title="Hovers">Hovers</a>
136+
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/background-size/" title="Background Size">Background Size</a>
137+
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/borders/" title="Borders">Borders</a>
138+
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/border-radius/" title="Border Radius">Border Radius</a>
139139
</article>
140140
</section>
141141
</section>

‎docs/elements/links/index.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -76,9 +76,11 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-links</h4>
7676
<div class="ph3 ph5-ns pt4 pb5">
7777
<h2 class="f3 bold">Examples</h2>
7878
<p>
79-
<a href="#" class="f3 b db link pv1 black">Black link</a>
80-
<a href="#" class="f3 b db link pv1 dark-gray">Dark-gray link</a>
81-
<a href="#" class="f3 b db link pv1 gray">Gray link</a>
79+
<a href="#" class="db b link pv1 hover-gray black">Black link</a>
80+
<a href="#" class="db b link pv1 hover-black near-black">Near-black link</a>
81+
<a href="#" class="db b link pv1 hover-black dark-gray">Dark-gray link</a>
82+
<a href="#" class="db b link pv1 hover-black mid-gray">Mid-gray link</a>
83+
<a href="#" class="db b link pv1 hover-black gray">Gray link</a>
8284
</p>
8385
<div class="mt5 cf">
8486
<div class="dib mr4">
@@ -98,7 +100,7 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
98100
</div>
99101
<section class="bg-near-white black-70 pt4 pb5">
100102
<header class="ph3 ph5-ns pt4">
101-
<kbd class="yellow">src/_hovers.css</kbd>
103+
<kbd class="yellow">src/_links.css</kbd>
102104
</header>
103105
<pre class="ph3 ph5-ns">
104106
<code class="code" style="font-size: .75rem;">

0 commit comments

Comments
 (0)