Skip to content

Commit 4e0c8dc

Browse files
author
mrmrs
committed
Update docs for line-height / leading.
1 parent 2da4717 commit 4e0c8dc

File tree

3 files changed

+36
-10
lines changed

3 files changed

+36
-10
lines changed

‎docs/typography/line-height/index.html

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
66
<title>
7-
Line Height / Typography / Docs / TACHYONS
7+
tachyons-line-height / Typography / Docs / TACHYONS
88
</title>
9-
<meta name="author" content="@mr3rs">
10-
<meta name="description" content="CSS">
9+
<meta name="author" content="@mrmrs">
10+
<meta name="description" content="">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
1212
<link rel="stylesheet" href="/css/tachyons.css">
1313
</head>
@@ -42,8 +42,8 @@
4242
</header>
4343

4444
<main class="">
45-
<article class="bg-near-white bt b--black-10 ph3 pt3 ph5-ns">
46-
<h4 class="f4 mv0 fw6 dib mr4">line-height</h4>
45+
<article class="bg-near-white bt b--black-10 pa3 ph5-ns">
46+
<h4 class="f4 mv0 fw6 dib mr4">tachyons-line-height</h4>
4747
<span class="f4 b dib pl0 ml0 mr4">v2.0.3</span>
4848
<span class="f4 b dib pl0 ml0 mr4">147 B</span>
4949
<div>
@@ -64,6 +64,19 @@ <h4 class="f4 mv0 fw6 dib mr4">line-height</h4>
6464
<dd class="db pl0 ml0 f4 f2-ns b">1</dd>
6565
</dl>
6666
</div>
67+
<p class="measure f3 lh-copy">
68+
<b class="bold">line-height</b> is a css property<br><br>
69+
<b class="bold">lead</b> <i>[rhyming with red]:</i> <br>
70+
Originally a strip of soft metal used
71+
for vertical spacing between lines of type. Now meaning the
72+
vertical distance from the baseline of one line to the baseline of the next. Also
73+
called <b class="bold">leading</b>.
74+
</p>
75+
<p class="measure f4 lh-copy">
76+
There are generally 3 to 4 different line-heights you will need when setting type.
77+
Line-height affects how easy it is to read a piece of text, so having a well constructed
78+
set of values can help make your text a little easier to digest.
79+
</p>
6780
</article>
6881
<div class="ph3 ph5-ns pt4 pb5">
6982
<h2 class="f3 bold">Examples</h2>

‎lib/line-height.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ var module = require('tachyons-line-height/package.json')
99
var moduleCss = fs.readFileSync('node_modules/tachyons-line-height/css/tachyons-line-height.min.css', 'utf8')
1010
var moduleObj = cssstats(moduleCss)
1111
var moduleSize = filesize(moduleObj.gzipSize)
12-
var moduleName = module.name.split("tachyons-").pop()
12+
var moduleName = module.name
1313

1414
var srcCSS = fs.readFileSync('./src/css/_line-height.css', 'utf8')
1515
var navDocs = fs.readFileSync('./src/templates/nav_docs.html', 'utf8')

‎src/templates/docs/line-height/index.html

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@
44
<meta charset="utf-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
66
<title>
7-
Line Height / Typography / Docs / TACHYONS
7+
<%= name %> / Typography / Docs / TACHYONS
88
</title>
9-
<meta name="author" content="@mr3rs">
10-
<meta name="description" content="CSS">
9+
<meta name="author" content="@mrmrs">
10+
<meta name="description" content="">
1111
<meta name="viewport" content="width=device-width, initial-scale=1">
1212
<link rel="stylesheet" href="/css/tachyons.css">
1313
</head>
1414
<body class="w-100 sans-serif">
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,6 +37,19 @@ <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 f3 lh-copy">
41+
<b class="bold">line-height</b> is a css property<br><br>
42+
<b class="bold">lead</b> <i>[rhyming with red]:</i> <br>
43+
Originally a strip of soft metal used
44+
for vertical spacing between lines of type. Now meaning the
45+
vertical distance from the baseline of one line to the baseline of the next. Also
46+
called <b class="bold">leading</b>.
47+
</p>
48+
<p class="measure f4 lh-copy">
49+
There are generally 3 to 4 different line-heights you will need when setting type.
50+
Line-height affects how easy it is to read a piece of text, so having a well constructed
51+
set of values can help make your text a little easier to digest.
52+
</p>
4053
</article>
4154
<div class="ph3 ph5-ns pt4 pb5">
4255
<h2 class="f3 bold">Examples</h2>

0 commit comments

Comments
 (0)