-
Notifications
You must be signed in to change notification settings - Fork 46
/
Typography.vue
126 lines (123 loc) · 4.48 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
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
<template>
<section :class="$style.component">
<FlexGrid tagName="section">
<FlexRow v-bind:gutter="16">
<FlexCol v-bind:xs="12">
<h1 id="typography">Typography</h1>
</FlexCol>
</FlexRow>
<FlexRow v-bind:gutter="16">
<FlexCol v-bind:xs="12">
<h3>Typography and scale are the foundations your designs are built on.</h3>
</FlexCol>
</FlexRow>
<FlexRow v-bind:gutter="16">
<FlexCol v-bind:xs="12" auto>
<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">Using CSS Custom to 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:
</p>
<pre class="inline-code">
var(--agnosticui-font-family,
var(--agnosticui-default-font-family));</pre>
<p>
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 you simply remove the
<i>--default</i>.
</p>
</div>
</div>
</FlexCol>
</FlexRow>
<FlexRow v-bind:gutter="16">
<FlexCol v-bind:xs="12" auto>
<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 {
--agnosticui-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";
--agnosticui-default-h1: 64px;
--agnosticui-default-h2: 48px;
--agnosticui-default-h3: 36px;
--agnosticui-default-h4: 24px;
--agnosticui-default-h5: 18px;
--agnosticui-default-h6: 14px;
--agnosticui-default-body: 16px;
--agnosticui-default-font-weight-bold: 600;
--agnosticui-default-font-weight-light: 300;
}
</code></pre>
</FlexCol>
</FlexRow>
</FlexGrid>
</section>
</template>
<script>
import FlexGrid from "agnosticui/FlexGrid/FlexGrid";
import FlexRow from "agnosticui/FlexGrid/FlexRow";
import FlexCol from "agnosticui/FlexGrid/FlexCol";
export default {
name: "Typography",
components: {
FlexCol,
FlexGrid,
FlexRow,
},
};
</script>
<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>