Skip to content

Commit 9e5f1e1

Browse files
author
mrmrs
committed
Add measure page for default font-stack.
Update quote and explanation.
1 parent 9341589 commit 9e5f1e1

File tree

5 files changed

+539
-16
lines changed

5 files changed

+539
-16
lines changed

‎docs/index.html

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,18 @@
4747

4848
<main>
4949
<div class="ph3 ph5-ns pb3 pt4">
50-
<h1 class="f4 f3-l lh-title measure">
51-
Tachyons was built for designing fast loading, highly readable, and
52-
100% responsive interfaces with as little css as possible.
50+
<h1 class="f4 f3-ns lh-title measure">
51+
Tachyons was built for designing.
5352
</h1>
54-
<p>
55-
56-
</p>
57-
<p class="measure f4 lh-copy">
53+
<p class="f5 f4-ns b measure lh-copy">Create fast loading, highly readable, and
54+
100% responsive interfaces with as little css as possible.</p>
55+
<p class="measure f5 f4-ns lh-copy">
5856
Modules can be altered, extended, or changed to meet your design needs.
57+
You shouldn't need to write css everything you want to build a new
58+
ui component. By learning the composable building blocks in tachyons, you can quickly start to build out interfaces while writing little to no css.
59+
</p>
60+
<p class="measure f5 f4=ns lh-copy">
61+
Coming soon: component and example docs.
5962
</p>
6063
</div>
6164
<div class="ph3 ph5-ns pt3 pb5">

‎docs/typography/measure/index.html

Lines changed: 361 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,361 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
6+
<title>
7+
Measure / Typography / Docs / TACHYONS
8+
</title>
9+
<meta name="author" content="@mrmrs">
10+
<meta name="description" content="Simple CSS">
11+
<meta name="viewport" content="width=device-width, initial-scale=1">
12+
<link rel="stylesheet" href="/css/tachyons.min.css">
13+
</head>
14+
<body class="w-100">
15+
<header class="w-100 pa3 ph5-ns bg-near-white">
16+
<div class="dt w-100">
17+
<div class="dtc v-mid tl w-50">
18+
<a href="/" class="dib f5 f4-ns fw6 mt0 mb1 link black-50 dim" title="Home">
19+
Tachyons
20+
<div class="dib">
21+
<small class="nowrap f6 mt2 mt3-ns pr2 black-50 fw2">v4.0.0-beta.6</small>
22+
</div>
23+
</a>
24+
</div>
25+
<div class="db dtc v-mid w-100 tr">
26+
27+
<a title="Documentation" href="/docs/"
28+
class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
29+
Docs
30+
</a>
31+
<a title="Tachyons on GitHub" href="http://github.com/mrmrs/tachyons/"
32+
class="f6 b dim link black-50 mr1 mr3-m mr4-l dib">
33+
GitHub
34+
</a>
35+
<a title="Tachyons Npm Modules" href="/#npm"
36+
class="f6 b link black-50 dim dib">
37+
Npm
38+
</a>
39+
</div>
40+
</div>
41+
</header>
42+
43+
<main>
44+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
45+
<h4 class="f4 mv0 fw6 dib mr4">tachyons-typography</h4>
46+
<span class="f4 b dib pl0 ml0 mr4">v2.1.0</span>
47+
<span class="f4 b dib pl0 ml0 mr4">226 B</span>
48+
<div>
49+
<dl class="dib mr4 mt0">
50+
<dt class="f6 db">Declarations </dt>
51+
<dd class="db pl0 ml0 f4 f2-ns b">32</span></dd>
52+
</dl>
53+
<dl class="dib mr4">
54+
<dt class="f6 db pr2">Selectors </dt>
55+
<dd class="db pl0 ml0 f4 f2-ns b">16</dd>
56+
</dl>
57+
<dl class="dib mr4">
58+
<dt class="f6 db pr2">Max. Specificity Score </dt>
59+
<dd class="db pl0 ml0 f4 f2-ns b">10</dd>
60+
</dl>
61+
<dl class="dib mr4">
62+
<dt class="f6 db pr2">Size of Avg. Rule </dt>
63+
<dd class="db pl0 ml0 f4 f2-ns b">2</dd>
64+
</dl>
65+
</div>
66+
<p class="measure f4 f3-ns lh-copy">
67+
Measure refers to the length of a line of text.
68+
</p>
69+
<p class="measure f5 f4-ns lh-copy">
70+
"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."
71+
<span class="db f5"><b>Robert Bringhurst</b> - <i>The Elements of Typographic Style</i></span>
72+
</p>
73+
</article>
74+
<div class="ph3 ph5-ns">
75+
<h1 class="f5 fw4 sans-serif pt5 ttu black"><b>6rem/96px</b> at <b>30em</b></h1>
76+
<p class="f-headline measure lh-title mt4">
77+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
78+
</p>
79+
<h1 class="f5 fw4 sans-serif pt5 ttu black"><b>5rem/80px</b> at <b>30em</b></h1>
80+
<p class="f1-subheadline measure-narrow lh-title mt4">
81+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
82+
</p>
83+
<h1 class="f5 fw4 sans-serif pt5 bt b--light-gray ttu black"> <b>3rem(48px)</b> at <b>30em</b></h1>
84+
<div class="pb4">
85+
<p class="f1 measure lh-title mt4">
86+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
87+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
88+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
89+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
90+
</p>
91+
</div>
92+
<h1 class="f5 sans-serif pt5 mb4 bt b--light-gray ttu black"><b>2.25rem (36px)</b> at <b>30em</b></h1>
93+
<div class="cf w-100 pb4">
94+
<div class="fl w-100">
95+
<p class="f2 measure lh-title">
96+
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
97+
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.
98+
</p>
99+
</div>
100+
</div>
101+
<h1 class="f5 fw4 sans-serif pt5 bt b--light-gray ttu black mb4"><b>1.5rem (24px)</b> at <b>30em</b></h1>
102+
<div class="cf w-100 pb4">
103+
<div class="fl w-100 pr0 pr4-l">
104+
<p class="f3 measure lh-title">
105+
<b>Lorem ipsum dolor</b> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
106+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
107+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
108+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
109+
</p>
110+
</div>
111+
</div>
112+
<h1 class="f5 fw4 sans-serif pt5 mb4 bt b--light-gray ttu black"><b>1.25rem/20px</b> at <b>30em</b></h1>
113+
<div class="pb4">
114+
<p class="f4 measure lh-title tj ">
115+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
116+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
117+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
118+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
119+
</p>
120+
</div>
121+
<h1 class="f6 sans-serif pt5 bt b--light-gray ttu black"><b>1rem (16px)</b> at <b>30em</b></h1>
122+
<div class="cf w-100 pb4">
123+
<div class="fl w-100">
124+
<p class="f5 measure lh-title">
125+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
126+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
127+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
128+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
129+
</p>
130+
</div>
131+
</div>
132+
<h1 class="f6 sans-serif pt5 bt b--light-gray ttu black"><b>.875rem (14px)</b> at <b>30em</b></h1>
133+
<div class="cf w-100 pb4">
134+
<div class="fl w-100">
135+
<p class="f6 measure lh-title">
136+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
137+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
138+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
139+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
140+
</p>
141+
</div>
142+
</div>
143+
<h1>Truncation</h1>
144+
<p>If you want to truncate text that exceeds past a certain width you can use the truncate class combined with a width</p>
145+
<code class="f6 bg-near-white pa1">&lt;p class="mw4 truncate"&gt;&lt;/p&gt;</code>
146+
<p class="mw4 truncate">
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+
<div class="mt5 cf sans-serif">
153+
<div class="dib mrl">
154+
<h1 class="f4 ttu tracked semibold">Previous</h1>
155+
<a href="/docs/typography/scale" class="link semibold blue dim">Type-scale</a>
156+
</div>
157+
<div class="dib">
158+
<h1 class="f4 ttu tracked semibold">Next</h1>
159+
<a href="/docs/typography/line-height/" class="link semibold blue dim">Line-height</a>
160+
</div>
161+
</div>
162+
<div class="mt5 pb4 sans-serif">
163+
<h1 class="f4 ttu tracked semibold">Reference</h1>
164+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" class="db link semibold blue dim">MDN - width</a>
165+
<a href="http://webtypography.net/2.1.2" class="link semibold blue dim">Choose a Comfortable Measure</a>
166+
</div>
167+
</div>
168+
<section class="bg-dark-gray white pt4 pbxl">
169+
<header class="ph3 ph5-ns pt4">
170+
<kbd class="yellow">src/_typography.css</kbd>
171+
</header>
172+
<pre class="ph3 ph5-ns">
173+
<code class="code" style="font-size: .75rem;">
174+
@custom-media --breakpoint-not-small screen and (min-width: 48em);
175+
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
176+
@custom-media --breakpoint-large screen and (min-width: 64em);
177+
178+
/*
179+
180+
TYPOGRAPHY
181+
182+
*/
183+
184+
/* Measure is limited to ~75 characters */
185+
.measure {
186+
max-width: 30em;
187+
}
188+
189+
/* Measure is limited to ~45 characters */
190+
.measure-narrow {
191+
max-width: 20em;
192+
}
193+
194+
/* Book paragraph style - paragraphs are indented with no vertical spacing. */
195+
.indent {
196+
text-indent: 1em;
197+
margin-top: 0;
198+
margin-bottom: 0;
199+
}
200+
201+
/* Combine this class with a width to truncate text */
202+
203+
.truncate {
204+
white-space: nowrap;
205+
overflow: hidden;
206+
text-overflow: ellipsis;
207+
}
208+
209+
@media (--breakpoint-not-small) {
210+
.measure-ns {
211+
max-width: 30em;
212+
}
213+
.measure-narrow-ns {
214+
max-width: 20em;
215+
}
216+
.indent-ns {
217+
text-indent: 1em;
218+
margin-top: 0;
219+
margin-bottom: 0;
220+
}
221+
.truncate-ns {
222+
white-space: nowrap;
223+
overflow: hidden;
224+
text-overflow: ellipsis;
225+
}
226+
}
227+
228+
@media (--breakpoint-medium) {
229+
.measure-m { max-width: 30em; }
230+
.measure-narrow-m {
231+
max-width: 20em;
232+
}
233+
.indent-m {
234+
text-indent: 1em;
235+
margin-top: 0;
236+
margin-bottom: 0;
237+
}
238+
.truncate-m {
239+
white-space: nowrap;
240+
overflow: hidden;
241+
text-overflow: ellipsis;
242+
}
243+
}
244+
245+
@media (--breakpoint-large) {
246+
.measure-l { max-width: 30em; }
247+
.measure-narrow-l { max-width: 20em; }
248+
.indent-l {
249+
text-indent: 1em;
250+
margin-top: 0;
251+
margin-bottom: 0;
252+
}
253+
.truncate-l {
254+
white-space: nowrap;
255+
overflow: hidden;
256+
text-overflow: ellipsis;
257+
}
258+
}
259+
260+
</code>
261+
</pre>
262+
</section>
263+
<div class="ph3 ph5-ns pt3 pb5">
264+
<section>
265+
<h2 class="f6 fw7 ttu tracked">Elements</h2>
266+
<a class="f5 fw4 dim link blue db pv1" href="/docs/elements/images/" title="Images">Images</a>
267+
<a class="f5 fw4 dim link blue db pv1" href="/docs/elements/links/" title="Images">Links</a>
268+
<a class="f5 fw4 dim link blue db pv1" href="/docs/elements/lists/" title="Images">Lists</a>
269+
<a class="f5 fw4 dim link blue db pv1 dn" href="/docs/elements/forms/" title="Images">Forms</a>
270+
<section class="cf w-100 mt3">
271+
<article class="fn fl-ns w-100 w-25-l">
272+
<h2 class="f6 fw7 ttu tracked" id="typography">Typography</h2>
273+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/scale" title="Type">Type Scale</a>
274+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/measure/garamond/" title="Measure">Measure</a>
275+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/line-height" title="Line Height">Line Height / Leading</a>
276+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/tracking" title="Tracking">Tracking</a>
277+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/font-weight" title="Font Weights">Font Weights</a>
278+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/font-family" title="Font Families">Font Families</a>
279+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/font-style" title="Font Families">Font Style</a>
280+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/vertical-align" title="Font Families">Vertical Align</a>
281+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/text-align" title="Text Align">Text Align</a>
282+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/text-transform" title="Text Transform">Text Transform</a>
283+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/text-decoration" title="Text Decoration">Text Decoration</a>
284+
<a class="f5 fw4 dim link blue db pv1" href="/docs/typography/white-space" title="White Space">White Space</a>
285+
</article>
286+
<article class="fn fl-ns w-100 w-25-l">
287+
<h2 class="f6 fw7 ttu tracked" id="layout">Layout</h2>
288+
<a class="f5 fw4 dim link blue db pv1" href="/docs/debug/" title="Debugging">Debugging</a>
289+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/box-sizing" title="Box Sizing">Box Sizing</a>
290+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/spacing" title="Spacing">Spacing</a>
291+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/floats" title="Floats">Floats</a>
292+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/clearfix" title="Clears">Clearfix</a>
293+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/display" title="Display">Display</a>
294+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/widths" title="Widths">Widths</a>
295+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/max-widths" title="Max Widths">Max Widths</a>
296+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/heights" title="Heights">Heights</a>
297+
<a class="f5 fw4 dim link blue db pv1" href="/docs/layout/position" title="Position">Position</a>
298+
</article>
299+
<article class="fn fl-ns w-100 w-25-l">
300+
<h2 class="f6 fw7 ttu tracked">Theming</h2>
301+
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/skins/" title="Hovers">Skins</a>
302+
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/hovers/" title="Hovers">Hovers</a>
303+
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/background-size/" title="Background Size">Background Size</a>
304+
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/borders/" title="Borders">Borders</a>
305+
<a class="f5 fw4 dim link blue db pv1" href="/docs/themes/border-radius/" title="Border Radius">Border Radius</a>
306+
</article>
307+
</section>
308+
</section>
309+
</div>
310+
311+
</main>
312+
<footer class="bg-near-white mid-gray ph3 ph5-ns pv5 pv6-ns bt b--light-gray">
313+
<a href="https://twitter.com/intent/tweet?text=Tachyons: Functional CSS for Humans.&url=http://tachyons.io" target="_blank" class="dn mb3 twitter bg-white link dim br2 ph2 pb1 pt0 lh-solid" style="background-color: #55acee;">
314+
<svg class="geomicon dib v-mid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16" height="16" fill="#fff">
315+
<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"/>
316+
</svg>
317+
<span class="dib v-mid white fw6" style="font-size: 12px;">Tweet</span>
318+
</a>
319+
<article>
320+
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
321+
<iframe src="https://ghbtns.com/github-btn.html?user=tachyons-css&repo=tachyons&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
322+
</article>
323+
324+
<p>
325+
<a class="black-70 link dim b dib mr3" href="http://tachyons-slack-invite.herokuapp.com" title="Join our Slack Channel">
326+
Join our Slack Channel
327+
</a>
328+
<a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css/tachyons/issues" title="File a bug, request a feature, ask a question!">
329+
Open an Issue
330+
</a>
331+
<a class="black-70 link dim b dib mr3" href="https://github.com/tachyons-css" title="Tachyons-css on GitHub">
332+
GitHub
333+
</a>
334+
</p>
335+
<p class="measure copy lh-copy">
336+
Have a question? Need help? Feel free to open an issue on GitHub or ask a
337+
question in our slack channel. We're here to try and help make designing in
338+
the browser fun.
339+
</p>
340+
<small class="f6 measure db lh-copy mt5">
341+
A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle
342+
that always moves faster than light.
343+
The word comes from the Greek:
344+
<br> <br>
345+
ταχύς or tachys, meaning "swift, quick, fast, rapid"
346+
</small>
347+
</footer>
348+
349+
<script>
350+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
351+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
352+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
353+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
354+
355+
ga('create', 'UA-55773803-1', 'auto');
356+
ga('send', 'pageview');
357+
358+
</script>
359+
360+
</body>
361+
</html>

0 commit comments

Comments
 (0)