Skip to content

Commit 80f6bc6

Browse files
author
mrmrs
committed
New article components
1 parent 088152f commit 80f6bc6

File tree

134 files changed

+1006
-109
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

134 files changed

+1006
-109
lines changed

‎components/article-lists/title-preview-author-media-flipped/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -375,6 +375,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
375375

376376
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
377377

378+
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
379+
378380
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
379381

380382
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

‎components/article-lists/title-preview-author-media/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -390,6 +390,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
390390

391391
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
392392

393+
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
394+
393395
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
394396

395397
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

‎components/articles/feature/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -355,6 +355,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
355355

356356
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
357357

358+
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
359+
358360
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
359361

360362
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

‎components/articles/full-bleed-background/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
282282

283283
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
284284

285+
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
286+
285287
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
286288

287289
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

‎components/articles/headline-title-text/index.html

Lines changed: 701 additions & 0 deletions
Large diffs are not rendered by default.

‎components/articles/large-title-text/index.html

Lines changed: 39 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -25,41 +25,18 @@
2525
<body class="w-100 sans-serif bg-white">
2626
<main>
2727
<article class="pa3 pa5-ns">
28-
<h1 class="f2 f-subheadline-ns mb4">9.5.1 If the text will be read on the screen, design it for that medium.</h1>
29-
<p class="gray f6 mb4 ttu tracked">By Robert Bringhurst</p>
30-
<p class="f4 f3-ns measure lh-copy">
31-
Like a forest or a garden or a field, an honest page of letters can absorb &ndash;
32-
and will repay &ndash; as much attention as it is given. Much type now, however, is
33-
composed not for the page but for the screen of a computer. That screen can be
34-
alive with flowing color, but the best computer monitors have dismal resolution
35-
(about 130 dpi: one fifth the current norm for laser printers and roughly 5% of
36-
the norm for professional digital typesetting). When the text is crudely
37-
rendered, the eye goes looking for distraction, which the screen is all too
38-
able to provide.
28+
<h1 class="f3 f2-m f1-l">Title</h1>
29+
<p class="measure lh-copy">
30+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
31+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
32+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
33+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
3934
</p>
40-
<p class="f4 f3-ns measure lh-copy">
41-
The screen mimics the sky, not the earth. It bombards the eye with light
42-
instead of waiting to repay the gift of vision. It is not simultaneously
43-
restful and lively, like a field full of flowers, or the face of a thinking
44-
human being, or a well-made typographic page. And we read the screen the way
45-
we read the sky: in quick sweeps, guessing at the weather from the changing
46-
shapes of clouds, or like astronomers, in magnified small bits, examining
47-
details. We look to it for clues and revelations more than wisdom. This makes
48-
it an attractive place for advertising and dogmatizing, but not so good a
49-
place for thoughtful text.
50-
</p>
51-
<p class="f4 f3-ns measure lh-copy">
52-
The screen, in other words, is a reading environment even more fugitive than
53-
the newspaper. Intricate long sentences full of unfamiliar words stand little
54-
chance. At text size, subtle and delicate letterforms stand little chance as
55-
well. Superscripts and subscripts, footnotes, endnotes, sidenotes disappear. In
56-
the harsh light and coarse resolution of the screen such accessories are
57-
difficult to see; what is worse, they dispel the essential illusion of speed.
58-
so the links and jumps of hypertext replace them. All the subtexts then can be
59-
the same size and readers are at liberty to skip from text to text like
60-
children switching channels on tv. When reading takes this form, sentences and
61-
letterforms retreat to blunt simplicity. Forms bred on newsprint and signage
62-
are most likely to survive.
35+
<p class="measure lh-copy">
36+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
37+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
38+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
39+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
6340
</p>
6441
</article>
6542

@@ -71,82 +48,35 @@ <h2 class="f5">HTML</h2>
7148
<p class="f5 black-70"></p>
7249
<pre class="pa3 ba br2 b--black-10 h5 bg-white-20" id="html">
7350
&lt;article class=&quot;pa3 pa5-ns&quot;&gt;
74-
&lt;h1 class=&quot;f2 f-subheadline-ns mb4&quot;&gt;9.5.1 If the text will be read on the screen, design it for that medium.&lt;/h1&gt;
75-
&lt;p class=&quot;gray f6 mb4 ttu tracked&quot;&gt;By Robert Bringhurst&lt;/p&gt;
76-
&lt;p class=&quot;f4 f3-ns measure lh-copy&quot;&gt;
77-
Like a forest or a garden or a field, an honest page of letters can absorb &amp;ndash;
78-
and will repay &amp;ndash; as much attention as it is given. Much type now, however, is
79-
composed not for the page but for the screen of a computer. That screen can be
80-
alive with flowing color, but the best computer monitors have dismal resolution
81-
(about 130 dpi: one fifth the current norm for laser printers and roughly 5% of
82-
the norm for professional digital typesetting). When the text is crudely
83-
rendered, the eye goes looking for distraction, which the screen is all too
84-
able to provide.
85-
&lt;/p&gt;
86-
&lt;p class=&quot;f4 f3-ns measure lh-copy&quot;&gt;
87-
The screen mimics the sky, not the earth. It bombards the eye with light
88-
instead of waiting to repay the gift of vision. It is not simultaneously
89-
restful and lively, like a field full of flowers, or the face of a thinking
90-
human being, or a well-made typographic page. And we read the screen the way
91-
we read the sky: in quick sweeps, guessing at the weather from the changing
92-
shapes of clouds, or like astronomers, in magnified small bits, examining
93-
details. We look to it for clues and revelations more than wisdom. This makes
94-
it an attractive place for advertising and dogmatizing, but not so good a
95-
place for thoughtful text.
51+
&lt;h1 class=&quot;f3 f2-m f1-l&quot;&gt;Title&lt;/h1&gt;
52+
&lt;p class=&quot;measure lh-copy&quot;&gt;
53+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
54+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
55+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
56+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
9657
&lt;/p&gt;
97-
&lt;p class=&quot;f4 f3-ns measure lh-copy&quot;&gt;
98-
The screen, in other words, is a reading environment even more fugitive than
99-
the newspaper. Intricate long sentences full of unfamiliar words stand little
100-
chance. At text size, subtle and delicate letterforms stand little chance as
101-
well. Superscripts and subscripts, footnotes, endnotes, sidenotes disappear. In
102-
the harsh light and coarse resolution of the screen such accessories are
103-
difficult to see; what is worse, they dispel the essential illusion of speed.
104-
so the links and jumps of hypertext replace them. All the subtexts then can be
105-
the same size and readers are at liberty to skip from text to text like
106-
children switching channels on tv. When reading takes this form, sentences and
107-
letterforms retreat to blunt simplicity. Forms bred on newsprint and signage
108-
are most likely to survive.
58+
&lt;p class=&quot;measure lh-copy&quot;&gt;
59+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
60+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
61+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
62+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
10963
&lt;/p&gt;
11064
&lt;/article&gt;
11165

11266
</pre>
11367
</div>
11468
<div class="fl w-100 w-25-ns pl0 pl2-ns">
11569
<h2 class="f5">css</h2>
116-
<pre class="pa3 ba br2 b--black-10 h5" id="css">.tracked {
117-
letter-spacing: .1em;
118-
}
119-
120-
.lh-copy {
70+
<pre class="pa3 ba br2 b--black-10 h5" id="css">.lh-copy {
12171
line-height: 1.5;
12272
}
12373

124-
.gray {
125-
color: #777;
126-
}
127-
12874
.pa3 {
12975
padding: 1rem;
13076
}
13177

132-
.mb4 {
133-
margin-bottom: 2rem;
134-
}
135-
136-
.ttu {
137-
text-transform: uppercase;
138-
}
139-
140-
.f2 {
141-
font-size: 2.25rem;
142-
}
143-
144-
.f4 {
145-
font-size: 1.25rem;
146-
}
147-
148-
.f6 {
149-
font-size: .875rem;
78+
.f3 {
79+
font-size: 1.5rem;
15080
}
15181

15282
.measure {
@@ -157,13 +87,17 @@ <h2 class="f5">css</h2>
15787
.pa5-ns {
15888
padding: 4rem;
15989
}
90+
}
16091

161-
.f-subheadline-ns {
162-
font-size: 5rem;
92+
@media screen and (min-width: 30em) and (max-width: 60em) {
93+
.f2-m {
94+
font-size: 2.25rem;
16395
}
96+
}
16497

165-
.f3-ns {
166-
font-size: 1.5rem;
98+
@media screen and (min-width: 60em) {
99+
.f1-l {
100+
font-size: 3rem;
167101
}
168102
}
169103

@@ -175,32 +109,26 @@ <h2 class="f5">css</h2>
175109
<h2 class="f5 mb3 mt4">Css stats for this component</h2>
176110
<dl class="dib mr4 mt0">
177111
<dt class="db f6">Gzipped Size</dt>
178-
<dd class="ml0 b f3 f2-ns">266<small class="f6">B</small>
112+
<dd class="ml0 b f3 f2-ns">185<small class="f6">B</small>
179113
</dd>
180114
</dl>
181115
<dl class="dib mr4 mt0">
182116
<dt class="db f6">Selectors</dt>
183-
<dd class="ml0 b f3 f2-ns">13</dd>
117+
<dd class="ml0 b f3 f2-ns">7</dd>
184118
</dl>
185119
<dl class="dib mt0">
186120
<dt class="db f6">Declarations</dt>
187-
<dd class="ml0 b f3 f2-ns">13</dd>
121+
<dd class="ml0 b f3 f2-ns">7</dd>
188122
</dl>
189123
</div>
190124
<div class="fl w-100">
191125
<h2 class="f5 mt4">Modules referenced</h2>
192126
<ul class="list pl0 cf lh-copy mw7">
193127

194-
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-letter-spacing">tachyons-letter-spacing</a></li>
195-
196128
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-line-height">tachyons-line-height</a></li>
197129

198-
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-skins">tachyons-skins</a></li>
199-
200130
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-spacing">tachyons-spacing</a></li>
201131

202-
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-text-transform">tachyons-text-transform</a></li>
203-
204132
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-type-scale">tachyons-type-scale</a></li>
205133

206134
<li class="fl w-100 w-50-m w-33-ns"><a class="f5 link dim blue fw6" href="https://github.com/tachyons-css/tachyons-typography">tachyons-typography</a></li>
@@ -213,7 +141,7 @@ <h2 class="f5 mt4">Modules referenced</h2>
213141

214142

215143
<h4 class="mt5">Install via npm <small class="fw2 f6 db mt1">Only installs the needed tachyons-modules for this component</small></h4>
216-
<code class="f6">npm i --save tachyons-letter-spacing tachyons-line-height tachyons-skins tachyons-spacing tachyons-text-transform tachyons-type-scale tachyons-typography</code>
144+
<code class="f6">npm i --save tachyons-line-height tachyons-spacing tachyons-type-scale tachyons-typography</code>
217145
<section class="bt b--black-10 mt5 pv4">
218146
<h1 class="f6 b ttu">Other Components</h1>
219147

@@ -234,6 +162,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
234162

235163
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
236164

165+
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
166+
237167
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
238168

239169
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

‎components/articles/left-title-top-border/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -308,6 +308,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
308308

309309
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
310310

311+
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
312+
311313
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
312314

313315
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

‎components/articles/left-title/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
255255

256256
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
257257

258+
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
259+
258260
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
259261

260262
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

‎components/articles/photo-essay/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -485,6 +485,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
485485

486486
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
487487

488+
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
489+
488490
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
489491

490492
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

‎components/articles/single-column-large-title/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -317,6 +317,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
317317

318318
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/full-bleed-background/index.html">Full Bleed Background</a>
319319

320+
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/headline-title-text/index.html">Headline Title Text</a>
321+
320322
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
321323

322324
<a class="f5 dib mr3 mb2 blue link dim fw6" href="/components/articles/left-title-top-border/index.html">Left Title Top Border</a>

0 commit comments

Comments
 (0)