Skip to content

Code examples created for Variable Fonts Guide #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Aug 28, 2018
Merged

Code examples created for Variable Fonts Guide #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8b476b7
Adding variable font demos
jpamental Aug 10, 2018
7476fdf
Lots of updates, add new VF for italics, add grade
jpamental Aug 27, 2018
a3b2cf1
Add example pages
jpamental Aug 27, 2018
d23fc2f
Update sample page
jpamental Aug 27, 2018
a06458c
Add hover effect
jpamental Aug 27, 2018
80e92f8
Remove RobotoDelta
jpamental Aug 27, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added variable-fonts/fonts/Amstelvar-Italic-VF.woff2
View file
Open in desktop
Binary file not shown.
Binary file added variable-fonts/fonts/Amstelvar-Roman-VF.woff2
View file
Open in desktop
Binary file not shown.
Binary file added variable-fonts/fonts/AmstelvarAlpha-VF.woff2
View file
Open in desktop
Binary file not shown.
Binary file added variable-fonts/fonts/Roboto-VF.woff2
View file
Open in desktop
Binary file not shown.
Binary file added variable-fonts/fonts/jost-VF.woff2
View file
Open in desktop
Binary file not shown.
208 changes: 208 additions & 0 deletions variable-fonts/grade.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,208 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Variable Font example - grade</title>

<style>
@font-face {
font-family: 'Amstelvar VF';
src: url('fonts/AmstelvarAlpha-VF.woff2') format('woff2');
font-weight: 100 900;
font-stretch: 75 100;
font-style: normal;
font-display: swap;
}

html {
box-sizing: border-box;
font-size: 100%;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

body {
font: 1.2em "Amstelvar VF", Georgia, serif;
margin: 20px;
padding: 0;
}

.wrapper {
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fill,minmax(28rem,1fr));
grid-gap: 2rem;
}

textarea {
font-family: monospace;
display: block;
margin-bottom: 10px;
height: 160px;
background-color: #F4F7F8;
border: none;
border-left: 6px solid #558ABB;
color: #4D4E53;
padding: 1rem 0;
width: 100%;
}

textarea:nth-of-type(1) {
height: 130px;
}

textarea:nth-of-type(2) {
height: 100px;
}

.playable-buttons {
text-align: right;
width: 100%;
padding: 0.5rem 0;
font-size: 100%;
}

.section {
width: 100%;
border: 1px solid #4D4E53;
border-radius: 2px;
padding: 10px 14px 10px 10px;
margin-bottom: 10px;
}

.section input {
display: block;
margin: 5px;
}

.container * {
margin: 1.5rem 0;
}

.demo2 {
--text-axis: 88;
}
</style>
<style class="editable1">
/* grade range is 88 to 150 */
.container1 * {
font-size: 64px;
font-variation-settings: 'GRAD' 88;
}
</style>
<style class="editable2">
/* Adjusted with slider and custom property */
.container2 * {
font-size: 64px;
font-variation-settings: 'GRAD' var(--text-axis);
}
</style>
</head>

<body>
<div class="wrapper">
<div class="demo1">
<section class="section section1">
<div class="container container1">
<p>Grade</p>
</div>
</section>
<textarea class="playable-css1">
/* grade (GRAD) range is 88 (default) up to 150 */
.container1 * {
font-size: 64px;
font-variation-settings: 'GRAD' 88;
}
</textarea>
<textarea id="code1" class="playable-html1">
<div class="container container1">
<p>Grade</p>
</div>
</textarea>
</div>
<div class="demo2">
<section class="section section2">
<div class="container container2">
<p>Grade</p>
</div>
</section>
<textarea class="playable-css2">
/* Adjusted with slider and custom property */
.container2 * {
font-size: 64px;
font-variation-settings: 'GRAD' var(--text-axis);
}
</textarea>
<textarea id="code2" class="playable-html2">
<div class="container container2">
<p>Grade</p>
</div>
</textarea>
<div class="controls range-slider">
<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">
</div>
</div>
</div>
<div class="playable-buttons">
<input id="reset" type="button" value="Reset">
</div>
</body>
<script>
var section1 = document.querySelector('.section1');
var editable1 = document.querySelector('.editable1');
var textareaHTML1 = document.querySelector('.playable-html1');
var textareaCSS1 = document.querySelector('.playable-css1');
var section2 = document.querySelector('.section2');
var editable2 = document.querySelector('.editable2');
var textareaHTML2 = document.querySelector('.playable-html2');
var textareaCSS2 = document.querySelector('.playable-css2');
var rangeinput = document.querySelector('.controls--slider');
var reset = document.getElementById('reset');
var htmlCode1 = textareaHTML1.value;
var cssCode1 = textareaCSS1.value;
var htmlCode2 = textareaHTML2.value;
var cssCode2 = textareaCSS2.value;
var rangeValue = rangeinput.value;

function fillCode() {
editable1.innerHTML = textareaCSS1.value;
section1.innerHTML = textareaHTML1.value;
editable2.innerHTML = textareaCSS2.value;
section2.innerHTML = textareaHTML2.value;
rangeinput.value = 88;
document.querySelector('.demo2').style.setProperty('--text-axis', 88);
}

reset.addEventListener('click', function () {
textareaHTML1.value = htmlCode1;
textareaCSS1.value = cssCode1;
textareaHTML2.value = htmlCode2;
textareaCSS2.value = cssCode2;
fillCode();
});

textareaHTML1.addEventListener('input', fillCode);
textareaCSS1.addEventListener('input', fillCode);
textareaHTML2.addEventListener('input', fillCode);
textareaCSS2.addEventListener('input', fillCode);
window.addEventListener('load', fillCode);

// get the inputs
const inputs = [].slice.call(document.querySelectorAll('.demo2 .controls input'));

// listen for changes
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));

function handleUpdate(e) {
document.querySelector('.demo2').style.setProperty(`--${this.id}`, this.value);
}

</script>

</html>
Loading