Skip to content

Commit 36716a5

Browse files
johnojohno
committed
Add prettier
1 parent 784331b commit 36716a5

19 files changed

+680
-220
lines changed

‎components/App.js

-24
This file was deleted.

‎components/Container.js

+3-8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
import React from 'react'
22

3-
export default ({
4-
className = '',
5-
...props
6-
}) =>
7-
<div
8-
className={`mw9 center ${className}`}
9-
{...props}
10-
/>
3+
export default ({ className = '', ...props }) => (
4+
<div className={`mw9 center ${className}`} {...props} />
5+
)

‎components/Docs.js

-6
This file was deleted.

‎components/Footer.js

+189-40
Large diffs are not rendered by default.

‎components/GettingStarted.js

+67-32
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,57 @@
11
import React from 'react'
22

3-
export default ({ version }) =>
4-
<article className='bt b--black-10 bg-washed-blue black-70 ph3 ph5-ns pv4 pv5-ns' id='getting-started'>
5-
<div className='mw9 center'>
6-
<h1 className='mt0 f5 f3-ns'>Getting Started</h1>
7-
<p className='f5 measure lh-copy'>
8-
Copy the line of code below and paste it in the head of the html file(s) you want to include tachyons in.
3+
export default ({ version }) => (
4+
<article
5+
className="bt b--black-10 bg-washed-blue black-70 ph3 ph5-ns pv4 pv5-ns"
6+
id="getting-started"
7+
>
8+
<div className="mw9 center">
9+
<h1 className="mt0 f5 f3-ns">Getting Started</h1>
10+
<p className="f5 measure lh-copy">
11+
Copy the line of code below and paste it in the head of the html file(s)
12+
you want to include tachyons in.
913
</p>
10-
<pre className='pre black-70 overflow-auto'><code className='code f6 dib pa2 bg-black-70 washed-green' style={{ fontSize: '14px'}}>&lt;link rel='stylesheet' href='https://unpkg.com/tachyons@{version}/css/tachyons.min.css'/&gt;</code></pre>
11-
<p className='mt4'><b>or</b> install via npm</p>
12-
<pre className='pre black-70 overflow-auto'><code className='code f6 dib pa2 bg-black-70 washed-green' style={{ fontSize: '14px'}}>npm install --save-dev tachyons@{version}</code></pre>
13-
<p className='mt4'><b>or</b> grab all the source files and build+develop locally</p>
14-
<pre className='pre overflow-auto'><code className='code f6 dib pa2 bg-black-70 washed-green' style={{ fontSize: '14px'}}>git clone git@github.com:tachyons-css/tachyons.git
15-
cd tachyons
16-
npm install &amp;&amp; npm start
17-
</code></pre>
18-
<h3 className='f5 f3-ns mt4 fw6'>Prototyping template</h3>
19-
<p className='lh-copy measure f6'>
20-
This template is always linked to the most up to date version of Tachyons.
21-
Save this file to your computer to start prototyping right away without worrying
22-
about setting up a dev environment. You can open the file in a web browser and view
23-
your changes.
14+
<pre className="pre black-70 overflow-auto">
15+
<code
16+
className="code f6 dib pa2 bg-black-70 washed-green"
17+
style={{ fontSize: '14px' }}
18+
>
19+
&lt;link rel='stylesheet' href='https://unpkg.com/tachyons@{version}/css/tachyons.min.css'/&gt;
20+
</code>
21+
</pre>
22+
<p className="mt4">
23+
<b>or</b> install via npm
24+
</p>
25+
<pre className="pre black-70 overflow-auto">
26+
<code
27+
className="code f6 dib pa2 bg-black-70 washed-green"
28+
style={{ fontSize: '14px' }}
29+
>
30+
npm install --save-dev tachyons@{version}
31+
</code>
32+
</pre>
33+
<p className="mt4">
34+
<b>or</b> grab all the source files and build+develop locally
35+
</p>
36+
<pre className="pre overflow-auto">
37+
<code
38+
className="code f6 dib pa2 bg-black-70 washed-green"
39+
style={{ fontSize: '14px' }}
40+
>
41+
git clone git@github.com:tachyons-css/tachyons.git cd tachyons npm
42+
install &amp;&amp; npm start
43+
</code>
44+
</pre>
45+
<h3 className="f5 f3-ns mt4 fw6">Prototyping template</h3>
46+
<p className="lh-copy measure f6">
47+
This template is always linked to the most up to date version of
48+
Tachyons. Save this file to your computer to start prototyping right
49+
away without worrying about setting up a dev environment. You can open
50+
the file in a web browser and view your changes.
2451
</p>
25-
<div className='overflow-auto'>
52+
<div className="overflow-auto">
2653
<code
27-
className='pre f6'
54+
className="pre f6"
2855
children={`
2956
<!DOCTYPE html>
3057
<html lang="en">
@@ -38,20 +65,28 @@ npm install &amp;&amp; npm start
3865
/>
3966
</div>
4067

41-
<section className='bt b--black-10 pv5 mt5 cf'>
42-
<div className='fl-l w-100 w-50-l pr4-ns'>
43-
<h3 className='f5 f3-ns mt0'>Start a New Project</h3>
44-
<p className='f6 f5-ns measure lh-copy mb4 mt0'>
45-
Get setup and running with this ~7 minute screencast. Download the
46-
project and learn how to customize the tachyons source files and
47-
recompile the css using the postcss build system.
68+
<section className="bt b--black-10 pv5 mt5 cf">
69+
<div className="fl-l w-100 w-50-l pr4-ns">
70+
<h3 className="f5 f3-ns mt0">Start a New Project</h3>
71+
<p className="f6 f5-ns measure lh-copy mb4 mt0">
72+
Get setup and running with this ~7 minute screencast. Download the
73+
project and learn how to customize the tachyons source files and
74+
recompile the css using the postcss build system.
4875
</p>
4976
</div>
50-
<div className='fl-l w-100 w-50-l'>
51-
<div className='aspect-ratio aspect-ratio--8x5'>
52-
<iframe className='aspect-ratio--object' src='https://player.vimeo.com/video/174698456' frameborder='0' webkitallowfullscreen='' mozallowfullscreen='' allowfullscreen=''></iframe>
77+
<div className="fl-l w-100 w-50-l">
78+
<div className="aspect-ratio aspect-ratio--8x5">
79+
<iframe
80+
className="aspect-ratio--object"
81+
src="https://player.vimeo.com/video/174698456"
82+
frameborder="0"
83+
webkitallowfullscreen=""
84+
mozallowfullscreen=""
85+
allowfullscreen=""
86+
/>
5387
</div>
5488
</div>
5589
</section>
5690
</div>
5791
</article>
92+
)

‎components/Header.js

+17-19
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,40 @@ import React from 'react'
22

33
import Container from './Container'
44
import Flex from './Flex'
5-
import {
6-
NavLink,
7-
TitleLink
8-
} from './ui'
5+
import { NavLink, TitleLink } from './ui'
96

10-
export default ({ version }) =>
11-
<header className='w-100 pa3 ph5-ns bg-white'>
7+
export default ({ version }) => (
8+
<header className="w-100 pa3 ph5-ns bg-white">
129
<Container>
13-
<Flex
14-
justify='between'
15-
alignItems='center'
16-
>
10+
<Flex justify="between" alignItems="center">
1711
<TitleLink
18-
href='/'
19-
title='Home'
20-
text='Tachyons'
12+
href="/"
13+
title="Home"
14+
text="Tachyons"
2115
subtext={`v${version}`}
2216
/>
2317

24-
<Flex is='nav'>
25-
<NavLink title='Documentation' href='/docs/'>
18+
<Flex is="nav">
19+
<NavLink title="Documentation" href="/docs/">
2620
Docs
2721
</NavLink>
28-
<NavLink title='Components' href='/components/'>
22+
<NavLink title="Components" href="/components/">
2923
Components
3024
</NavLink>
31-
<NavLink title='Gallery of sites built with Tachyons' to='/gallery/'>
25+
<NavLink title="Gallery of sites built with Tachyons" to="/gallery/">
3226
Gallery
3327
</NavLink>
34-
<NavLink title='Resources' href='/resources/'>
28+
<NavLink title="Resources" href="/resources/">
3529
Resources
3630
</NavLink>
37-
<NavLink title='Tachyons on GitHub' href='http://github.com/tachyons-css/tachyons/'>
31+
<NavLink
32+
title="Tachyons on GitHub"
33+
href="http://github.com/tachyons-css/tachyons/"
34+
>
3835
GitHub
3936
</NavLink>
4037
</Flex>
4138
</Flex>
4239
</Container>
4340
</header>
41+
)

‎components/Hero.js

+54-30
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,61 @@
11
import React from 'react'
22

3-
export default ({ version }) =>
4-
<div className='ph3 ph5-ns pb4'>
5-
<div className='cf mw9 center tc-m'>
6-
<div className='fl w-100 overflow-auto v-top'>
7-
<iframe src='https://ghbtns.com/github-btn.html?user=tachyons-css&amp;repo=tachyons&amp;type=star&amp;count=true' frameborder='0' scrolling='0' width='100px' height='32px'></iframe>
3+
export default ({ version }) => (
4+
<div className="ph3 ph5-ns pb4">
5+
<div className="cf mw9 center tc-m">
6+
<div className="fl w-100 overflow-auto v-top">
7+
<iframe
8+
src="https://ghbtns.com/github-btn.html?user=tachyons-css&amp;repo=tachyons&amp;type=star&amp;count=true"
9+
frameborder="0"
10+
scrolling="0"
11+
width="100px"
12+
height="32px"
13+
/>
814

9-
<a href='https://twitter.com/intent/tweet?text=Tachyons: A functional css toolkit for designing in the browser.&amp;url=http://tachyons.io' className='twitter bg-white-50 dim link dib mb2 br2 ph2 pb1 lh-solid v-top' style={{ backgroundColor: '#55acee' }}>
10-
<svg className='geomicon dib v-mid' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='16' height='16' fill='#fff'>
11-
<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'></path>
15+
<a
16+
href="https://twitter.com/intent/tweet?text=Tachyons: A functional css toolkit for designing in the browser.&amp;url=http://tachyons.io"
17+
className="twitter bg-white-50 dim link dib mb2 br2 ph2 pb1 lh-solid v-top"
18+
style={{ backgroundColor: '#55acee' }}
19+
>
20+
<svg
21+
className="geomicon dib v-mid"
22+
xmlns="http://www.w3.org/2000/svg"
23+
viewBox="0 0 32 32"
24+
width="16"
25+
height="16"
26+
fill="#fff"
27+
>
28+
<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" />
1229
</svg>
13-
<span className='dib v-mid white fw6' style={{ fontSize: '12px' }}>Tweet</span>
30+
<span className="dib v-mid white fw6" style={{ fontSize: '12px' }}>
31+
Tweet
32+
</span>
33+
</a>
34+
</div>
35+
<div className="pb3 pb4-ns pt4 pt5-ns mt4 black-70 fl-l w-50-l">
36+
<h1 className="f4 fw6 f1-ns lh-title measure mt0">
37+
Built for designing.
38+
</h1>
39+
<p className="f5 f4-ns fw4 b measure dib-m lh-copy">
40+
Create fast loading, highly readable, and 100% responsive interfaces
41+
with as little css as possible.
42+
</p>
43+
<p className="measure f5 f4-ns lh-copy dn">
44+
Modules can be altered, extended, or changed to meet your design
45+
needs. You shouldn't need to write css everytime you want to build a
46+
new ui component. By learning the composable building blocks in
47+
tachyons, you can quickly start to build out interfaces while writing
48+
little to no css.
49+
</p>
50+
</div>
51+
<div className="fl-l w-50-l tl tc-ns pt3 pt4-m pt6-l">
52+
<a
53+
className="f6 f5-ns fw6 dib ba b--black-20 bg-blue white ph3 ph4-ns pv2 pv3-ns br2 grow no-underline"
54+
href="https://raw.githubusercontent.com/tachyons-css/tachyons/master/css/tachyons.min.css"
55+
>
56+
Download <code className="f6 fw4 di">v{version}</code>
1457
</a>
15-
</div>
16-
<div className='pb3 pb4-ns pt4 pt5-ns mt4 black-70 fl-l w-50-l'>
17-
<h1 className='f4 fw6 f1-ns lh-title measure mt0'>
18-
Built for designing.
19-
</h1>
20-
<p className='f5 f4-ns fw4 b measure dib-m lh-copy'>
21-
Create fast loading, highly readable, and
22-
100% responsive interfaces with as little css as possible.
23-
</p>
24-
<p className='measure f5 f4-ns lh-copy dn'>
25-
Modules can be altered, extended, or changed to meet your design needs.
26-
You shouldn't need to write css everytime you want to build a new
27-
ui component. By learning the composable building blocks in tachyons, you
28-
can quickly start to build out interfaces while writing little to no css.
29-
</p>
30-
</div>
31-
<div className='fl-l w-50-l tl tc-ns pt3 pt4-m pt6-l'>
32-
<a className='f6 f5-ns fw6 dib ba b--black-20 bg-blue white ph3 ph4-ns pv2 pv3-ns br2 grow no-underline' href='https://raw.githubusercontent.com/tachyons-css/tachyons/master/css/tachyons.min.css'>
33-
Download <code className='f6 fw4 di'>v{version}</code>
34-
</a>
35-
</div>
3658
</div>
3759
</div>
60+
</div>
61+
)

‎components/Home.js

+4-5
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,14 @@ import Nav from './NavHome'
44
import Hero from './Hero'
55
import GettingStarted from './GettingStarted'
66

7-
export default ({
8-
version
9-
}) =>
10-
<main className='w-100 bt b--black-10 bg-white'>
11-
<section className='bg-black-0125 w-100'>
7+
export default ({ version }) => (
8+
<main className="w-100 bt b--black-10 bg-white">
9+
<section className="bg-black-0125 w-100">
1210
<article>
1311
<Nav />
1412
<Hero version={version} />
1513
<GettingStarted version={version} />
1614
</article>
1715
</section>
1816
</main>
17+
)

‎components/Layout.js

+5-7
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,15 @@ import { version } from '../package.json'
44
import Header from './Header'
55
import Footer from './Footer'
66

7-
export default ({
8-
title = 'TACHYONS - Css Toolkit',
9-
children
10-
}) =>
11-
<div className='w-100 sans-serif'>
7+
export default ({ title = 'TACHYONS - Css Toolkit', children }) => (
8+
<div className="w-100 sans-serif">
129
<title>{title}</title>
1310
<link
14-
rel='stylesheet'
15-
href='https://unpkg.com/tachyons/css/tachyons.min.css'
11+
rel="stylesheet"
12+
href="https://unpkg.com/tachyons/css/tachyons.min.css"
1613
/>
1714

1815
<Header version={version} />
1916
<main>{children}</main>
2017
</div>
18+
)

‎components/Link.js

+2-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import React from 'react'
22
import Link from 'next/link'
33

4-
export default ({
5-
href = '#!',
6-
...props
7-
}) =>
4+
export default ({ href = '#!', ...props }) => (
85
<Link href={href}>
96
<a {...props} />
107
</Link>
8+
)

0 commit comments

Comments
 (0)