-
Notifications
You must be signed in to change notification settings - Fork 46
/
Typography.vue
83 lines (83 loc) · 3.4 KB
/
Typography.vue
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
<template>
<section :class="$style.component">
<h1 id="typography">Typography</h1>
<h3>Typography and scale are the foundations your designs are built on.</h3>
<div :class="$style.hotips">
<p :class="$style.tip">
<span class="quoted">Make it easy to read.</span>
<a href="https://www.fastcompany.com/32656/web-sites-work" class="href">Roger Black</a>
</p>
<div :class="$style.tipcontent">
Please consider heeding Black's 6 rules for web design:
<ul :class="$style.ul">
<li :class="$style.li">Bigger is better</li>
<li :class="$style.li">Color your world — sparingly</li>
<li :class="$style.li">Faster beats fancier</li>
<li :class="$style.li">Content is king</li>
<li :class="$style.li">Small bytes go down easier</li>
<li :class="$style.li">If you don’t have something good to say, don’t say anything</li>
</ul>
<h5 :class="$style.customize">Customize & Theme</h5>
<p>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS custom properties</a>
are an underutilized tool for web designers and developers alike. They allow us to define and use
<span class="quoted">variables</span> that can be shared across our app. But, even more powerfully, they
provide a built-in fallback system which allows us to replace default values with our own.
This makes theming easy!
</p>
<p>
For example, AgnosticUI uses a system font stack by default, but you
may want to instead use your own. This can be achieved by simply defining
the custom css property for font family. Under the hood, AgnosticUI will do:
<pre class="inline-code">var(--agnosticui-font-family, var(--agnosticui-default-font-family));</pre>
Essentially, the left variable will be used if defined, otherwise it will fallback to
default one. All override variables in AgnosticUI are defined using this same naming
convention where the override variable is the same with the <i>--default</i> removed.
</p>
</div>
</div>
<pre v-highlightjs><code class="css">
/**
* These are only meant to be minimal point of departure to work from. You're encouraged
* to customize your font stack and sizes to whatever suits you.
*/
:root {
--agnostic-default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Ubuntu", "Fira Sans", Helvetica, "Droid Sans", "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--agnostic-default-h1: 64px;
--agnostic-default-h2: 48px;
--agnostic-default-h3: 36px;
--agnostic-default-h4: 24px;
--agnostic-default-h5: 18px;
--agnostic-default-h6: 14px;
--agnostic-default-body: 16px;
--agnosticui-default-font-weight-bold: 600;
--agnosticui-default-font-weight-light: 300;
}
</code></pre>
</section>
</template>
<style module>
.component {
composes: component from "./partials.module.css";
}
.hotips {
composes: hotips from "./partials.module.css";
}
.tipcontent {
composes: tipcontent from "./partials.module.css";
}
.ul {
margin-top: var(--Space-16);
}
.li {
list-style-type: circle;
margin-left: var(--Space-40);
}
.tip {
composes: tip from "./partials.module.css";
}
.customize {
margin-top: var(--Space-56);
margin-bottom: var(--Space-8);
}
</style>