Skip to content

Commit 3fd7797

Browse files
author
mrmrs
committed
Update typography docs.
1 parent 4e0c8dc commit 3fd7797

File tree

2 files changed

+50
-2
lines changed

2 files changed

+50
-2
lines changed

‎docs/typography/measure/garamond/index.html

+25-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
</header>
4242

4343
<main>
44-
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
44+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
4545
<h4 class="f4 mv0 fw6 dib mr4">typography</h4>
4646
<span class="f4 b dib pl0 ml0 mr4">v2.1.0</span>
4747
<span class="f4 b dib pl0 ml0 mr4">226 B</span>
@@ -63,6 +63,12 @@ <h4 class="f4 mv0 fw6 dib mr4">typography</h4>
6363
<dd class="db pl0 ml0 f4 f2-ns b">2</dd>
6464
</dl>
6565
</div>
66+
<p class="measure f4 f3-ns lh-copy">
67+
Measure is...<br>
68+
Measure impacts the readability of text.
69+
An appropriate line length for single column text is 45-75 characters including spaces.
70+
66 characters is regarded as the most ideal line length.
71+
</p>
6672
</article>
6773
<div class="ph3 ph5-ns">
6874
<h1 class="f5 book sans-serif pt5 ttu black">Garamond set to <b>3rem/48px</b> at <b>30em</b></h1>
@@ -74,6 +80,15 @@ <h1 class="f5 book sans-serif pt5 ttu black">Garamond set to <b>3rem/48px</b> at
7480
no sea takimata sanctus est Lorem ipsum dolor sit amet.
7581
</span>
7682
</p>
83+
<h1 class="f5 book sans-serif pt5 ttu black">Garamond set to <b>3rem/48px</b> at <b>20em</b></h1>
84+
<p class="f1 measure-narrow lh-title mt4">
85+
<span class="garamond">
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+
</span>
91+
</p>
7792
<h1 class="f5 book sans-serif pt5 bt b--light-gray ttu black">Garamond set to <b>2.25rem(36px)</b> at <b>30em</b></h1>
7893
<div class="pb4">
7994
<p class="garamond f2 measure lh-title mt4">
@@ -126,6 +141,15 @@ <h1 class="f6 sans-serif pt5 bt b--light-gray ttu black">Garamond set to <b>.875
126141
</p>
127142
</div>
128143
</div>
144+
<h1>Truncation</h1>
145+
<p>If you want to truncate text that exceeds past a certain width you can use the truncate class combined with a width</p>
146+
<code class="f6 bg-near-white pa1">&lt;p class="mw4 truncate"&gt;&lt;/p&gt;</code>
147+
<p class="mw4 truncate">
148+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
149+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
150+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
151+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
152+
</p>
129153
<div class="mt5 cf sans-serif">
130154
<div class="dib mrl">
131155
<h1 class="f4 ttu tracked semibold">Previous</h1>

‎src/templates/docs/measure/garamond/index.html

+25-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<body class="w-100">
1515
<%= siteHeader %>
1616
<main>
17-
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
17+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
1818
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
1919
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
2020
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
@@ -36,6 +36,12 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
3636
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
3737
</dl>
3838
</div>
39+
<p class="measure f4 f3-ns lh-copy">
40+
Measure is...<br>
41+
Measure impacts the readability of text.
42+
An appropriate line length for single column text is 45-75 characters including spaces.
43+
66 characters is regarded as the most ideal line length.
44+
</p>
3945
</article>
4046
<div class="ph3 ph5-ns">
4147
<h1 class="f5 book sans-serif pt5 ttu black">Garamond set to <b>3rem/48px</b> at <b>30em</b></h1>
@@ -47,6 +53,15 @@ <h1 class="f5 book sans-serif pt5 ttu black">Garamond set to <b>3rem/48px</b> at
4753
no sea takimata sanctus est Lorem ipsum dolor sit amet.
4854
</span>
4955
</p>
56+
<h1 class="f5 book sans-serif pt5 ttu black">Garamond set to <b>3rem/48px</b> at <b>20em</b></h1>
57+
<p class="f1 measure-narrow lh-title mt4">
58+
<span class="garamond">
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.
63+
</span>
64+
</p>
5065
<h1 class="f5 book sans-serif pt5 bt b--light-gray ttu black">Garamond set to <b>2.25rem(36px)</b> at <b>30em</b></h1>
5166
<div class="pb4">
5267
<p class="garamond f2 measure lh-title mt4">
@@ -99,6 +114,15 @@ <h1 class="f6 sans-serif pt5 bt b--light-gray ttu black">Garamond set to <b>.875
99114
</p>
100115
</div>
101116
</div>
117+
<h1>Truncation</h1>
118+
<p>If you want to truncate text that exceeds past a certain width you can use the truncate class combined with a width</p>
119+
<code class="f6 bg-near-white pa1">&lt;p class="mw4 truncate"&gt;&lt;/p&gt;</code>
120+
<p class="mw4 truncate">
121+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
122+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
123+
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
124+
no sea takimata sanctus est Lorem ipsum dolor sit amet.
125+
</p>
102126
<div class="mt5 cf sans-serif">
103127
<div class="dib mrl">
104128
<h1 class="f4 ttu tracked semibold">Previous</h1>

0 commit comments

Comments
 (0)