-
Notifications
You must be signed in to change notification settings - Fork 86
Expand file tree
/
Copy pathindex.html
More file actions
344 lines (333 loc) · 20 KB
/
index.html
File metadata and controls
344 lines (333 loc) · 20 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<!DOCTYPE html>
<html lang="en">
<head>
<title>
TACHYONS - Resources
</title>
<meta name="description" content="Tachyons related resources">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="author" content="@mrmrs">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/tachyons/css/tachyons.min.css">
<style>
.blue { color: #0074D9; }
.bg-blue { background-color: #0074D9; }
.carbon-poweredby { width: 100%; font-size: 12px; float: left; }
.carbon-wrap { float: left; width: 100%; box-sizing: border-box; }
.carbon-img { float: left; width: 50%; box-sizing: border-box; }
.carbon-text { float: left; width: 50%; padding-left: 16px; box-sizing: border-box; font-size: 12px; }
#carbonads a:link { text-decoration: none!important; color: #222!important; }
</style>
<link rel="alternate" type="application/rss+xml" title="RSS Feed for Tachyons Recent Components" href="/components/rss.xml" />
</head>
<body class="w-100 sans-serif">
<header class="w-100 pa3 ph5-ns bg-white">
<div class="db dt-ns mw9 center w-100">
<div class="db dtc-ns v-mid tl w-50">
<a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-70" title="Home">
Tachyons
<div class="dib">
<small class="nowrap f6 mt2 mt3-ns pr2 black-70 fw2">v4.10.0</small>
</div>
</a>
</div>
<nav class="db dtc-ns v-mid w-100 tl tr-ns mt2 mt0-ns">
<a title="Documentation" href="/docs/"
class="f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dib">
Docs
</a>
<a title="Components" href="/components/"
class="f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dib">
Components
</a>
<a title="Gallery of sites built with Tachyons" href="/gallery/"
class="f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dib">
Gallery
</a>
<a title="Resources" href="/resources/"
class="f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dib">
Resources
</a>
<a title="Tachyons on GitHub" href="http://github.com/tachyons-css/tachyons/"
class="f6 fw6 hover-blue link black-70 mr2 mr3-m mr4-l dn dib-l">
GitHub
</a>
</nav>
</div>
</header>
<main class="w-100 bt b--black-10 bg-white">
<div class="ph3 ph5-ns black-80 pb6">
<div class="mw9 center">
<h1 class="f3 f1-l">Resources</h1>
<article>
<h3 class="f5 fw6 bb bw2 pb2 mb3">Recommended Reading</h3>
<div class="cf">
<a class="fl w-100 w-50-m w-25-l mb4 mb5-l link black hover-yellow pr2-l border-box" href="https://www.amazon.com/gp/product/0300179359/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0300179359&linkCode=as2&tag=mrmrs01-20&linkId=5d1b4734ee07eaffcbb719bcb1b02d0a">
<div class="aspect-ratio-ns aspect-ratio--1x1-ns">
<span class="aspect-ratio--object-ns flex items-center">
<span>
<span class="f4 f3-l b db lh-title">Interaction of Color</span>
<span class="f6 db mt2">Josef Albers</span>
</span>
</span>
</div>
</a>
<a class="fl w-100 w-50-m w-25-l mb4 mb5-l link black hover-yellow pr2-l border-box" href="https://www.amazon.com/gp/product/1500615994/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1500615994&linkCode=as2&tag=mrmrs01-20&linkId=b323b793cb846f1eb184a1d875b97c08">
<div class="aspect-ratio-ns aspect-ratio--1x1-ns">
<span class="aspect-ratio--object-ns flex items-center">
<span>
<span class="f4 f3-l b db lh-title">How to Make Sense of Any Mess</span>
<span class="f6 db mt2">Abby Covert</span>
</span>
</span>
</div>
</a>
<a class="fl w-100 w-50-m w-25-l border-box mb4 mb5-l link black hover-light-purple pr2-l border-box" href="https://www.amazon.com/gp/product/0881791164/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=3721201450&linkCode=as2&tag=mrmrs01-20&linkId=99a1d6ef57ecbd4a14e228a5120965b4">
<div class="aspect-ratio-ns aspect-ratio--1x1-ns">
<span class="aspect-ratio--object-ns flex items-center">
<span>
<span class="f4 f3-l b db lh-title">The Form of the Book</span>
<span class="f6 db mt2">Jan Tschichold</span>
</span>
</span>
</div>
</a>
<a class="fl w-100 w-50-m w-25-l border-box mb4 mb5-l link black hover-orange pr2-l border-box" href="https://www.amazon.com/gp/product/3721201450/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=3721201450&linkCode=as2&tag=mrmrs01-20&linkId=99a1d6ef57ecbd4a14e228a5120965b4">
<div class="aspect-ratio-ns aspect-ratio--1x1-ns">
<span class="aspect-ratio--object-ns flex items-center">
<span>
<span class="f4 f3-l b db lh-title">Grid Systems in Graphic Design</span>
<span class="f6 db mt2">Joseph Müller-Brockmann</span>
</span>
</span>
</div>
</a>
<a class="fl w-100 w-50-m w-25-l mb4 mb5-l link black hover-red pr2-l border-box" href="https://www.amazon.com/gp/product/0881792128/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0881792128&linkCode=as2&tag=mrmrs01-20&linkId=63b73199f93596b33b271a8e5a530f49">
<div class="aspect-ratio-ns aspect-ratio--1x1-ns">
<span class="aspect-ratio--object-ns flex items-center">
<span>
<span class="f4 f3-l b db lh-title">The Elements of Typographic Style</span>
<span class="f6 db mt2">Robert Bringhurst</span>
</span>
</span>
</div>
</a>
<a class="fl w-100 w-50-m w-25-l border-box mb4 mb5-l link black hover-orange pr2-l border-box" href="https://www.amazon.com/Design-UNIX-Operating-System/dp/0132017997/ref=cm_cr_arp_d_product_top?ie=UTF8">
<div class="aspect-ratio-ns aspect-ratio--1x1-ns">
<span class="aspect-ratio--object-ns flex items-center">
<span>
<span class="f4 f3-l b db lh-title">The Design of the UNIX Operating System</span>
<span class="f6 db mt2">Maurice J. Bach </span>
</span>
</span>
</div>
</a>
<a class="fl w-100 w-50-m w-25-l mb4 mb5-l link black hover-hot-pink pr2-l border-box" href="https://www.amazon.com/gp/product/0060891548/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0060891548&linkCode=as2&tag=mrmrs01-20&linkId=e7b30d15730386993c7257069666e4da" >
<div class="aspect-ratio-ns aspect-ratio--1x1-ns w-100">
<span class="aspect-ratio--object-ns flex items-center">
<span>
<span class="f4 f3-l b db">On Writing Well</span>
<span class="f6 db mt2">William Zinser</span>
</span>
</span>
</div>
</a>
<a class="fl w-100 w-50-m w-25-l mb4 mb5-l link black hover-gold pr2-l border-box" href="https://www.amazon.com/gp/product/0714834491/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0714834491&linkCode=as2&tag=mrmrs01-20&linkId=b9e572a70f5df34a3bac034b5e18cef8" >
<div class="aspect-ratio-ns aspect-ratio--1x1-ns w-100">
<span class="aspect-ratio--object-ns flex items-center">
<span>
<span class="f4 f3-l b db">The Art of Looking Sideways</span>
<span class="f6 db mt2">Alan Fletcher</span>
</span>
</span>
</div>
</a>
</div>
<!--
<a href="https://www.amazon.com/gp/product/0385346891/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0385346891&linkCode=as2&tag=mrmrs01-20&linkId=7029669bc3a420809cc483062949a77e">Sin and Syntax: How to Craft Wicked Good Prose</a>
<a href="https://www.amazon.com/gp/product/0714834491/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0714834491&linkCode=as2&tag=mrmrs01-20&linkId=b9e572a70f5df34a3bac034b5e18cef8">The Art of Looking Sideways</a>
-->
</article>
<article class="mt5">
<h3 class="f5 fw6 bb bw2 pb2 mb3">Related Projects</h3>
<a class="link fw7 f3 mb4 db black hover-blue" href="https://github.com/jxnblk/tachyons-components">
<span class="db mb1">tachyons-components</span>
<span class="lh-copy f5 fw4 db">
React UI components powered by Tachyons with a styled-components like API
</span>
</a>
<a class="link fw7 f3 mb4 db black hover-blue" href="https://github.com/tachyons-css/tachyons-sass">
<span class="db mb1">tachyons-sass</span>
<span class="lh-copy f5 fw4 db">
Don’t like postcss? Tachyons-sass is a sass port of the entire
framework.
</span>
</a>
<a class="link fw7 f3 mb4 db black hover-blue" href="https://github.com/tachyons-css/react-native-style-tachyons">
<span class="db mb1">react-native-style-tachyons</span>
<span class="lh-copy f5 fw4 db measure">
React Native Style Tachyons brings functional styling to
react-native. It is inspired by Tachyons and uses it’s scales and
naming convention.
</span>
</a>
<a class="link fw7 f3 mb4 db black hover-blue" href="https://github.com/tachyons-css/tachyons-webpack">
<span class="db mb1">tachyons-webpack</span>
<span class="lh-copy f5 fw4 db measure">
This is a basic webpack boilerplate to be used with Tachyons. You
can write your javascript in src/app.js add html to index.html and
add custom css to css/index.css.
</span>
</a>
<a class="link fw7 f3 mb4 db black hover-blue" href="https://github.com/tachyons-css/tachyons-custom">
<span class="db mb1">tachyons-custom</span>
<span class="lh-copy f5 fw4 db measure">
A template for customizing values in your own build of Tachyons.
</span>
</a>
<a class="link fw7 f3 mb4 db black hover-blue" href="https://github.com/tachyons-css/tachyons-cli">
<span class="db mb1">tachyons-cli</span>
<span class="lh-copy f5 fw4 db measure">
This module is used to process Tachyons css modules and generate
their documentation. It is leveraged in an npm script shared among
all modules.
</span>
</a>
<a class="link fw7 f3 mb4 db black hover-blue" href="https://github.com/tachyons-css/tachyons-build-css">
<span class="db mb1">tachyons-build-css</span>
<span class="lh-copy f5 fw4 db measure">
Transpile Tachyons PostCSS to vanilla CSS. This build process also
removes comments, autoprefixes, and has options for minifying the
output or repeating class selectors (to play nice with overly
specific CSS frameworks).
</span>
</a>
<a class="link fw7 f3 mb4 db black hover-blue" href="https://github.com/tachyons-css/tachyons-verbose">
<span class="db mb1">tachyons-verbose</span>
<span class="lh-copy f5 fw4 db measure">
This “verbose” edition of Tachyons uses an unambiguous naming formula for those of us who are bad at acronyms and for ease of sharing with non-tachyons-using team members.
</span>
</a>
<a class="link fw7 f3 mb4 db black hover-blue" href="https://github.com/tachyons-css/jekyll-tachyons">
<span class="db mb1">jekyll-tachyons</span>
<span class="lh-copy f5 fw4 db measure">
Jekyll + Tachyons Boilerplate.
</span>
</a>
</article>
<article class="mt5">
<h3 class="f5 fw6 bb bw2 pb2 mb3">Text Editor Plugins & Packages</h3>
<a class="db f3 b link mb4 black hover-green" href="https://atom.io/packages/atom-tachyons">
<span class="db">atom-tachyons</span>
<span class="lh-copy measure db f5 fw4">
Provides Tachyon classes with autocompletion and component
snippets.
</span>
</a>
<a class="db f3 b link mb4 black hover-green" href="https://github.com/webchun/tachyons-sublime-autocomplete">
<span class="db">Sublime Text</span>
<span class="lh-copy measure db f5 fw4">
Sublime Text Autocomplete plugin for Tachyons.
</span>
</a>
<a class="db f3 b link mb4 black hover-green" href="https://marketplace.visualstudio.com/items?itemName=octref.tachyons">
<span class="db">Visual Studio</span>
<span class="lh-copy measure db f5 fw4">
Goto and peek definition for Tachyons.
</span>
</a>
</article>
<article class="mt5">
<h3 class="f5 fw6 bb bw2 pb2 mb3">Tutorials</h3>
<a class="link fw7 f3 mb4 db black hover-gold" href="http://tachyons.pro">
tachyons.pro
</a>
</article>
</div>
</div>
</main>
<footer class="bg-white black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
<div class="mw9 center">
<div class="mb5 lh-copy">
<a class="black-70 link hover-blue b dib mr3 mb3" href="/" title="Home">
Home
</a>
<a class="black-70 link hover-blue b dib mr3 mb3" href="/docs" title="Docs">
Docs
</a>
<a class="black-70 link hover-blue b dib mr3 mb3" href="/components/" title="Components">
Components
</a>
<a class="black-70 link hover-blue b dib mr3 mb3" href="/gallery/" title="Gallery of Sites built with Tachyons">
Gallery
</a>
<a class="black-70 link hover-blue b dib mr3 mb3" href="/resources/" title="Resources related to Tachyons">
Resources
</a>
<a class="black-70 link hover-blue b dib mr3 mb3" href="/xray/" title="The X-Ray chrome extension for aligning things to a grid.">
X-Ray
</a>
<a class="black-70 link hover-blue b dib mr3 mb3" href="http://opencollective.com/tachyons" title="Support Tachyons Development">
Supporting Tachyons
</a>
</div>
<article class="v-top">
<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>
<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>
<a href="https://twitter.com/intent/tweet?text=Tachyons: A functional css toolkit for designing in the browser.&url=http://tachyons.io" class="twitter bg-white-50 link dib dim br2 ph2 pb1 lh-solid v-top" style="background-color: #55acee;">
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
<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"/>
</svg>
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
</a>
</article>
<div class="mt4">
<a class="ba black-70 no-underline grow br2 b inline-flex items-center mr3 mb3 pv2 ph3" href="https://twitter.com/tachyons_css" title="Follow us on Twitter">
<div class="w2 pv1 pr2">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill-rule="nonzero"/></svg>
</div>
<span>Follow @tachyons_css</span>
</a>
<a class="ba black-70 no-underline grow br2 b inline-flex items-center mr3 mb3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
<div class="dib w2 pv1 pr2">
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><g fill-rule="nonzero"><path d="M6.586 7.33l.69 2.057 2.137-.716-.69-2.056-2.137.716z"/><path d="M12.55 9.37l-1.037.347.36 1.073c.145.434-.09.904-.524 1.05-.096.03-.19.045-.287.042-.338-.01-.65-.226-.765-.566l-.36-1.072-2.138.716.36 1.072c.145.435-.09.905-.523 1.05-.096.032-.192.045-.286.043-.34-.01-.65-.226-.764-.566l-.36-1.075-1.037.348c-.096.03-.19.045-.286.042-.34-.008-.65-.226-.765-.565-.146-.434.09-.904.522-1.05L5.7 9.914l-.69-2.058-1.037.347c-.094.032-.19.045-.285.043-.338-.01-.65-.226-.765-.566-.145-.434.09-.904.523-1.05l1.037-.347-.36-1.073c-.145-.434.09-.904.524-1.05.435-.145.905.09 1.05.524l.36 1.072 2.137-.716-.36-1.072c-.144-.435.09-.905.524-1.05.435-.145.906.09 1.05.523l.36 1.075 1.037-.347c.434-.146.904.088 1.05.522.145.434-.09.904-.523 1.05l-1.037.347.69 2.057 1.036-.347c.435-.145.905.09 1.05.523.146.434-.09.904-.522 1.05zm2.78-3.57C13.68.304 11.298-.98 5.8.67.304 2.32-.98 4.7.67 10.2c1.65 5.497 4.03 6.78 9.53 5.13 5.497-1.65 6.78-4.03 5.13-9.53z"/></g></svg>
</div>
<span>
Need Help? Join our Slack Channel
</span>
</a>
<a class="ba br2 black-70 no-underline grow b inline-flex items-center mb3 pv2 ph3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
<div class="w2 pv1 pr2">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.083-.202-.358-1.015.077-2.117 0 0 .672-.215 2.2.82.638-.178 1.323-.266 2.003-.27.68.004 1.364.092 2.003.27 1.527-1.035 2.198-.82 2.198-.82.437 1.102.163 1.915.08 2.117.513.56.823 1.274.823 2.147 0 3.073-1.87 3.75-3.653 3.947.287.246.543.735.543 1.48 0 1.07-.01 1.933-.01 2.195 0 .215.144.463.55.385C13.71 14.53 16 11.534 16 8c0-4.418-3.582-8-8-8"/></svg>
</div>
<span>Open an Issue on GitHub</span>
</a>
</div>
<p class="f6 measure copy lh-copy">
Have a question? Need help? Feel free to open an issue on GitHub or ask a
question in our slack channel. We’re here to try and help make designing in
the browser fun.
</p>
<div class="pt4 cf mw5">
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=tachyonsio" id="_carbonads_js"></script>
</div>
<small class="f6 measure db lh-copy mt5">
A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
that always moves faster than light.
The word comes from the Greek:
<br> <br>
ταχύς or tachys, meaning “swift, quick, fast, rapid”
</small>
</div>
</footer>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-55773803-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>