-
Notifications
You must be signed in to change notification settings - Fork 88
/
Copy pathindex.html
206 lines (196 loc) · 9.25 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Tachyons Screencasts
</title>
<meta name="description" content="Video tutorials on how to use the Tachyons css framework.">
<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="/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>
</head>
<body class="w-100 sans-serif">
<header class="w-100 pa3 ph5-ns bg-white">
<div class="dt mw9 center w-100">
<div class="dtc v-mid tl w-50">
<a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-70 dim" title="Home">
Tachyons
<div class="dib">
<small class="nowrap f6 mt2 mt3-ns pr2 black-70 fw2">v4.5.1</small>
</div>
</a>
</div>
<nav class="db dtc v-mid w-100 tr">
<a title="Documentation" href="/docs/"
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
Docs
</a>
<a title="Components" href="/components/"
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
Components
</a>
<a title="Tachyons on GitHub" href="http://github.com/tachyons-css/tachyons/"
class="f6 fw6 dim link black-70 mr1 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">
<div class="mw9 center">
<header class="pv4 mb4 bb b--black-10">
<h2 class="f4 mt0 fw6">Videos</h2>
<p>
A collection of screencasts that demo various ways you can use Tachyons.
</p>
</header>
<article class="f4 measure pb4 pb5-ns mb4 mb5-ns bb b--black-10">
<div class="aspect-ratio aspect-ratio--8x5 ba b--black-10">
<iframe class="aspect-ratio--object" src="https://player.vimeo.com/video/183852299" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<p class="lh-copy measure">
A quick demo on how to set line length so that
your text is easily readable.
</p>
</article>
<article class="f4 measure pb4 pb5-ns mb4 mb5-ns bb b--black-10">
<div class="aspect-ratio aspect-ratio--8x5 ba b--black-10">
<iframe class="aspect-ratio--object" src="https://player.vimeo.com/video/183819916" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<p class="lh-copy measure">
A quick demo on how to utilize the type scale in tachyons and
change font-sizes across breakpoints.
</p>
<section>
<h4 class="f6">Links</h4>
<a class="f5 link dib blue mr3" href="http://type-scale.com">type-scale.com</a>
<a class="f5 link dib blue mr3" href="http://cssstats.com">cssstats.com</a>
<a class="f5 link dib blue mr3" href="http://practicaltypography.com">practicaltypography.com</a>
</section>
</article>
<article class="f4 measure pb4 pb5-ns mb4 mb5-ns bb b--black-10">
<div class="aspect-ratio aspect-ratio--8x5">
<iframe class="aspect-ratio--object" src="https://player.vimeo.com/video/183486778" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<p class="lh-copy measure">Here is a simple html template that links to the latest version of Tachyons.</p>
<code class="pre f6">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title> </title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https:/unpkg.com/tachyons/css/tachyons.min.css">
</head>
<body>
</body>
</html>
</code>
</article>
<article class="f4 measure pb4 pb5-ns mb4 mb5-ns bb b--black-10">
<div class="aspect-ratio aspect-ratio--8x5">
<iframe class="aspect-ratio--object" src="https://player.vimeo.com/video/174813041" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</article>
<article class="f4 measure">
<div class="aspect-ratio aspect-ratio--8x5">
<iframe class="aspect-ratio--object" src="https://player.vimeo.com/video/174698456" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<p class="f6 lh-copy mb0 b">
To download and setup tachyons from github on the command line
</p>
<code class="pre f6">
git clone https://github.com/tachyons-css/tachyons.git new-project
or
git clone git@github.com:tachyons-css/tachyons.git new-project
cd new-project
npm install && npm start
</code>
<p class="f6 lh-copy mb0 b">
To install and setup browser-sync <span class="fw4"(you can use browser-sync
anywhere, not just with Tachyons).</span>
</p>
<code class="pre f6">
npm install -g browser-sync
browser-sync start --server --files "*.html, */*.html"
</code>
</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">
<a class="black-70 link dim b dib mr3" href="/" title="Home">
Home
</a>
<a class="black-70 link dim b dib mr3" href="/docs" title="Docs">
Docs
</a>
<a class="black-70 link dim b dib mr3" href="/components/" title="Components">
Components
</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 dib mr3 mb3 pv2 ph3" href="https://twitter.com/tachyons_css" title="Follow us on Twitter">
Follow us on Twitter
</a>
<a class="ba black-70 no-underline grow br2 b dib mr3 mb3 pv2 ph3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
Join our Slack Channel
</a>
<a class="ba br2 black-70 no-underline grow b dib mb3 pv2 ph3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
Open an Issue
</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>