1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
|
extends ../_layout/_docs-layout.pug
block variables
- var slug = 'typography'
- var parent = 'elements'
- var title = 'Typography - Elements - Spectre.css CSS Framework'
- var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
block docs-content
+docs-heading('typography', 'Typography')
include ../_layout/_ad-g.pug
p
| Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.
+docs-subheading('typography-headings', 'Headings')
.docs-demo.columns
.column.col-12
h1
| H1 Heading
small.label 40px
.column.col-12
h2
| H2 Heading
small.label 32px
.column.col-12
h3
| H3 Heading
small.label 28px
.column.col-12
h4
| H4 Heading
small.label 24px
.column.col-12
h5
| H5 Heading
small.label 20px
.column.col-12
h6
| H6 Heading
small.label 16px
//- headings
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<h1>H1 Heading</h1>
<h1>H1 Heading <small class="label">40px</small></h1>
<span class="h1">H1 Heading</span>
+docs-subheading('typography-paragraphs', 'Paragraphs')
p
| Lorem ipsum dolor sit amet, consectetur #[a(href='#typography') adipiscing elit].
| Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.
p
| Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.
//- paragraphs
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<p>Lorem ipsum dolor sit amet, ...</p>
<p>...</p>
+docs-subheading('typography-semantic-text', 'Semantic text elements')
.docs-demo.columns
.column.col-6.col-xs-12
abbr(title='Internationalization') I18N
code.ml-2 abbr
.column.col-6.col-xs-12
strong Bold
code.ml-2 strong
code.ml-2 b
.column.col-6.col-xs-12
cite Citation
code.ml-2 cite
.column.col-6.col-xs-12
code Hello World!
code.ml-2 code
.column.col-6.col-xs-12
del Deleted
code.ml-2 del
.column.col-6.col-xs-12
em Emphasis
code.ml-2 em
.column.col-6.col-xs-12
i Italic
code.ml-2 i
.column.col-6.col-xs-12
ins Inserted
code.ml-2 ins
.column.col-6.col-xs-12
kbd Ctrl + S
code.ml-2 kbd
.column.col-6.col-xs-12
mark Highlighted
code.ml-2 mark
.column.col-6.col-xs-12
ruby
| 漢
rt kan
| 字
rt ji
code.ml-2 ruby
.column.col-6.col-xs-12
s Strikethrough
code.ml-2 s
.column.col-6.col-xs-12
samp Sample
code.ml-2 samp
.column.col-6.col-xs-12
| Text
sub Subscripted
code.ml-2 sub
.column.col-6.col-xs-12
| Text
sup Superscripted
code.ml-2 sup
.column.col-6.col-xs-12
time 20:00
code.ml-2 time
.column.col-6.col-xs-12
u Underline
code.ml-2 u
.column.col-6.col-xs-12
var x
| =
var y
| + 2
code.ml-2 var
+docs-subheading('typography-east-asian', 'Optimized for East Asian fonts')
.docs-demo.columns
.column
p.h5
| #[small.lang-zh-hans 你好], #[small.lang-ja こんにちは], #[small.lang-ko 안녕하세요]
p.h6 Chinese (Simplified)
p.lang-zh-hans 革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。
p.h6 Chinese (Tranditional)
p.lang-zh-hant
| 山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」
p.h6 Japanese
p.lang-ja
| 祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。
p.h6 Korean
p.lang-ko
| 나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.
p
| Add the #[code lang] attribute to the #{'<html>'} element or use the class #[code lang-zh], #[code lang-zh-hans], #[code lang-zh-hant], #[code lang-ja] or #[code lang-ko] to have better Asian CJK (Chinese, Japanese and Korean) font support.
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<html lang="zh-Hans">……</html>
<p class="lang-zh-hans">革命不是请客吃饭，不是做文章……</p>
<p class="lang-ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
<p class="lang-ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
p
| And you can use the #[code lang-cjk] class or the #[code lang] attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.
.docs-demo.columns
.column
p(lang='ja').
<u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。
p(lang='ja').
<del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<p class="lang-cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
<p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
+docs-subheading('typography-fonts', 'Fonts')
p
| Spectre sets the most common and best #[code font-family] for each OS with fallback support in old systems.
| There are also fonts targeted East Asian typography.
pre.code
code
:highlight(lang="scss")
/* Western typography targeted */
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
/* Monospace typography targeted */
font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
/* Chinese (lang="zh" and lang="zh-Hans") targeted */
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
/* Chinese (lang="zh-Hant") targeted */
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
/* Japanese (lang="ja") targeted */
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
/* Korean (lang="ko") targeted */
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
+docs-subheading('typography-blockquote', 'Blockquote')
blockquote
p
| The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.
cite - Bill Gates
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<blockquote>
<p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
<cite>- Bill Gates</cite>
</blockquote>
+docs-subheading('typography-lists', 'Lists')
.docs-demo.columns
.column.col-4.col-xs-12
ul.list
li list item 1
li
| list item 2
ul
li list item 2.1
li list item 2.2
li list item 2.3
li list item 3
.column.col-4.col-xs-12
ol.list
li list item 1
li
| list item 2
ol
li list item 2.1
li list item 2.2
li list item 2.3
li list item 3
.column.col-4.col-xs-12
dl.list
dt description list term 1
dd description list description 1
dt description list term 2
dd description list description 2
dt description list term 3
dd description list description 3
pre.code(data-lang='HTML')
code
:highlight(lang="html")
<!-- unordered list -->
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2.1</li>
<li>list item 2.2</li>
<li>list item 2.3</li>
</ul>
</li>
<li>list item 3</li>
</ul>
<!-- description list -->
<dl>
<dt>description list term</dt>
<dd>description list description</dd>
</dl>
include ../_layout/_ad-c.pug
include ../_layout/_footer.pug
|
