Skip to content

Commit ffda6d4

Browse files
author
mrmrs
committed
Add some components!
1 parent 3f681b9 commit ffda6d4

File tree

32 files changed

+2575
-8
lines changed

32 files changed

+2575
-8
lines changed

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

Lines changed: 45 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
<body class="w-100 sans-serif bg-white">
1818
<main>
1919
<article class="pa3 pa5-ns">
20-
<h1 class="f2 f-subheadline-ns">9.5.1 If the text will be read on the screen, design it for that medium.</h1>
20+
<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>
21+
<p class="gray f6 mb4 ttu tracked">By Robert Bringhurst</p>
2122
<p class="f4 f3-ns measure lh-copy">
2223
Like a forest or a garden or a field, an honest page of letters can absorb --
2324
and will repay -- as much attention as it is given. Much type now, however, is
@@ -63,7 +64,8 @@ <h2 class="f5">HTML</h2>
6364
<p class="f5 black-70"></p>
6465
<pre class="pa3 ba br2 b--black-05 h5" id="html">
6566
&lt;article class=&quot;pa3 pa5-ns&quot;&gt;
66-
&lt;h1 class=&quot;f2 f-subheadline-ns&quot;&gt;9.5.1 If the text will be read on the screen, design it for that medium.&lt;/h1&gt;
67+
&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;
68+
&lt;p class=&quot;gray f6 mb4 ttu tracked&quot;&gt;By Robert Bringhurst&lt;/p&gt;
6769
&lt;p class=&quot;f4 f3-ns measure lh-copy&quot;&gt;
6870
Like a forest or a garden or a field, an honest page of letters can absorb --
6971
and will repay -- as much attention as it is given. Much type now, however, is
@@ -104,14 +106,30 @@ <h2 class="f5">HTML</h2>
104106
</div>
105107
<div class="fl w-100 w-25-ns pl0 pl2-ns">
106108
<h2 class="f5">CSS</h2>
107-
<pre class="pa3 ba br2 b--black-05 h5" id="css">.lh-copy {
109+
<pre class="pa3 ba br2 b--black-05 h5" id="css">.tracked {
110+
letter-spacing: .16em;
111+
}
112+
113+
.lh-copy {
108114
line-height: 1.6;
109115
}
110116

117+
.gray {
118+
color: #777;
119+
}
120+
111121
.pa3 {
112122
padding: 1rem;
113123
}
114124

125+
.mb4 {
126+
margin-bottom: 2rem;
127+
}
128+
129+
.ttu {
130+
text-transform: uppercase;
131+
}
132+
115133
.f2 {
116134
font-size: 2.25rem;
117135
}
@@ -120,6 +138,10 @@ <h2 class="f5">CSS</h2>
120138
font-size: 1.25rem;
121139
}
122140

141+
.f6 {
142+
font-size: .875rem;
143+
}
144+
123145
.measure {
124146
max-width: 30em;
125147
}
@@ -146,10 +168,16 @@ <h2 class="f5">CSS</h2>
146168
<h2 class="f5 mt4">Modules referenced</h2>
147169
<ul class="list pl0 cf lh-copy mw7">
148170

171+
<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>
172+
149173
<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>
150174

175+
<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>
176+
151177
<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>
152178

179+
<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>
180+
153181
<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>
154182

155183
<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>
@@ -160,15 +188,15 @@ <h2 class="f5 mt4">Modules referenced</h2>
160188
<h2 class="f5 mb3 mt4">CSS Stats for this Component</h2>
161189
<dl class="dib mr4 mt0">
162190
<dt class="db f6">Size (Gzipped)</dt>
163-
<dd class="ml0 b f3 f2-ns">190</dd>
191+
<dd class="ml0 b f3 f2-ns">268</dd>
164192
</dl>
165193
<dl class="dib mr4 mt0">
166194
<dt class="db f6">Selectors</dt>
167-
<dd class="ml0 b f3 f2-ns">8</dd>
195+
<dd class="ml0 b f3 f2-ns">13</dd>
168196
</dl>
169197
<dl class="dib mt0">
170198
<dt class="db f6">Declarations</dt>
171-
<dd class="ml0 b f3 f2-ns">8</dd>
199+
<dd class="ml0 b f3 f2-ns">13</dd>
172200
</dl>
173201
</div>
174202
</div>
@@ -177,7 +205,7 @@ <h2 class="f5 mb3 mt4">CSS Stats for this Component</h2>
177205

178206

179207
<h4 class="mt5">Install via npm <small class="fw2 f6 db mt1">Only installs the needed tachyons-modules for this component</small></h4>
180-
<code class="f6">npm i --save tachyons-line-height tachyons-spacing tachyons-type-scale tachyons-typography</code>
208+
<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>
181209
<section class="bt b--black-10 mt5 pv4">
182210
<h1 class="f6 b ttu">Other Components</h1>
183211

@@ -187,6 +215,8 @@ <h2 class="f5 mb2 ttc mid-gray">articles</h2>
187215

188216
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/large-title-text/index.html">Large Title Text</a>
189217

218+
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/left-title/index.html">Left Title</a>
219+
190220
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/title-text-image/index.html">Title Text Image</a>
191221

192222
<a class="f5 dib mr3 blue link dim fw6" href="/components/articles/title-text/index.html">Title Text</a>
@@ -225,6 +255,8 @@ <h2 class="f5 mb2 ttc mid-gray">layout</h2>
225255

226256
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/four-column-collapse-two/index.html">Four Column Collapse Two</a>
227257

258+
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/four-column/index.html">Four Column</a>
259+
228260
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column-collapse-one/index.html">Two Column Collapse One</a>
229261

230262
<a class="f5 dib mr3 blue link dim fw6" href="/components/layout/two-column/index.html">Two Column</a>
@@ -251,6 +283,12 @@ <h2 class="f5 mb2 ttc mid-gray">nav</h2>
251283

252284
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/large-title-link-list/index.html">Large Title Link List</a>
253285

286+
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/list-overflow/index.html">List Overflow</a>
287+
288+
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/logo-links-inline-collapse/index.html">Logo Links Inline Collapse</a>
289+
290+
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/logo-links-inline/index.html">Logo Links Inline</a>
291+
254292
<a class="f5 dib mr3 blue link dim fw6" href="/components/nav/title-link-list/index.html">Title Link List</a>
255293

256294
</div>

0 commit comments

Comments
 (0)