Skip to content

Commit 5749460

Browse files
author
mrmrs
committed
Remove space. Update measure docs with measure-narrow class.
1 parent 9aecf25 commit 5749460

File tree

3 files changed

+231
-83
lines changed

3 files changed

+231
-83
lines changed

‎docs/typography/measure/index.html

+115-41
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
Measure / Typography / Docs / TACHYONS
66
</title>
77
<meta name="description" content="Functional CSS for Humans">
8-
<meta charset="utf-8">
8+
<meta charset="utf-8">
99
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
1010
<meta name="author" content="@mrmrs">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -17,7 +17,7 @@
1717

1818
</head>
1919
<body class="w-100">
20-
<header class="w-100 pa3 ph5-ns bg-near-white">
20+
<header class="w-100 pa3 ph5-ns bg-near-white">
2121
<div class="dt w-100">
2222
<div class="dtc v-mid tl w-50">
2323
<a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-50 dim" title="Home">
@@ -51,22 +51,22 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-typography</h4>
5151
<span class="f4 b dib pl0 ml0 mr4">v2.1.0</span>
5252
<span class="f4 b dib pl0 ml0 mr4">226 B</span>
5353
<div>
54-
<dl class="dib mr4 mt0">
55-
<dt class="f6 db">Declarations </dt>
56-
<dd class="db pl0 ml0 f4 f2-ns b">32</span></dd>
57-
</dl>
58-
<dl class="dib mr4">
59-
<dt class="f6 db pr2">Selectors </dt>
60-
<dd class="db pl0 ml0 f4 f2-ns b">16</dd>
61-
</dl>
62-
<dl class="dib mr4">
63-
<dt class="f6 db pr2">Max. Specificity Score </dt>
64-
<dd class="db pl0 ml0 f4 f2-ns b">10</dd>
65-
</dl>
66-
<dl class="dib mr4">
67-
<dt class="f6 db pr2">Size of Avg. Rule </dt>
68-
<dd class="db pl0 ml0 f4 f2-ns b">2</dd>
69-
</dl>
54+
<dl class="dib mr4 mt0">
55+
<dt class="f6 db">Declarations </dt>
56+
<dd class="db pl0 ml0 f4 f2-ns b">32</span></dd>
57+
</dl>
58+
<dl class="dib mr4">
59+
<dt class="f6 db pr2">Selectors </dt>
60+
<dd class="db pl0 ml0 f4 f2-ns b">16</dd>
61+
</dl>
62+
<dl class="dib mr4">
63+
<dt class="f6 db pr2">Max. Specificity Score </dt>
64+
<dd class="db pl0 ml0 f4 f2-ns b">10</dd>
65+
</dl>
66+
<dl class="dib mr4">
67+
<dt class="f6 db pr2">Size of Avg. Rule </dt>
68+
<dd class="db pl0 ml0 f4 f2-ns b">2</dd>
69+
</dl>
7070
</div>
7171
<p class="measure f4 f3-ns lh-copy">
7272
Measure refers to the length of a line of text.
@@ -75,6 +75,11 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-typography</h4>
7575
"Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page...the 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40-50 characters."
7676
<span class="db f5"><b>Robert Bringhurst</b> - <i>The Elements of Typographic Style</i></span>
7777
</p>
78+
<p class="measure f5 f4-ns lh-copy">
79+
Tachyons provides two classes for setting measure. For line lengths
80+
around 66 characters use <code>.measure</code>, and for line-lengths around 45
81+
characters use <code>.measure-narrow</code>
82+
</p>
7883
</article>
7984
<div class="ph3 ph5-ns">
8085
<h1 class="f5 fw4 sans-serif pt5 ttu black"><b>6rem/96px</b> at <b>30em</b></h1>
@@ -85,7 +90,7 @@ <h1 class="f5 fw4 sans-serif pt5 ttu black"><b>5rem/80px</b> at <b>30em</b></h1>
8590
<p class="f-subheadline measure lh-title mt4">
8691
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
8792
</p>
88-
<h1 class="f5 fw4 sans-serif pt5 bt b--light-gray ttu black"> <b>3rem(48px)</b> at <b>30em</b></h1>
93+
<h1 class="f5 fw4 sans-serif pt5 bt b--black-10 ttu black"> <b>3rem(48px)</b> at <b>30em</b></h1>
8994
<div class="pb4">
9095
<p class="f1 measure lh-title mt4">
9196
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
@@ -94,57 +99,126 @@ <h1 class="f5 fw4 sans-serif pt5 bt b--light-gray ttu black"> <b>3rem(48px)</b>
9499
no sea takimata sanctus est Lorem ipsum dolor sit amet.
95100
</p>
96101
</div>
97-
<h1 class="f5 sans-serif pt5 mb4 bt b--light-gray ttu black"><b>2.25rem (36px)</b> at <b>30em</b></h1>
102+
<h1 class="f6 pt5 mb4 bt b--black-10 ttu black"><b>2.25rem (36px)</b> at <b>30em</b></h1>
98103
<div class="cf w-100 pb4">
99104
<div class="fl w-100">
100-
<p class="f2 measure lh-title">
101-
Climb leg sit by the fire. Scream at teh bath intrigued by the shower, yet spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce yet swat at dog. Then cats take over the world loves cheeseburgers or cough
102-
claws in your leg. Hide from vacuum cleaner intently sniff hand knock dish off table head butt cant eat out of my own dish chew foot, and stick butt in face.
105+
<p class="f2 measure lh-copy">
106+
Climb leg sit by the fire. Scream at teh bath intrigued by the
107+
shower, yet spot something, big eyes, big eyes, crouch, shake butt, prepare to
108+
pounce yet swat at dog. Then cats take over the world loves cheeseburgers or
109+
cough
110+
claws in your leg. Hide from vacuum cleaner intently sniff hand
111+
knock dish off table head butt cant eat out of my own dish chew foot, and stick
112+
butt in face.
103113
</p>
104114
</div>
105115
</div>
106-
<h1 class="f5 fw4 sans-serif pt5 bt b--light-gray ttu black mb4"><b>1.5rem (24px)</b> at <b>30em</b></h1>
116+
<h1 class="f6 fw4 sans-serif pt5 bt b--black-10 ttu black mb4"><b>1.5rem (24px)</b> at <b>30em</b></h1>
107117
<div class="cf w-100 pb4">
108118
<div class="fl w-100 pr0 pr4-l">
109-
<p class="f3 measure lh-title">
119+
<p class="f3 measure lh-copy">
110120
<b>Lorem ipsum dolor</b> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
111121
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
112122
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
113123
no sea takimata sanctus est Lorem ipsum dolor sit amet.
114124
</p>
115125
</div>
126+
<h1 class="f6 fw4 sans-serif pt4 ttu black mb2"><b>1.5rem (24px)</b> at <b>20em</b></h1>
127+
<div class="dib f4 measure-narrow mr4">
128+
<p class="f3 lh-title">
129+
<b>Lorem ipsum dolor</b> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
130+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
131+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
132+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
133+
</p>
134+
</div>
135+
<div class="dib f4 measure-narrow">
136+
<p class="f3 lh-title">
137+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
138+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
139+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
140+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
141+
</p>
142+
</div>
143+
</div>
144+
<h1 class="f6 fw4 sans-serif pt5 mb4 bt b--black-10 ttu black"><b>1.25rem/20px</b> at <b>30em</b></h1>
145+
<div class="pb4">
146+
<p class="f4 measure lh-copy">
147+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
148+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
149+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
150+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
151+
</p>
152+
<h1 class="f6 fw4 sans-serif pt3 ttu black mb4"><b>1.25rem (20px)</b> at <b>20em</b></h1>
153+
<div class="dib f4 measure-narrow mr4">
154+
<p class="f4 lh-title">
155+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
156+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
157+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
158+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
159+
</p>
160+
</div>
161+
<div class="dib f4 measure-narrow">
162+
<p class="f4 lh-title">
163+
<b>Lorem ipsum dolor</b> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
164+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
165+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
166+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
167+
</p>
168+
</div>
116169
</div>
117-
<h1 class="f5 fw4 sans-serif pt5 mb4 bt b--light-gray ttu black"><b>1.25rem/20px</b> at <b>30em</b></h1>
170+
<h1 class="f6 sans-serif pt5 bt b--black-10 ttu black"><b>1rem (16px)</b> at <b>30em</b></h1>
118171
<div class="pb4">
119-
<p class="f4 measure lh-title tj ">
120-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
172+
<p class="f5 measure lh-copy">
173+
<b>Lorem ipsum dolor</b> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
121174
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
122175
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
123176
no sea takimata sanctus est Lorem ipsum dolor sit amet.
124177
</p>
125-
</div>
126-
<h1 class="f6 sans-serif pt5 bt b--light-gray ttu black"><b>1rem (16px)</b> at <b>30em</b></h1>
127-
<div class="cf w-100 pb4">
128-
<div class="fl w-100">
129-
<p class="f5 measure lh-title">
130-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
178+
<h1 class="f6 sans-serif pt3 ttu black"><b>1rem (16px)</b> at <b>20em</b></h1>
179+
<div class="dib f5 measure-narrow mr4">
180+
<p class="f5 lh-title">
181+
<b>Lorem ipsum dolor</b> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
131182
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
132183
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
133184
no sea takimata sanctus est Lorem ipsum dolor sit amet.
134185
</p>
135-
</div>
186+
</div>
187+
<div class="dib f5 measure-narrow">
188+
<p class="f5 lh-title">
189+
<b>Lorem ipsum dolor</b> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
190+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
191+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
192+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
193+
</p>
194+
</div>
136195
</div>
137-
<h1 class="f6 sans-serif pt5 bt b--light-gray ttu black"><b>.875rem (14px)</b> at <b>30em</b></h1>
138-
<div class="cf w-100 pb4">
139-
<div class="fl w-100">
140-
<p class="f6 measure lh-title">
141-
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
196+
<h1 class="f6 sans-serif pt5 bt b--black-10 ttu black"><b>.875rem (14px)</b> at <b>30em</b></h1>
197+
<div class="pb4">
198+
<p class="f6 measure lh-copy">
199+
<b>Lorem ipsum dolor</b> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
142200
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
143201
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
144202
no sea takimata sanctus est Lorem ipsum dolor sit amet.
145203
</p>
204+
<h1 class="f6 sans-serif pt3 ttu black"><b>.875rem (14px)</b> at <b>20em</b></h1>
205+
<div class="dib f5 measure-narrow mr4">
206+
<p class="f6 lh-title">
207+
<b>Lorem ipsum dolor</b> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
208+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
209+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
210+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
211+
</p>
212+
</div>
213+
<div class="dib f5 measure-narrow">
214+
<p class="f6 lh-title">
215+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
216+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
217+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
218+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
219+
</p>
220+
</div>
146221
</div>
147-
</div>
148222
<h1>Truncation</h1>
149223
<p>If you want to truncate text that exceeds past a certain width you can use the truncate class combined with a width</p>
150224
<code class="f6 bg-near-white pa1">&lt;p class="mw4 truncate"&gt;&lt;/p&gt;</code>

0 commit comments

Comments
 (0)