Skip to content

Commit e521bbd

Browse files
johnojohno
committed
Tweak formatting
1 parent 4369af3 commit e521bbd

File tree

9 files changed

+202
-40
lines changed

9 files changed

+202
-40
lines changed

‎docs/modules.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@ const { readFileSync, writeFileSync } = require('fs')
44

55
const { dependencies } = require('./package.json')
66

7-
const px = Object
8-
.keys(dependencies)
7+
const px = Object.keys(dependencies)
98
.filter(m => /^tachyons-/.test(m))
109
.filter(m => !/^tachyons-(colors|generator|styles)/.test(m))
1110
.map(async m => {
@@ -36,10 +35,11 @@ const px = Object
3635
}
3736
})
3837

39-
Promise
40-
.all(px)
41-
.then(modules => {
42-
const reduced = modules.reduce((acc, m) => Object.assign(acc, { [m.name]: m }), {})
38+
Promise.all(px).then(modules => {
39+
const reduced = modules.reduce(
40+
(acc, m) => Object.assign(acc, { [m.name]: m }),
41+
{}
42+
)
4343

44-
writeFileSync('data.json', JSON.stringify({ modules: reduced }, null, 2))
45-
})
44+
writeFileSync('data.json', JSON.stringify({ modules: reduced }, null, 2))
45+
})

‎docs/pages/docs/typography/scale.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react'
2+
3+
import withDocLayout from '../../../ui/withDocLayout'
4+
import Scale from '../../../typography/scale.md'
5+
6+
export default withDocLayout(Scale)

‎docs/typography/scale.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { BigQuote } from '../ui'
2+
import ScaleHero from '../ui/ScaleHero'
3+
import FontSizes from '../ui/FontSizes'
4+
5+
# Type Scale
6+
7+
<ScaleHero />
8+
9+
<BigQuote
10+
quote='The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection… In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years… This is the typographic equivalent of the diatonic scale.'
11+
author='Robert Bringhurst'
12+
work='The Elements of Typographic Style'
13+
/>
14+
15+
### Font sizes
16+
17+
<FontSizes />
18+
19+
## Examples
20+
21+
```.html
22+
<h1 class="f-headline lh-solid measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
23+
```
24+
25+
```.html
26+
<h1 class="f-subheadline lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
27+
```
28+
29+
```.html
30+
<h1 class="f1 lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
31+
```
32+
33+
```.html
34+
<h1 class="f2 normal lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
35+
```
36+
37+
```.html
38+
<h1 class="f3 normal lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
39+
```
40+
41+
```.html
42+
<h1 class="f4 normal lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
43+
```
44+
45+
```.html
46+
<h1 class="f5 normal lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
47+
```
48+
49+
```.html
50+
<h1 class="f6 normal lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
51+
```
52+
53+
```.html
54+
<h1 class="f7 normal lh-title measure">A modular scale, like a musical scale, is a prearranged set of harmonious proportions.</h1>
55+
```
56+
57+
## Reference
58+
59+
- [MDN - Font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)

‎docs/ui/Editor.js‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,43 +5,43 @@ import he from 'he'
55
const isDotHTML = (cx = '') => /language-\.html/.test(cx)
66

77
class Editor extends Component {
8-
constructor (props) {
9-
super()
8+
constructor(props) {
9+
super()
1010

11-
this.state = {
11+
this.state = {
1212
shouldLiveEdit: isDotHTML(props.className),
13-
html: props.children[0] || ''
14-
}
15-
}
13+
html: props.children[0] || ''
14+
}
15+
}
1616

1717
handleChange = e => {
1818
this.setState({
1919
html: e.target.value
2020
})
2121
}
2222

23-
render () {
24-
if (!this.state.shouldLiveEdit) {
25-
return <code {...this.props} />
26-
}
23+
render() {
24+
if (!this.state.shouldLiveEdit) {
25+
return <code {...this.props} />
26+
}
2727

28-
return (
29-
<div>
28+
return (
29+
<div>
3030
<textarea
3131
rows={1}
32-
className='w-100 bn code black-70 ph0 mb2 input-reset'
32+
className="w-100 bn code black-70 ph0 mb2 input-reset"
3333
value={this.state.html}
3434
onChange={this.handleChange}
3535
/>
36-
<div
37-
className='sans-serif'
36+
<div
37+
className="sans-serif ws-normal"
3838
dangerouslySetInnerHTML={{
3939
__html: he.decode(this.state.html)
4040
}}
4141
/>
42-
</div>
43-
)
44-
}
42+
</div>
43+
)
44+
}
4545
}
4646

4747
export default Editor

‎docs/ui/FontSizes.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React from 'react'
2+
3+
export default () => (
4+
<div className="w-100 overflow-x-auto pb4">
5+
<table>
6+
<tbody>
7+
<tr>
8+
<td className="tc f-headline b br b--black-10 v-base">A</td>
9+
<td className="tc ph2 br f-subheadline b br b--black-10 v-base">A</td>
10+
<td className="tc f1 b br b--black-10 v-base">A</td>
11+
<td className="tc f2 b br b--black-10 v-base">A</td>
12+
<td className="tc f3 b br b--black-10 v-base">A</td>
13+
<td className="tc f4 b br b--black-10 v-base">A</td>
14+
<td className="tc f5 b br b--black-10 v-base">A</td>
15+
<td className="tc f6 b b--black-10 v-base">A</td>
16+
</tr>
17+
<tr>
18+
<td className="tc gray f6 fw2 pr2 bt br b--black-10 pt1">
19+
6rem (96px)
20+
</td>
21+
<td className="tc gray f6 fw2 ph2 bt br b--black-10 pt1">
22+
5rem (80px)
23+
</td>
24+
<td className="tc gray f6 fw2 ph2 bt br b--black-10 pt1">
25+
3rem (48px)
26+
</td>
27+
<td className="tc gray f6 fw2 ph2 bt br b--black-10 pt1">
28+
2.25rem (36px)
29+
</td>
30+
<td className="tc gray f6 fw2 ph2 bt br b--black-10 pt1">
31+
1.5rem (24px)
32+
</td>
33+
<td className="tc gray f6 fw2 ph2 bt br b--black-10 pt1">
34+
1.25rem (20px)
35+
</td>
36+
<td className="tc gray f6 fw2 ph2 bt br b--black-10 pt1">
37+
1rem (16px)
38+
</td>
39+
<td className="tc gray f6 fw2 pl2 bt b--black-10 pt1">
40+
.875rem (14px)
41+
</td>
42+
</tr>
43+
</tbody>
44+
</table>
45+
</div>
46+
)

‎docs/ui/Layout.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ import { version } from '../package.json'
44
import Header from './Header'
55
import Footer from './Footer'
66

7-
export default ({ title = 'TACHYONS - Css Toolkit', className = '', children }) => (
7+
export default ({
8+
title = 'TACHYONS - Css Toolkit',
9+
className = '',
10+
children
11+
}) => (
812
<div className="w-100 sans-serif">
913
<title>{title}</title>
1014
<link
@@ -13,9 +17,6 @@ export default ({ title = 'TACHYONS - Css Toolkit', className = '', children })
1317
/>
1418

1519
<Header version={version} />
16-
<main
17-
className={className}
18-
children={children}
19-
/>
20+
<main className={className} children={children} />
2021
</div>
2122
)

‎docs/ui/ScaleHero.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react'
2+
3+
export default () => (
4+
<article className="cf">
5+
<div className="fl w-100 w-50-l pr4-l">
6+
<div className="outline black-10 mt3-ns">
7+
<div className="aspect-ratio aspect-ratio--8x5">
8+
<iframe
9+
className="aspect-ratio--object"
10+
src="https://player.vimeo.com/video/183819916"
11+
frameBorder="0"
12+
allowFullScreen=""
13+
/>
14+
</div>
15+
</div>
16+
</div>
17+
<div className="fl w-100 w-50-l pt4">
18+
<p className="fl w-100 f5 f4-ns lh-copy mb3">
19+
<span>
20+
Often times, websites devote a non-trivial amount of css to setting
21+
font-size
22+
</span>. They declare an unnecessary amount of different font-sizes that
23+
upon inspection, don’t come close to resembling a sane type scale.
24+
</p>
25+
<p className="fl w-100 w-50-ns v-top f5 f6-ns lh-copy pr2-ns">
26+
To create and design an easily readable interface, you don’t need more
27+
than 40 font-sizes. A simple ratio-based scale with 8 options should
28+
suffice. Using the class extension namespaces you can set the font-size
29+
for any particular breakpoint that you desire.
30+
</p>
31+
<p className="fl w-100 w-50-ns measure measure-narrow-ns v-top f5 f6-ns lh-copy pl2-ns">
32+
Don’t spend time constantly overriding font-sizes in your css. If you
33+
don’t like a default font-size for an element, use the utilities to
34+
quickly make the text larger or smaller until it looks just right.
35+
</p>
36+
</div>
37+
</article>
38+
)

‎docs/ui/index.js‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,27 @@ export const TitleLink = ({ href = '#!', subtext, text, ...props }) => (
3232
</Link>
3333
)
3434

35+
export const BigQuote = ({ quote, author, work }) => (
36+
<blockquote className="f5 f4-m f2-l black-70 lh-copy mh0 pv4 ph3 bt bb bw1 b--black-05 mv4 mv5-ns db">
37+
<p className="baskerville fw1 measure center">“{quote}”</p>
38+
<p className="dark-gray f5 f4-m f2-l center measure">
39+
<span className="f6">
40+
—{author}, <cite>{work}</cite>
41+
</span>
42+
</p>
43+
</blockquote>
44+
)
45+
3546
export const md = {
36-
h1: props => <h1 className='f6 ttu tracked mt0' {...props} />,
37-
h2: props => <h2 className='f5 mt4 pb2 bb' {...props} />,
38-
h3: props => <h3 className='f5 mt4' {...props} />,
39-
p: props => <p className='measure f5 lh-copy' {...props} />,
40-
ul: props => <ul className='pl3' {...props} />,
41-
li: props => <li className='lh-copy ml2' {...props} />,
47+
h1: props => <h1 className="f6 ttu tracked mt0" {...props} />,
48+
h2: props => <h2 className="f5 mt4 pb2 bb" {...props} />,
49+
h3: props => <h3 className="f5 mt4" {...props} />,
50+
p: props => <p className="measure f5 lh-copy" {...props} />,
51+
ul: props => <ul className="pl3" {...props} />,
52+
li: props => <li className="lh-copy ml2" {...props} />,
4253
a: ({ href, ...props }) => (
4354
<Link href={href}>
44-
<a className='dim link blue' {...props} />
55+
<a className="dim link blue" {...props} />
4556
</Link>
4657
),
4758
code: Editor

‎docs/ui/withDocLayout.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,15 @@ import { ComponentsProvider } from '@compositor/markdown'
44
import Layout from './Layout'
55
import Container from './Container'
66
import NavElements from './NavElements'
7+
import data from '../data.json'
78
import { md } from './'
89

910
export default Component => ({ title, ...props }) => (
1011
<ComponentsProvider components={md}>
1112
<Layout title={title}>
1213
<NavElements />
13-
<Container padding={true} className='black-70'>
14-
<Component {...props} />
14+
<Container padding={true} className="black-70">
15+
<Component data={data} {...props} />
1516
</Container>
1617
</Layout>
1718
</ComponentsProvider>

0 commit comments

Comments
 (0)