Skip to content

Commit 8339e40

Browse files
chrisdavidmillschrisdavidmills
authored
Merge pull request mdn#4 from jpamental/master
Code examples created for Variable Fonts Guide
2 parents 3e969ab + 80e92f8 commit 8339e40

12 files changed

+1807
-0
lines changed

‎variable-fonts/fonts/Amstelvar-Italic-VF.woff2

54.6 KB
Binary file not shown.

‎variable-fonts/fonts/Amstelvar-Roman-VF.woff2

215 KB
Binary file not shown.

‎variable-fonts/fonts/AmstelvarAlpha-VF.woff2

74.9 KB
Binary file not shown.

‎variable-fonts/fonts/Roboto-VF.woff2

1.41 MB
Binary file not shown.

‎variable-fonts/fonts/jost-VF.woff2

138 KB
Binary file not shown.

‎variable-fonts/grade.html

Lines changed: 208 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,208 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Variable Font example - grade</title>
7+
8+
<style>
9+
@font-face {
10+
font-family: 'Amstelvar VF';
11+
src: url('fonts/AmstelvarAlpha-VF.woff2') format('woff2');
12+
font-weight: 100 900;
13+
font-stretch: 75 100;
14+
font-style: normal;
15+
font-display: swap;
16+
}
17+
18+
html {
19+
box-sizing: border-box;
20+
font-size: 100%;
21+
}
22+
23+
*,
24+
*::before,
25+
*::after {
26+
box-sizing: inherit;
27+
}
28+
29+
body {
30+
font: 1.2em "Amstelvar VF", Georgia, serif;
31+
margin: 20px;
32+
padding: 0;
33+
}
34+
35+
.wrapper {
36+
width: 100%;
37+
display: grid;
38+
grid-template-columns: repeat(auto-fill,minmax(28rem,1fr));
39+
grid-gap: 2rem;
40+
}
41+
42+
textarea {
43+
font-family: monospace;
44+
display: block;
45+
margin-bottom: 10px;
46+
height: 160px;
47+
background-color: #F4F7F8;
48+
border: none;
49+
border-left: 6px solid #558ABB;
50+
color: #4D4E53;
51+
padding: 1rem 0;
52+
width: 100%;
53+
}
54+
55+
textarea:nth-of-type(1) {
56+
height: 130px;
57+
}
58+
59+
textarea:nth-of-type(2) {
60+
height: 100px;
61+
}
62+
63+
.playable-buttons {
64+
text-align: right;
65+
width: 100%;
66+
padding: 0.5rem 0;
67+
font-size: 100%;
68+
}
69+
70+
.section {
71+
width: 100%;
72+
border: 1px solid #4D4E53;
73+
border-radius: 2px;
74+
padding: 10px 14px 10px 10px;
75+
margin-bottom: 10px;
76+
}
77+
78+
.section input {
79+
display: block;
80+
margin: 5px;
81+
}
82+
83+
.container * {
84+
margin: 1.5rem 0;
85+
}
86+
87+
.demo2 {
88+
--text-axis: 88;
89+
}
90+
</style>
91+
<style class="editable1">
92+
/* grade range is 88 to 150 */
93+
.container1 * {
94+
font-size: 64px;
95+
font-variation-settings: 'GRAD' 88;
96+
}
97+
</style>
98+
<style class="editable2">
99+
/* Adjusted with slider and custom property */
100+
.container2 * {
101+
font-size: 64px;
102+
font-variation-settings: 'GRAD' var(--text-axis);
103+
}
104+
</style>
105+
</head>
106+
107+
<body>
108+
<div class="wrapper">
109+
<div class="demo1">
110+
<section class="section section1">
111+
<div class="container container1">
112+
<p>Grade</p>
113+
</div>
114+
</section>
115+
<textarea class="playable-css1">
116+
/* grade (GRAD) range is 88 (default) up to 150 */
117+
.container1 * {
118+
font-size: 64px;
119+
font-variation-settings: 'GRAD' 88;
120+
}
121+
</textarea>
122+
<textarea id="code1" class="playable-html1">
123+
<div class="container container1">
124+
<p>Grade</p>
125+
</div>
126+
</textarea>
127+
</div>
128+
<div class="demo2">
129+
<section class="section section2">
130+
<div class="container container2">
131+
<p>Grade</p>
132+
</div>
133+
</section>
134+
<textarea class="playable-css2">
135+
/* Adjusted with slider and custom property */
136+
.container2 * {
137+
font-size: 64px;
138+
font-variation-settings: 'GRAD' var(--text-axis);
139+
}
140+
</textarea>
141+
<textarea id="code2" class="playable-html2">
142+
<div class="container container2">
143+
<p>Grade</p>
144+
</div>
145+
</textarea>
146+
<div class="controls range-slider">
147+
<label for="controls__slider">Adjust Grade: </label><input type="range" name="range-slider" value="88" id="text-axis" class="controls--slider" min="88" max="150">
148+
</div>
149+
</div>
150+
</div>
151+
<div class="playable-buttons">
152+
<input id="reset" type="button" value="Reset">
153+
</div>
154+
</body>
155+
<script>
156+
var section1 = document.querySelector('.section1');
157+
var editable1 = document.querySelector('.editable1');
158+
var textareaHTML1 = document.querySelector('.playable-html1');
159+
var textareaCSS1 = document.querySelector('.playable-css1');
160+
var section2 = document.querySelector('.section2');
161+
var editable2 = document.querySelector('.editable2');
162+
var textareaHTML2 = document.querySelector('.playable-html2');
163+
var textareaCSS2 = document.querySelector('.playable-css2');
164+
var rangeinput = document.querySelector('.controls--slider');
165+
var reset = document.getElementById('reset');
166+
var htmlCode1 = textareaHTML1.value;
167+
var cssCode1 = textareaCSS1.value;
168+
var htmlCode2 = textareaHTML2.value;
169+
var cssCode2 = textareaCSS2.value;
170+
var rangeValue = rangeinput.value;
171+
172+
function fillCode() {
173+
editable1.innerHTML = textareaCSS1.value;
174+
section1.innerHTML = textareaHTML1.value;
175+
editable2.innerHTML = textareaCSS2.value;
176+
section2.innerHTML = textareaHTML2.value;
177+
rangeinput.value = 88;
178+
document.querySelector('.demo2').style.setProperty('--text-axis', 88);
179+
}
180+
181+
reset.addEventListener('click', function () {
182+
textareaHTML1.value = htmlCode1;
183+
textareaCSS1.value = cssCode1;
184+
textareaHTML2.value = htmlCode2;
185+
textareaCSS2.value = cssCode2;
186+
fillCode();
187+
});
188+
189+
textareaHTML1.addEventListener('input', fillCode);
190+
textareaCSS1.addEventListener('input', fillCode);
191+
textareaHTML2.addEventListener('input', fillCode);
192+
textareaCSS2.addEventListener('input', fillCode);
193+
window.addEventListener('load', fillCode);
194+
195+
// get the inputs
196+
const inputs = [].slice.call(document.querySelectorAll('.demo2 .controls input'));
197+
198+
// listen for changes
199+
inputs.forEach(input => input.addEventListener('change', handleUpdate));
200+
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
201+
202+
function handleUpdate(e) {
203+
document.querySelector('.demo2').style.setProperty(`--${this.id}`, this.value);
204+
}
205+
206+
</script>
207+
208+
</html>

0 commit comments

Comments
 (0)