Skip to content

Commit b3b8129

Browse files
author
mrmrs
committed
Add videos
1 parent 9c94149 commit b3b8129

File tree

1 file changed

+159
-0
lines changed

1 file changed

+159
-0
lines changed

‎videos/index.html

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>
5+
Tachyons Screencasts
6+
</title>
7+
<meta name="description" content="Video tutorials on how to use the Tachyons css framework.">
8+
<meta charset="utf-8">
9+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
10+
<meta name="author" content="@mrmrs">
11+
<meta name="viewport" content="width=device-width, initial-scale=1">
12+
<link rel="stylesheet" href="/css/tachyons.min.css">
13+
<style>
14+
.blue { color: #0074D9; }
15+
.bg-blue { background-color: #0074D9; }
16+
17+
.carbon-poweredby { width: 100%; font-size: 12px; float: left; }
18+
.carbon-wrap { float: left; width: 100%; box-sizing: border-box; }
19+
.carbon-img { float: left; width: 50%; box-sizing: border-box; }
20+
.carbon-text { float: left; width: 50%; padding-left: 16px; box-sizing: border-box; font-size: 12px; }
21+
22+
#carbonads a:link { text-decoration: none!important; color: #222!important; }
23+
24+
</style>
25+
26+
</head>
27+
<body class="w-100 sans-serif">
28+
<header class="w-100 pa3 ph5-ns bg-white">
29+
<div class="dt mw9 center w-100">
30+
<div class="dtc v-mid tl w-50">
31+
<a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-70 dim" title="Home">
32+
Tachyons
33+
<div class="dib">
34+
<small class="nowrap f6 mt2 mt3-ns pr2 black-70 fw2">v4.5.1</small>
35+
</div>
36+
</a>
37+
</div>
38+
<nav class="db dtc v-mid w-100 tr">
39+
<a title="Documentation" href="/docs/"
40+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
41+
Docs
42+
</a>
43+
<a title="Components" href="/components/"
44+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dib">
45+
Components
46+
</a>
47+
<a title="Tachyons on GitHub" href="http://github.com/tachyons-css/tachyons/"
48+
class="f6 fw6 dim link black-70 mr1 mr3-m mr4-l dn dib-l">
49+
GitHub
50+
</a>
51+
</nav>
52+
</div>
53+
</header>
54+
55+
<main class="w-100 bt b--black-10 bg-white">
56+
<div class="ph3 ph5-ns">
57+
<div class="mw9 center">
58+
<header class="pv4 mb4 bb b--black-10">
59+
<h2 class="f4 mt0 fw6">Videos</h2>
60+
<p>
61+
A collection of screencasts that demo various ways you can use Tachyons.
62+
</p>
63+
</header>
64+
<article class="f4 measure pb4 pb5-ns mb4 mb5-ns bb b--black-10">
65+
<div class="aspect-ratio aspect-ratio--8x5">
66+
<iframe class="aspect-ratio--object" src="https://player.vimeo.com/video/174813041" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
67+
</div>
68+
</article>
69+
<article class="f4 measure">
70+
<div class="aspect-ratio aspect-ratio--8x5">
71+
<iframe class="aspect-ratio--object" src="https://player.vimeo.com/video/174698456" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
72+
</div>
73+
<p class="f6 lh-copy mb0 b">
74+
To download and setup tachyons from github on the command line
75+
</p>
76+
<code class="pre f6">
77+
git clone https://github.com/tachyons-css/tachyons.git new-project
78+
or
79+
git clone git@github.com:tachyons-css/tachyons.git new-project
80+
cd new-project
81+
npm install &amp;&amp; npm start
82+
</code>
83+
<p class="f6 lh-copy mb0 b">
84+
To install and setup browser-sync <span class="fw4"(you can use browser-sync
85+
anywhere, not just with Tachyons).</span>
86+
</p>
87+
<code class="pre f6">
88+
npm install -g browser-sync
89+
browser-sync start --server --files "*.html, */*.html"
90+
</code>
91+
</article>
92+
</div>
93+
</div>
94+
</main>
95+
<footer class="bg-white black-70 ph3 ph5-ns pv5 pv6-ns bt b--black-10">
96+
<div class="mw9 center">
97+
<div class="mb5">
98+
<a class="black-70 link dim b dib mr3" href="/" title="Home">
99+
Home
100+
</a>
101+
<a class="black-70 link dim b dib mr3" href="/docs" title="Docs">
102+
Docs
103+
</a>
104+
<a class="black-70 link dim b dib mr3" href="/components/" title="Components">
105+
Components
106+
</a>
107+
</div>
108+
<article class="v-top">
109+
<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>
110+
<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>
111+
<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;">
112+
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
113+
<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"/>
114+
</svg>
115+
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
116+
</a>
117+
</article>
118+
<div class="mt4">
119+
<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">
120+
Follow us on Twitter
121+
</a>
122+
<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">
123+
Join our Slack Channel
124+
</a>
125+
<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!">
126+
Open an Issue
127+
</a>
128+
</div>
129+
<p class="f6 measure copy lh-copy">
130+
Have a question? Need help? Feel free to open an issue on GitHub or ask a
131+
question in our slack channel. We're here to try and help make designing in
132+
the browser fun.
133+
</p>
134+
<div class="pt4 cf mw5">
135+
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=tachyonsio" id="_carbonads_js"></script>
136+
</div>
137+
<small class="f6 measure db lh-copy mt5">
138+
A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
139+
that always moves faster than light.
140+
The word comes from the Greek:
141+
<br> <br>
142+
ταχύς or tachys, meaning "swift, quick, fast, rapid"
143+
</small>
144+
145+
</div>
146+
</footer>
147+
148+
<script>
149+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
150+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
151+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
152+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
153+
154+
ga('create', 'UA-55773803-1', 'auto');
155+
ga('send', 'pageview');
156+
157+
</script>
158+
</body>
159+
</html>

0 commit comments

Comments
 (0)