Skip to content

Commit bc9b611

Browse files
author
mrmrs
committed
Visualize type scale
1 parent 9df23d2 commit bc9b611

File tree

12 files changed

+271
-82
lines changed

12 files changed

+271
-82
lines changed

‎css/tachyons.css

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1052,8 +1052,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
10521052
10531053
*/
10541054
/* For Hero Titles */
1055-
.f-6-ns, .f-headline { font-size: 6rem; }
1056-
.f-5-ns, .f-subheadline { font-size: 5rem; }
1055+
.f-6, .f-headline { font-size: 6rem; }
1056+
.f-5, .f-subheadline { font-size: 5rem; }
10571057
/* Type Scale */
10581058
.f1 { font-size: 3rem; }
10591059
.f2 { font-size: 2.25rem; }
@@ -1147,6 +1147,14 @@ code, .code { font-family: Consolas, monaco, monospace; }
11471147
*/
11481148
.hide-child .child { opacity: 0; transition: opacity .15s ease-in; }
11491149
.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; }
1150+
/*
1151+
1152+
WORD BREAK
1153+
1154+
*/
1155+
.wb-normal { word-break: normal; }
1156+
.word-wrap { word-break: break-all; }
1157+
.word-nowrap { word-break: keep-all; }
11501158
/*
11511159
11521160
STYLES
@@ -1443,6 +1451,9 @@ code, .code { font-family: Consolas, monaco, monospace; }
14431451
.v-mid-ns { vertical-align: middle; }
14441452
.v-top-ns { vertical-align: top; }
14451453
.v-btm-ns { vertical-align: bottom; }
1454+
.wb-normal-ns { word-break: normal; }
1455+
.word-wrap-ns { word-break: break-all; }
1456+
.word-nowrap-ns { word-break: keep-all; }
14461457
}
14471458
@media screen and (min-width: 48em) and (max-width: 64em) {
14481459
.bg-cv-m { background-size: cover; }
@@ -1723,6 +1734,9 @@ code, .code { font-family: Consolas, monaco, monospace; }
17231734
.v-mid-m { vertical-align: middle; }
17241735
.v-top-m { vertical-align: top; }
17251736
.v-btm-m { vertical-align: bottom; }
1737+
.wb-normal-m { word-break: normal; }
1738+
.word-wrap-m { word-break: break-all; }
1739+
.word-nowrap-m { word-break: keep-all; }
17261740
}
17271741
@media screen and (min-width: 64em) {
17281742
.bg-cv-l { background-size: cover; }
@@ -2003,5 +2017,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
20032017
.v-mid-l { vertical-align: middle; }
20042018
.v-top-l { vertical-align: top; }
20052019
.v-btm-l { vertical-align: bottom; }
2020+
.wb-normal-l { word-break: normal; }
2021+
.word-wrap-l { word-break: break-all; }
2022+
.word-nowrap-l { word-break: keep-all; }
20062023
}
20072024

‎css/tachyons.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/elements/forms/index.html

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,20 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
64
<title>
75
Forms / Themes / Docs / TACHYONS
86
</title>
9-
<meta name="author" content="@mrmrs">
107
<meta name="description" content="CSS">
11-
<meta name="viewport" content="width=device-width, initial-scale=1">
12-
<link rel="stylesheet" href="/css/tachyons.css">
8+
<meta charset="utf-8">
9+
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
10+
<meta name="author" content="@mrmrs">
11+
<meta name="viewport" content="width=device-width, initial-scale=1">
12+
<link rel="stylesheet" href="/css/tachyons.min.css">
13+
<style>
14+
.blue { color: #0074D9; }
15+
.bg-blue { background-color: #0074D9; }
16+
</style>
17+
1318
</head>
1419
<body class="w-100 sans-serif">
1520

@@ -71,13 +76,8 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-forms</h4>
7176
<div class="ph3 ph5-ns pt4 pb5">
7277
<h2 class="f3 bold">Examples</h2>
7378
<form>
74-
75-
<code class="f6 db">.input-reset</code>
76-
<input type="text" name="" value="" id="" class="input-reset">
77-
78-
<code class="f6 db">.input-reset br2 pa2 ba b--light-gray</code>
79-
<input type="text" name="" value="" id="" class="input-reset br2 ba b--light-gray pa2">
80-
79+
<code class="f6 db">input-reset</code>
80+
<input type="text" class="input-reset">
8181
</form>
8282
<div class="mt5 cf">
8383
<div class="dib mr4">

‎docs/elements/lists/index.html

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -69,37 +69,38 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-lists</h4>
6969
</dl>
7070
</div>
7171
<p class="measure f4 f3-ns lh-copy">
72-
Tachyons has some basic list styling utilities for removing or tweaking default list styles.
72+
A simple reset for list-style-type to remove the default bullets.
7373
</p>
7474
</article>
7575
<div class="ph3 ph5-ns pt4 pb5">
7676
<h2 class="f3 bold">Examples</h2>
77-
<ul class="list pl0">
77+
<code class="f6">&lt;ul class="list pl0"&gt;</code>
78+
<ul class="list pl0 mt2">
7879
<li>Apples</li>
7980
<li>Oranges</li>
8081
<li>Banana</li>
8182
<li>Golf balls</li>
8283
</ul>
83-
<ol class="list pl0">
84+
<code class="f6">&lt;ol class="list pl0"&gt;</code>
85+
<ol class="list pl0 mt2">
8486
<li>One</li>
8587
<li>Two</li>
8688
<li>Three</li>
8789
<li>Four</li>
8890
</ol>
8991
<div class="mt5 cf">
9092
<div class="dib mr4">
91-
<h1 class="f4 ttu tracked fw6">Previous</h1>
92-
<a href="/docs/layout/position/" class="link fw6 blue dim">Position</a>
93+
<h1 class="f6 f5-ns ttu tracked fw6 gray">Previous</h1>
94+
<a href="/docs/elements/links/" class="f5 f4-ns link fw6 blue dim">Links</a>
9395
</div>
9496
<div class="dib">
95-
<h1 class="f4 ttu tracked fw6">Next</h1>
96-
<a href="/docs/themes/background-size/" class="link fw6 blue dim">Background Size</a>
97+
<h1 class="f6 f5-ns ttu tracked fw6 gray">Next</h1>
98+
<a href="/docs/elements/forms/" class="f5 f4-ns link fw6 blue dim">Forms</a>
9799
</div>
98100
</div>
99101
<div class="mt5">
100-
<h1 class="f4 ttu tracked fw6">Reference</h1>
101-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover" class="link db fw6 blue dim">MDN - Hover</a>
102-
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afocus" class="link db fw6 blue dim">MDN - Focus</a>
102+
<h1 class="f6 f5-ns ttu tracked fw6 gray">Reference</h1>
103+
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type" class="f5 f4-ns link db fw6 blue dim">MDN - List Style Type</a>
103104
</div>
104105
</div>
105106
<section class="bg-near-white black-70 pt4 pb5">

‎docs/typography/scale/index.html

Lines changed: 97 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -69,17 +69,13 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-type-scale</h4>
6969
</dl>
7070
</div>
7171
<p class="measure f4 f3-ns lh-copy">
72-
Often times - websites devote a non-trivial amount of css to setting
73-
the font-size of elements. They declare an unnecessary amount of different
74-
font-sizes that don't come close to resembling a sane type scale.
72+
Often times, websites devote a non-trivial amount of css to setting
73+
font-size. They declare an unnecessary amount of different
74+
font-sizes that upon inspection, don't come close to resembling a sane type scale.
7575
</p>
7676
<p class="measure f5 f4-ns lh-copy">
7777
To create and design an easily readable interface, you don't need
78-
40 to 50 font-sizes. A simple ratio-based type-scale is the foundation of
79-
readable interface design.
80-
</p>
81-
<p class="measure f5 f4-ns lh-copy">
82-
There are eight font-sizing classes to choose from.
78+
more than 40 font-sizes. A simple ratio-based scale with 8 options should suffice.
8379
Using the class extension namespaces you
8480
can set the font-size for any particular breakpoint that you desire.
8581
</p>
@@ -89,16 +85,97 @@ <h4 class="f4 mv0 fw6 dib mr4">tachyons-type-scale</h4>
8985
</p>
9086
</article>
9187
<div class="ph3 ph5-ns pt4 pb5">
92-
<h2 class="f3 bold">Examples</h2>
93-
<p class="f-headline lh-solid oh w-100 mb0"><b>Aa</b> Aa</p>
94-
<code class="f6">.f-headline 6rem</code>
95-
<p class="f-subheadline lh-solid w-100 oh"><b>Aa</b> Aa</p>
96-
<p class="f1 lh-solid"><b>Aa</b> Aa </p>
97-
<p class="f2 lh-solid"><b>Aa</b> Aa </p>
98-
<p class="f3 lh-solid"><b>Aa</b> Aa </p>
99-
<p class="f4 lh-solid"><b>Aa</b> Aa </p>
100-
<p class="f5 lh-solid"><b>Aa</b> Aa </p>
101-
<p class="f6 lh-solid"><b>Aa</b> Aa </p>
88+
<h2 class="f3 b mb4">Scale</h2>
89+
<blockquote class="f5 gray measure lh-copy mh0 mb4">
90+
<p class="i">
91+
"The simplest scale is a single note, and sticking with a single note draws more attention to other parameters, such as rhythm and inflection... In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years... This is the typographic equivalent of the diatonic scale."
92+
</p>
93+
94+
<p class="dark-gray f6">Robert Bringhurst - <b>The Elements of Typographic Style</b></p>
95+
</blockquote>
96+
<div class="w-100 overflow-x-auto">
97+
<table>
98+
<tr>
99+
<td class="tc f-headline b br b--black-10 v-base">
100+
A
101+
</td>
102+
<td class="tc ph2 br f-subheadline b br b--black-10 v-base">
103+
A
104+
</td>
105+
<td class="tc f1 b br b--black-10 v-base">
106+
A
107+
</td>
108+
<td class="tc f2 b br b--black-10 v-base">
109+
A
110+
</td>
111+
<td class="tc f3 b br b--black-10 v-base">
112+
A
113+
</td>
114+
<td class="tc f4 b br b--black-10 v-base">
115+
A
116+
</td>
117+
<td class="tc f5 b br b--black-10 v-base">
118+
A
119+
</td>
120+
<td class="tc f6 b b--black-10 v-base">
121+
A
122+
</td>
123+
</tr>
124+
<tr>
125+
<td class="tc gray f6 fw2 pr2 bt br b--black-10 pt1">6rem (96px)</td>
126+
<td class="tc gray f6 fw2 ph2 bt br b--black-10 pt1">5rem (96px)</td>
127+
<td class="tc gray f6 fw2 ph2 bt br b--black-10 pt1">3rem (48px)</td>
128+
<td class="tc gray f6 fw2 ph2 bt br b--black-10 pt1">2.25rem (36px)</td>
129+
<td class="tc gray f6 fw2 ph2 bt br b--black-10 pt1">1.5rem (24px)</td>
130+
<td class="tc gray f6 fw2 ph2 bt br b--black-10 pt1">1.25rem (20px)</td>
131+
<td class="tc gray f6 fw2 ph2 bt br b--black-10 pt1">1rem (16px)</td>
132+
<td class="tc gray f6 fw2 pl2 bt b--black-10 pt1">.875rem (14px)</td>
133+
</tr>
134+
</table>
135+
</div>
136+
<h2 class="f3 b mb5 mt5 mt6-ns">Examples</h2>
137+
<code class="f6 gray">.f-headline 6rem</code>
138+
<p class="f-headline b lh-solid oh measure mt0 mb5 nowrap ws-normal-ns overflow-hidden word-wrap">
139+
Jelly-like above the high wire, six quaking pachyderms kept the climax
140+
of the extravaganza in a dazzling state of flux.
141+
</p>
142+
143+
<code class="f6 db gray">.f-subheadline 5rem</code>
144+
<p class="f-subheadline lh-solid b measure oh mt0 mb4 mb5-ns word-wrap">
145+
Jelly-like above the high wire, six quaking pachyderms kept the climax
146+
of the extravaganza in a dazzling state of flux.
147+
</p>
148+
<code class="f6 db gray">.f1 3rem</code>
149+
<p class="f1 b lh-solid mt0 mb4 mb5-ns measure word-wrap">
150+
Jelly-like above the high wire, six quaking pachyderms kept the climax
151+
of the extravaganza in a dazzling state of flux.
152+
</p>
153+
<code class="f6 db gray">.f2 2.25rem</code>
154+
<p class="f2 lh-copy mt0 mb4 mb5-ns measure word-wrap">
155+
Jelly-like above the high wire, six quaking pachyderms kept the climax
156+
of the extravaganza in a dazzling state of flux.
157+
</p>
158+
<code class="f6 db gray">.f3 1.5rem</code>
159+
<p class="f3 lh-copy mt0 mb4 mb5-ns measure word-wrap">
160+
Jelly-like above the high wire, six quaking pachyderms kept the climax
161+
of the extravaganza in a dazzling state of flux.
162+
163+
</p>
164+
<code class="f6 db gray">.f4 1.25rem</code>
165+
<p class="f4 lh-copy mt0 mb4 mb5-ns measure word-wrap">
166+
Jelly-like above the high wire, six quaking pachyderms kept the climax
167+
of the extravaganza in a dazzling state of flux.
168+
</p>
169+
<code class="f6 db gray">.f5 1rem</code>
170+
<p class="f5 lh-copy mt0 mb4 mb5-ns measure word-wrap">
171+
Jelly-like above the high wire, six quaking pachyderms kept the climax
172+
of the extravaganza in a dazzling state of flux.
173+
</p>
174+
<code class="f6 db gray">.f6 .875rem</code>
175+
<p class="f6 lh-copy mt0 measure word-wrap">
176+
Jelly-like above the high wire, six quaking pachyderms kept the climax
177+
of the extravaganza in a dazzling state of flux.
178+
</p>
102179
<div class="mt5 cf">
103180
<div class="dib mr4">
104181
<h1 class="f4 ttu tracked fw6">Previous</h1>
@@ -131,11 +208,11 @@ <h1 class="f4 ttu tracked fw6">Reference</h1>
131208
*/
132209

133210
/* For Hero Titles */
134-
.f-6-ns,
211+
.f-6,
135212
.f-headline {
136213
font-size: 6rem;
137214
}
138-
.f-5-ns,
215+
.f-5,
139216
.f-subheadline {
140217
font-size: 5rem;
141218
}

‎img/space.jpg

340 KB
Loading

‎readme.md

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Documentation for Tachyons -- a performant, mobile-first, and 100% responsive mo
44

55
#### Stats
66

7-
12244 | 1412 | 1573
7+
12343 | 1424 | 1585
88
---|---|---
99
bytes | selectors | declarations
1010

@@ -1110,8 +1110,8 @@ code, .code { font-family: Consolas, monaco, monospace; }
11101110
11111111
*/
11121112
/* For Hero Titles */
1113-
.f-6-ns, .f-headline { font-size: 6rem; }
1114-
.f-5-ns, .f-subheadline { font-size: 5rem; }
1113+
.f-6, .f-headline { font-size: 6rem; }
1114+
.f-5, .f-subheadline { font-size: 5rem; }
11151115
/* Type Scale */
11161116
.f1 { font-size: 3rem; }
11171117
.f2 { font-size: 2.25rem; }
@@ -1205,6 +1205,14 @@ code, .code { font-family: Consolas, monaco, monospace; }
12051205
*/
12061206
.hide-child .child { opacity: 0; transition: opacity .15s ease-in; }
12071207
.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; }
1208+
/*
1209+
1210+
WORD BREAK
1211+
1212+
*/
1213+
.wb-normal { word-break: normal; }
1214+
.word-wrap { word-break: break-all; }
1215+
.word-nowrap { word-break: keep-all; }
12081216
/*
12091217
12101218
STYLES
@@ -1501,6 +1509,9 @@ code, .code { font-family: Consolas, monaco, monospace; }
15011509
.v-mid-ns { vertical-align: middle; }
15021510
.v-top-ns { vertical-align: top; }
15031511
.v-btm-ns { vertical-align: bottom; }
1512+
.wb-normal-ns { word-break: normal; }
1513+
.word-wrap-ns { word-break: break-all; }
1514+
.word-nowrap-ns { word-break: keep-all; }
15041515
}
15051516
@media screen and (min-width: 48em) and (max-width: 64em) {
15061517
.bg-cv-m { background-size: cover; }
@@ -1781,6 +1792,9 @@ code, .code { font-family: Consolas, monaco, monospace; }
17811792
.v-mid-m { vertical-align: middle; }
17821793
.v-top-m { vertical-align: top; }
17831794
.v-btm-m { vertical-align: bottom; }
1795+
.wb-normal-m { word-break: normal; }
1796+
.word-wrap-m { word-break: break-all; }
1797+
.word-nowrap-m { word-break: keep-all; }
17841798
}
17851799
@media screen and (min-width: 64em) {
17861800
.bg-cv-l { background-size: cover; }
@@ -2061,6 +2075,9 @@ code, .code { font-family: Consolas, monaco, monospace; }
20612075
.v-mid-l { vertical-align: middle; }
20622076
.v-top-l { vertical-align: top; }
20632077
.v-btm-l { vertical-align: bottom; }
2078+
.wb-normal-l { word-break: normal; }
2079+
.word-wrap-l { word-break: break-all; }
2080+
.word-nowrap-l { word-break: keep-all; }
20642081
}
20652082
```
20662083

‎src/css/_type-scale.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@
99
*/
1010

1111
/* For Hero Titles */
12-
.f-6-ns,
12+
.f-6,
1313
.f-headline {
1414
font-size: 6rem;
1515
}
16-
.f-5-ns,
16+
.f-5,
1717
.f-subheadline {
1818
font-size: 5rem;
1919
}

‎src/css/tachyons.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
@import './_white-space';
5252
@import './_vertical-align';
5353
@import './_hovers';
54+
@import './_word-break';
5455
@import './_styles';
5556

5657

‎src/templates/docs/forms/index.html

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,8 @@ <h4 class="f4 mv0 fw6 dib mr4"><%= name %></h4>
4040
<div class="ph3 ph5-ns pt4 pb5">
4141
<h2 class="f3 bold">Examples</h2>
4242
<form>
43-
44-
<code class="f6 db">.input-reset</code>
45-
<input type="text" name="" value="" id="" class="input-reset">
46-
43+
<code class="f6 db">input-reset</code>
44+
<input type="text" class="input-reset">
4745
</form>
4846
<div class="mt5 cf">
4947
<div class="dib mr4">

0 commit comments

Comments
 (0)