Skip to content

Commit c05e631

Browse files
author
mrmrs
committed
Add font-weight documentation.
1 parent ebca25d commit c05e631

File tree

2 files changed

+54
-20
lines changed

2 files changed

+54
-20
lines changed

‎docs/typography/font-weight/index.html

+27-10
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
</header>
4343

4444
<main class="">
45-
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
45+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
4646
<h4 class="f4 mv0 fw6 dib mr4">font-weight</h4>
4747
<span class="f4 b dib pl0 ml0 mr4">v4.0.2</span>
4848
<span class="f4 b dib pl0 ml0 mr4">246 B</span>
@@ -64,21 +64,38 @@ <h4 class="f4 mv0 fw6 dib mr4">font-weight</h4>
6464
<dd class="db pl0 ml0 f4 f2-ns b">1</dd>
6565
</dl>
6666
</div>
67+
<p class="measure f4 f3-ns lh-copy">
68+
Single purpose classes to set the font-weight of any element at any breakpoint.
69+
</p>
70+
<p class="measure f5 f4-ns lh-copy">
71+
Varying the font-weight of different pieces of text can help create
72+
contrast between pieces of information. It can help call attention to a piece
73+
of content, or help to make a smaller font-size a bit more readable. In
74+
Elements of Typographic Style, Robert Bringhurst suggests we keep two things in
75+
mind when playing with font-weight.
76+
Use bold weights sparingly. Font-weight should decrease as font-size increases.
77+
</p>
6778
</article>
6879
<div class="ph3 ph5-ns pt4 pb5">
6980
<h2 class="f3 bold">Examples</h2>
7081

7182
<h3 class="f5 book sans-serif pt4 caps black-100">String Values</h3>
72-
<p class="normal">Normal</p>
73-
<p class="b">b</p>
74-
83+
<div class="cf">
84+
<div class="fl f5 f2-m f1-l normal v-mid tc"><span class="db bg-near-white pv3 ba b--white ph4">Aa <span class="db f6 fw4">normal</span></span></div>
85+
<div class="fl f5 f2-m f1-l b v-mid tc"><span class="db bg-near-white pv3 ba b--white ph4">Aa <span class="db f6 fw4">b</span></span></div>
86+
!/div>
7587
<h3 class="f5 book sans-serif pt4 caps black-100">Literal Number Values</h3>
76-
<p class="thin">thin: 100</p>
77-
<p class="book">book: 400</p>
78-
<p class="fw6">fw6: 500</p>
79-
<p class="bold">bold: 600</p>
80-
<p class="heavy">heavy: 700</p>
81-
<p class="ultrabold">ultrabold: 900</p>
88+
<div class="dt w-100" style="table-layout: fixed;">
89+
<div class="dtc f5 f2-m f1-l fw1 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">100</span></span></div>
90+
<div class="dtc f5 f2-m f1-l fw2 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">200</span></span></div>
91+
<div class="dtc f5 f2-m f1-l fw3 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">300</span></span></div>
92+
<div class="dtc f5 f2-m f1-l fw4 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">400</span></span></div>
93+
<div class="dtc f5 f2-m f1-l fw5 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">500</span></span></div>
94+
<div class="dtc f5 f2-m f1-l fw6 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">600</span></span></div>
95+
<div class="dtc f5 f2-m f1-l fw7 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">700</span></span></div>
96+
<div class="dtc f5 f2-m f1-l fw8 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">800</span></span></div>
97+
<div class="dtc f5 f2-m f1-l fw9 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">900</span></span></div>
98+
</div>
8299

83100
<div class="mt5 cf">
84101
<div class="dib mr4">

‎src/templates/docs/font-weight/index.html

+27-10
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
<%= siteHeader %>
1717
<main class="">
18-
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
18+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
1919
<h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
2020
<span class="f4 b dib pl0 ml0 mr4">v<%= moduleVersion %></span>
2121
<span class="f4 b dib pl0 ml0 mr4"><%= moduleSize %></span>
@@ -37,21 +37,38 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
3737
<dd class="db pl0 ml0 f4 f2-ns b"><%= moduleObj.rules.size.average %></dd>
3838
</dl>
3939
</div>
40+
<p class="measure f4 f3-ns lh-copy">
41+
Single purpose classes to set the font-weight of any element at any breakpoint.
42+
</p>
43+
<p class="measure f5 f4-ns lh-copy">
44+
Varying the font-weight of different pieces of text can help create
45+
contrast between pieces of information. It can help call attention to a piece
46+
of content, or help to make a smaller font-size a bit more readable. In
47+
Elements of Typographic Style, Robert Bringhurst suggests we keep two things in
48+
mind when playing with font-weight.
49+
Use bold weights sparingly. Font-weight should decrease as font-size increases.
50+
</p>
4051
</article>
4152
<div class="ph3 ph5-ns pt4 pb5">
4253
<h2 class="f3 bold">Examples</h2>
4354

4455
<h3 class="f5 book sans-serif pt4 caps black-100">String Values</h3>
45-
<p class="normal">Normal</p>
46-
<p class="b">b</p>
47-
56+
<div class="cf">
57+
<div class="fl f5 f2-m f1-l normal v-mid tc"><span class="db bg-near-white pv3 ba b--white ph4">Aa <span class="db f6 fw4">normal</span></span></div>
58+
<div class="fl f5 f2-m f1-l b v-mid tc"><span class="db bg-near-white pv3 ba b--white ph4">Aa <span class="db f6 fw4">b</span></span></div>
59+
!/div>
4860
<h3 class="f5 book sans-serif pt4 caps black-100">Literal Number Values</h3>
49-
<p class="thin">thin: 100</p>
50-
<p class="book">book: 400</p>
51-
<p class="fw6">fw6: 500</p>
52-
<p class="bold">bold: 600</p>
53-
<p class="heavy">heavy: 700</p>
54-
<p class="ultrabold">ultrabold: 900</p>
61+
<div class="dt w-100" style="table-layout: fixed;">
62+
<div class="dtc f5 f2-m f1-l fw1 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">100</span></span></div>
63+
<div class="dtc f5 f2-m f1-l fw2 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">200</span></span></div>
64+
<div class="dtc f5 f2-m f1-l fw3 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">300</span></span></div>
65+
<div class="dtc f5 f2-m f1-l fw4 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">400</span></span></div>
66+
<div class="dtc f5 f2-m f1-l fw5 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">500</span></span></div>
67+
<div class="dtc f5 f2-m f1-l fw6 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">600</span></span></div>
68+
<div class="dtc f5 f2-m f1-l fw7 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">700</span></span></div>
69+
<div class="dtc f5 f2-m f1-l fw8 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">800</span></span></div>
70+
<div class="dtc f5 f2-m f1-l fw9 v-mid tc"><span class="db bg-near-white pv3 ba b--white">Aa <span class="db f6 fw4">900</span></span></div>
71+
</div>
5572

5673
<div class="mt5 cf">
5774
<div class="dib mr4">

0 commit comments

Comments
 (0)