Skip to content

Commit 3cd374d

Browse files
author
mrmrs
committed
New version of homepage.
1 parent 72bb2ac commit 3cd374d

File tree

1 file changed

+81
-67
lines changed

1 file changed

+81
-67
lines changed

‎index.html

Lines changed: 81 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -15,39 +15,51 @@
1515
<header class="w-100 pa3 ph5-ns bg-near-white">
1616
<div class="dt w-100">
1717
<div class="dtc v-mid tl w-50">
18-
<a href="/" class="f5 f4-ns fw6 mt0 mb1 link black-50" title="Home">
18+
<a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-50 dim" title="Home">
1919
Tachyons
2020
<div class="dib">
21-
<small class="nowrap f6 mt2 mt3-ns pr2 black-50">v4.0.1-beta</small>
21+
<small class="nowrap f6 mt2 mt3-ns pr2 black-50 fw2">v4.0.2-beta</small>
2222
</div>
2323
</a>
2424
</div>
25-
<div class="db dtc-l v-mid w-100 w-50-l tr">
25+
<div class="db dtc v-mid w-100 tr">
26+
2627
<a title="Documentation" href="/docs/"
27-
class="f6 b dim link black-50 mr1 mr3-m mr4-l">
28+
class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
2829
Docs
2930
</a>
3031
<a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/"
31-
class="f6 b dim link black-50 mr1 mr3-m mr4-l">
32+
class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
3233
GitHub
3334
</a>
3435
<a title="Tachyons Npm Modules" href="/#npm"
35-
class="f6 b link black-50 tc dim">
36+
class="f6 b link black-50 dim dib">
3637
Npm
3738
</a>
3839
</div>
3940
</div>
40-
<nav class="pv2 dn">
41-
<a class="f6 fw6 link dim dib mr3 mid-gray" href="/docs/">Docs</a>
42-
<a class="f6 fw6 link dim dib mr3 mid-gray" href="/docs/general">General</a>
43-
<a class="f6 fw6 link dim dib mr3 mid-gray" href="/docs/typography">Typography</a>
44-
<a class="f6 fw6 link dim dib mr2 mid-gray" href="/docs/layout">Layout</a>
45-
<a class="f6 fw6 link dim dib mr2 mid-gray" href="/docs/themes">Themes</a>
46-
</nav>
4741
</header>
4842

4943
<main class="w-100">
50-
<section class="bt b--black-10 bg-black-0125 dt w-100 pv5 pv6-ns">
44+
<section class="bt b--black-10 bg-black-0125 w-100 pv5 pv6-ns">
45+
<article class="ph3 ph5-ns">
46+
<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>
47+
<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>
48+
</article>
49+
<article class="ph3 ph5-ns mb4 mb5-ns">
50+
<h1>Getting Started</h1>
51+
<p class="measure lh-copy">
52+
Copy the line of code below and paste it in the head of the html file(s) you want to include tachyons in.
53+
</p>
54+
<pre class="pre black-70"><code class="code f6 dib pa2 bg-near-white" style="font-size: 14px;">&lt;link rel="stylesheet" href="https://s3-us-west-1.amazonaws.com/tachyons-css/4.0.1-beta/tachyons.min.css"&gt;</code></pre>
55+
<p class="mt4"><b>or</b> install via npm</p>
56+
<pre class="pre black-70"><code class="code f6 dib pa2 bg-near-white" style="font-size: 14px;">npm install --save-dev tachyons</code></pre>
57+
<p class="mt4"><b>or</b> grab all the source files and build+develop locally</p>
58+
<pre class="pre black-70"><code class="code f6 dib pa2 bg-near-white" style="font-size: 14px;">git clone git@github.com:tachyons-css/tachyons.git
59+
cd tachyons
60+
npm install &amp;&amp; npm build
61+
</code></pre>
62+
</article>
5163
<div class="ph3 ph5-ns tl tl-ns">
5264
<h1 class="f4 ttu tracked fw4">Principles</h1>
5365
<section class="list pln lh-copy mt0">
@@ -173,7 +185,7 @@ <h2 class="f4 f3-ns fw6 mb0">Responsive Grid</h2>
173185
<div class="ph3 ph5-ns">
174186
<h1 class="f5 fw6 ttu tracked">Testimonials</h1>
175187
<div class="cf w-100">
176-
<blockquote class="fl w-100 w-50-ns mh0">
188+
<blockquote class="fl w-100 w-50-ns mh0 pr0 pr3-ns border-box">
177189
<p class="f6 f5-ns measure lh-copy pr1 pr0-l">
178190
After I embraced the “lots of little classes” way of styling, my anger at CSS
179191
almost completely went away and I was much more easily able to style and modify
@@ -185,29 +197,34 @@ <h1 class="f5 fw6 ttu tracked">Testimonials</h1>
185197
</p>
186198
</footer>
187199
</blockquote>
188-
<blockquote class="fl w-100 w-50-ns mh0">
189-
<p class="f6 f5-ns measure lh-copy pl1 pl0-l">
190-
CSS libraries like Brent Jackson’s <a href="http://basscss.com" class="link dim mid-gray">BassCSS</a> and Adam Morse’s Tachyons are the bastions of this approach to CSS, and it’s easy to see why.
200+
<blockquote class="fl w-100 w-50-ns mh0 mb2 mb5-ns pl0 pl3-ns border-box">
201+
<p class="f6 f5-ns measure lh-copy">
202+
It turns out composing utilities together like that is a really nice way to style things.
203+
Adam Morse has taken this to its logical conclusion with Tachyons...
191204
</p>
192205
<footer>
193206
<p>
194-
<span class="b">Cole Peters</span> - <i>Designer</i>
207+
<span class="b">Ben Smithett</span> - <i>Developer</i>
195208
</p>
196209
</footer>
197210
</blockquote>
198211
</div>
199-
<blockquote class="mh0 mb2 mb5-ns">
200-
<p class="f6 f5-ns measure lh-copy">
201-
It turns out composing utilities together like that is a really nice way to style things.
202-
Adam Morse has taken this to its logical conclusion with Tachyons...
203-
</p>
204-
<footer>
205-
<p>
206-
<span class="b">Ben Smithett</span> - <i>Developer</i>
212+
<div class="cf w-100">
213+
<blockquote class="fl w-100 w-50-ns mh0 mb2 mb5-ns pr0 pr3-ns border-box">
214+
<p class="f6 f5-ns measure lh-copy">
215+
It seems silly at first to write code that looks like inline HTML
216+
styling but Tachyons works. Instead of wasting time hunting down
217+
and dealing with CSS overrides, I now spend time iterating on the
218+
design... which is what we're supposed to be doing in the first
219+
place :)
207220
</p>
208-
</footer>
209-
</blockquote>
210-
<blockquote class="fl w-100 w-50-ns mh0">
221+
<footer>
222+
<p>
223+
<span class="b">Jason Li</span> - <i>Illustrator &amp; Designer</i>
224+
</p>
225+
</footer>
226+
</blockquote>
227+
<blockquote class="fl w-100 w-50-ns mh0 pl0 pl3-ns border-box">
211228
<p class="f6 f5-ns measure lh-copy pl1 pl0-l">
212229
I’ve found extremely low-level “frameworks” like BassCSS and Tachyons useful recently. They let you do the whole “just add and remove classes to create elements” thing but also don’t lock you into the constraints and issues of higher level frameworks like Bootstrap.
213230
</p>
@@ -217,45 +234,33 @@ <h1 class="f5 fw6 ttu tracked">Testimonials</h1>
217234
</p>
218235
</footer>
219236
</blockquote>
220-
<blockquote class="mh0 mb2 mb5-ns">
221-
<p class="f6 f5-ns measure lh-copy">
222-
It seems silly at first to write code that looks like inline HTML
223-
styling but Tachyons works. Instead of wasting time hunting down
224-
and dealing with CSS overrides, I now spend time iterating on the
225-
design... which is what we're supposed to be doing in the first
226-
place :)
227-
</p>
228-
<footer>
229-
<p>
230-
<span class="b">Jason Li</span> - <i>Illustrator &amp; Designer</i>
231-
</p>
232-
</footer>
233-
</blockquote>
234-
<blockquote class="ml0 mb2 mb5-ns">
235-
<p class="f6 f5-ns measure lh-copy">
236-
CSS frameworks shouldn't be one-size-fits-all. Tachyons nails it
237-
with its modular approach, eliminating bloat from day one.
238-
</p>
239-
<footer>
240-
<p>
241-
<span class="b">Philip Ardeljan</span> - <i>Designer</i>
237+
</div>
238+
<div class="cf w-100">
239+
<blockquote class="fl w-100 w-50-ns mh0 mb2 mb5-ns pr0 pr3-ns border-box">
240+
<p class="f6 f5-ns measure lh-copy">
241+
CSS frameworks shouldn't be one-size-fits-all. Tachyons nails it
242+
with its modular approach, eliminating bloat from day one.
242243
</p>
243-
</footer>
244-
</blockquote>
245-
<blockquote class="ml0 mb2 mb4-ns">
246-
<p class="f6 f5-ns measure lh-copy">
247-
Tachyons nails everything you need from a CSS framework.
248-
Development goes faster, designs are more consistent, and best of
249-
all it’s a ton of fun to play with.
250-
</p>
251-
<footer>
252-
<p>
253-
<span class="b">Lachlan Campbell </span> - <i>Designer / Developer</i>
244+
<footer>
245+
<p>
246+
<span class="b">Philip Ardeljan</span> - <i>Designer</i>
247+
</p>
248+
</footer>
249+
</blockquote>
250+
<blockquote class="fl w-100 w-50-ns mh0 mb2 mb5-ns pl0 pl3-ns border-box">
251+
<p class="f6 f5-ns measure lh-copy">
252+
Tachyons nails everything you need from a CSS framework.
253+
Development goes faster, designs are more consistent, and best of
254+
all it’s a ton of fun to play with.
254255
</p>
255-
</footer>
256-
</blockquote>
256+
<footer>
257+
<p>
258+
<span class="b">Lachlan Campbell </span> - <i>Designer / Developer</i>
259+
</p>
260+
</footer>
261+
</blockquote>
262+
</div>
257263
</div>
258-
</div>
259264
</section>
260265
<section class="bg-white dt h-100 navy pv5 pv6-ns" id="npm">
261266
<div class="mw7 center ph3 ph5-ns tl tl-ns">
@@ -580,9 +585,18 @@ <h3 class="f5 fw6 ttu tracked"><a href="#npm" class="link mid-gray">Tachyons on
580585
</section>
581586
</main>
582587
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--light-gray">
588+
<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;">
589+
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
590+
<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"/>
591+
</svg>
592+
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
593+
</a>
594+
<article>
595+
<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>
596+
<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>
597+
</article>
583598

584599
<p>
585-
586600
<a class="black-70 link dim b dib mr3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
587601
Join our Slack Channel
588602
</a>

0 commit comments

Comments
 (0)