Skip to content

Commit cd21eab

Browse files
johnojohno
committed
Merge pull request #26 from tachyons-css/documentation
Clean up code
2 parents 493e4f2 + df26d32 commit cd21eab

File tree

64 files changed

+6434
-6277
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+6434
-6277
lines changed

‎docs/debug/index.html

+303-283
Large diffs are not rendered by default.

‎docs/elements/forms/index.html

+67-57
Original file line numberDiff line numberDiff line change
@@ -21,27 +21,27 @@
2121
<header class="w-100 pa3 ph5-ns bg-near-white">
2222
<div class="dt w-100">
2323
<div class="dtc v-mid tl w-50">
24-
<a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-50 dim" title="Home">
24+
<a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-70 dim" title="Home">
2525
Tachyons
2626
<div class="dib">
27-
<small class="nowrap f6 mt2 mt3-ns pr2 black-50 fw2">v4.0.0-beta.5</small>
27+
<small class="nowrap f6 mt2 mt3-ns pr2 black-70 fw2">v4.0.0-beta.12</small>
2828
</div>
2929
</a>
3030
</div>
3131
<div class="db dtc v-mid w-100 tr">
3232

3333
<a title="Documentation" href="/docs/"
34-
class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
34+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
3535
Docs
3636
</a>
37+
<a title="Components" href="/components/"
38+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
39+
Components
40+
</a>
3741
<a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/"
38-
class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
42+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-ns">
3943
GitHub
4044
</a>
41-
<a title="Tachyons Npm Modules" href="/#npm"
42-
class="f6 b link black-50 dim dib">
43-
Npm
44-
</a>
4545
</div>
4646
</div>
4747
</header>
@@ -52,53 +52,53 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-forms</h4>
5252
<span class="f4 b dib pl0 ml0 mr4">v2.0.1</span>
5353
<span class="f4 b dib pl0 ml0 mr4">94 B</span>
5454
<div>
55-
<dl class="dib mr4 mt0">
56-
<dt class="f6 db">Declarations </dt>
57-
<dd class="db pl0 ml0 f4 f2-ns b">4</span></dd>
58-
</dl>
59-
<dl class="dib mr4">
60-
<dt class="f6 db pr2">Selectors </dt>
61-
<dd class="db pl0 ml0 f4 f2-ns b">2</dd>
62-
</dl>
63-
<dl class="dib mr4">
64-
<dt class="f6 db pr2">Max. Specificity Score </dt>
65-
<dd class="db pl0 ml0 f4 f2-ns b">10</dd>
66-
</dl>
67-
<dl class="dib mr4">
68-
<dt class="f6 db pr2">Size of Avg. Rule </dt>
69-
<dd class="db pl0 ml0 f4 f2-ns b">2</dd>
70-
</dl>
55+
<dl class="dib mr4 mt0">
56+
<dt class="f6 db">Declarations </dt>
57+
<dd class="db pl0 ml0 f4 f2-ns b">4</dd>
58+
</dl>
59+
<dl class="dib mr4">
60+
<dt class="f6 db pr2">Selectors </dt>
61+
<dd class="db pl0 ml0 f4 f2-ns b">2</dd>
62+
</dl>
63+
<dl class="dib mr4">
64+
<dt class="f6 db pr2">Max. Specificity Score </dt>
65+
<dd class="db pl0 ml0 f4 f2-ns b">10</dd>
66+
</dl>
67+
<dl class="dib mr4">
68+
<dt class="f6 db pr2">Size of Avg. Rule </dt>
69+
<dd class="db pl0 ml0 f4 f2-ns b">2</dd>
70+
</dl>
7171
</div>
7272
<p class="measure f4 f3-ns lh-copy">
7373
Tachyons has some basic form control resets to remove default styles for mobile devices.
7474
</p>
7575
</article>
76-
<div class="ph3 ph5-ns pt4 pb5">
77-
<h2 class="f3 bold">Examples</h2>
78-
<form>
79-
<code class="f6 db">input-reset</code>
80-
<input type="text" class="input-reset">
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>
76+
<div class="ph3 ph5-ns pt4 pb5">
77+
<h2 class="f3 bold">Examples</h2>
78+
<form>
79+
<code class="f6 db">input-reset</code>
80+
<input type="text" class="input-reset">
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/elements/lists/" class="link fw6 blue dim">Lists</a>
86+
</div>
87+
<div class="dib">
88+
<h1 class="f4 ttu tracked fw6">Next</h1>
89+
<a href="/docs/typography/scale/" class="link fw6 blue dim">Type Scale</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>
9898
<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>
99+
<header class="ph3 ph5-ns pt4">
100+
<kbd class="yellow">src/_links.css</kbd>
101+
</header>
102102
<pre class="ph3 ph5-ns">
103103
<code class="code" style="font-size: .75rem;">
104104
/*
@@ -132,7 +132,7 @@ <h2 class="f6 fw7 ttu tracked">Elements</h2>
132132
<article class="fn fl-ns w-100 w-25-l">
133133
<h2 class="f6 fw7 ttu tracked" id="typography">Typography</h2>
134134
<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>
135+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/measure/" title="Measure">Measure</a>
136136
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/line-height" title="Line Height">Line Height / Leading</a>
137137
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/tracking" title="Tracking">Tracking</a>
138138
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/font-weight" title="Font Weights">Font Weights</a>
@@ -170,29 +170,39 @@ <h2 class="f6 fw7 ttu tracked">Theming</h2>
170170
</div>
171171

172172
</main>
173-
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--light-gray">
173+
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--black-10">
174174
<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;">
175175
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
176176
<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"/>
177177
</svg>
178178
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
179179
</a>
180+
<div class="mb4">
181+
<a class="black-70 link dim b dib mr3" href="/" title="Home">
182+
Home
183+
</a>
184+
<a class="black-70 link dim b dib mr3" href="/docs" title="Docs">
185+
Docs
186+
</a>
187+
<a class="black-70 link dim b dib mr3" href="/components/" title="Components">
188+
Components
189+
</a>
190+
</div>
180191
<article>
181192
<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>
182193
<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>
183194
</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">
195+
<div class="mt4">
196+
<a class="black-70 link dim b dib mr3 pv2" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
187197
Join our Slack Channel
188198
</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!">
199+
<a class="black-70 link dim b dib mr3 pv2" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
190200
Open an Issue
191201
</a>
192-
<a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
202+
<a class="black-70 link dim b dib mr3 pv2" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
193203
GitHub
194204
</a>
195-
</p>
205+
</div>
196206
<p class="measure copy lh-copy">
197207
Have a question? Need help? Feel free to open an issue on GitHub or ask a
198208
question in our slack channel. We're here to try and help make designing in

‎docs/elements/images/index.html

+50-44
Original file line numberDiff line numberDiff line change
@@ -17,35 +17,30 @@
1717

1818
</head>
1919
<body class="w-100 sans-serif">
20-
2120
<header class="w-100 pa3 ph5-ns bg-near-white">
2221
<div class="dt w-100">
2322
<div class="dtc v-mid tl w-50">
24-
<a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-50 dim" title="Home">
23+
<a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-70 dim" title="Home">
2524
Tachyons
2625
<div class="dib">
27-
<small class="nowrap f6 mt2 mt3-ns pr2 black-50 fw2">v4.0.0-beta.7</small>
26+
<small class="nowrap f6 mt2 mt3-ns pr2 black-70 fw2">v4.0.0-beta.12</small>
2827
</div>
2928
</a>
3029
</div>
3130
<div class="db dtc v-mid w-100 tr">
3231

3332
<a title="Documentation" href="/docs/"
34-
class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
33+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
3534
Docs
3635
</a>
3736
<a title="Components" href="/components/"
38-
class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
37+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
3938
Components
4039
</a>
4140
<a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/"
42-
class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
41+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-ns">
4342
GitHub
4443
</a>
45-
<a title="Tachyons Npm Modules" href="/#npm"
46-
class="f6 b link black-50 dim dib">
47-
Npm
48-
</a>
4944
</div>
5045
</div>
5146
</header>
@@ -54,34 +49,35 @@
5449
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
5550
<h4 class="f4 mv0 fw6 dib mr4">images</h4>
5651
</article>
57-
<div class="ph3 ph5-ns pt4 pb5">
58-
<h2 class="f3 bold">Examples</h2>
59-
<h3 class="f5 book pt4 caps">Image</h3>
60-
<p class="measure lh-copy f5 f4-ns">
61-
This photo is more than 3000 pixels wide. The width is set to 100% to ensure it doesn't bleed off the viewport and always fills its container. In some situations, this will make the image stretch to be larger than it's actual width. To avoid the image stretching past it's width, set max-width instead.
62-
</p>
63-
<code class="f6 db mv3">&lt;img src="/img/over-canvas.jpg" class="w-100"&gt;</code>
64-
<img src="/img/over-canvas.jpg" class="w-100">
65-
<p class="f5 f4-ns lh-copy measure mt4">The image below is 720 pixels wide, it will fill it's container until the container is wider than 720 pixels.
66-
67-
<code class="f6 db mv3">&lt;img src="/img/under-canvas.jpg" class="mw-100"&gt;</code>
68-
<img src="/img/under-canvas.jpg" class="db mw-100">
69-
<div class="mt5 cf">
70-
<div class="dib mr4">
71-
<h1 class="f4 ttu tracked fw6">Previous</h1>
72-
<a href="/docs/debug/" class="link fw6 blue dim">Debug</a>
73-
</div>
74-
<div class="dib">
75-
<h1 class="f4 ttu tracked fw6">Next</h1>
76-
<a href="/docs/typography/scale/" class="link fw6 blue dim">Type Scale</a>
77-
</div>
78-
</div>
79-
<div class="mt5">
80-
<h1 class="f4 ttu tracked fw6">Reference</h1>
81-
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" class="db link fw6 blue dim">MDN - Images HTML</a>
82-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image" class="db link fw6 blue dim">MDN - Images CSS</a>
83-
</div>
84-
</div>
52+
<div class="ph3 ph5-ns pt4 pb5">
53+
<h2 class="f3 bold">Examples</h2>
54+
<h3 class="f5 book pt4 caps">Image</h3>
55+
<p class="measure lh-copy f5 f4-ns">
56+
This photo is more than 3000 pixels wide. The width is set to 100% to ensure it doesn't bleed off the viewport and always fills its container. In some situations, this will make the image stretch to be larger than it's actual width. To avoid the image stretching past it's width, set max-width instead.
57+
</p>
58+
<code class="f6 db mv3">&lt;img src="/img/over-canvas.jpg" class="w-100"&gt;</code>
59+
<img src="/img/over-canvas.jpg" class="w-100">
60+
<p class="f5 f4-ns lh-copy measure mt4">
61+
The image below is 720 pixels wide, it will fill it's container until the container is wider than 720 pixels.
62+
</p>
63+
<code class="f6 db mv3">&lt;img src="/img/under-canvas.jpg" class="mw-100"&gt;</code>
64+
<img src="/img/under-canvas.jpg" class="db mw-100">
65+
<div class="mt5 cf">
66+
<div class="dib mr4">
67+
<h1 class="f4 ttu tracked fw6">Previous</h1>
68+
<a href="/docs/themes/border-radius/" class="link fw6 blue dim">Border Radius</a>
69+
</div>
70+
<div class="dib">
71+
<h1 class="f4 ttu tracked fw6">Next</h1>
72+
<a href="/docs/elements/links/" class="link fw6 blue dim">Links</a>
73+
</div>
74+
</div>
75+
<div class="mt5">
76+
<h1 class="f4 ttu tracked fw6">Reference</h1>
77+
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" class="db link fw6 blue dim">MDN - Images HTML</a>
78+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/image" class="db link fw6 blue dim">MDN - Images CSS</a>
79+
</div>
80+
</div>
8581
<div class="ph3 ph5-ns pt3 pb5">
8682
<section>
8783
<h2 class="f6 fw7 ttu tracked">Elements</h2>
@@ -138,22 +134,32 @@ <h2 class="f6 fw7 ttu tracked">Theming</h2>
138134
</svg>
139135
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
140136
</a>
137+
<div class="mb4">
138+
<a class="black-70 link dim b dib mr3" href="/" title="Home">
139+
Home
140+
</a>
141+
<a class="black-70 link dim b dib mr3" href="/docs" title="Docs">
142+
Docs
143+
</a>
144+
<a class="black-70 link dim b dib mr3" href="/components/" title="Components">
145+
Components
146+
</a>
147+
</div>
141148
<article>
142149
<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>
143150
<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>
144151
</article>
145-
146-
<p>
147-
<a class="black-70 link dim b dib mr3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
152+
<div class="mt4">
153+
<a class="black-70 link dim b dib mr3 pv2" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
148154
Join our Slack Channel
149155
</a>
150-
<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!">
156+
<a class="black-70 link dim b dib mr3 pv2" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
151157
Open an Issue
152158
</a>
153-
<a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
159+
<a class="black-70 link dim b dib mr3 pv2" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
154160
GitHub
155161
</a>
156-
</p>
162+
</div>
157163
<p class="measure copy lh-copy">
158164
Have a question? Need help? Feel free to open an issue on GitHub or ask a
159165
question in our slack channel. We're here to try and help make designing in

0 commit comments

Comments
 (0)