<body>
<main class='clamp-calculator centered'>
<form class='form-sizes'>
<h1>Clamp Calculator</h1>
<div class='input-field'>
<label for='minViewportWidth'>Miniumum Viewport Width: </label>
<div class='input-size'>
<input type='number' name='minViewportWidth' id='minViewportWidth' value='480'>
<span class='unit'>px</span>
</div>
</div>
<div class='input-field'>
<label for='maxViewportWidth'>Maximum Viewport Width: </label>
<div class='input-size'>
<input type='number' name='maxViewportWidth' id='maxViewportWidth' value='992'>
<span class='unit'>px</span>
</div>
</div>
<div class='input-field'>
<label for='minFontSize'>Miniumum Fontsize: </label>
<div class='input-size'>
<input type='number' name='minFontSize' id='minFontSize' value='1' step='0.1'>
<span class='unit'>rem</span>
</div>
</div>
<div class='input-field'>
<label for='maxFontSize'>Maximum Fontsize: </label>
<div class='input-size'>
<input type='number' name='maxFontSize' id='maxFontSize' value='3' step='0.1'>
<span class='unit'>rem</span>
</div>
</div>
<div class='input-field'>
<label for='pixelsPerRem'>Pixel per Rem: </label>
<div class='input-size'>
<input type='number' name='pixelsPerRem' id='pixelsPerRem' value='16'>
<span class='unit'>px</span>
</div>
</div>
</form>
<section class='clamp-result-box'>
<h2 class='clamp-result'>clamp(1rem, -0.875rem + 8.333vw, 3.5rem);</h2>
<button title='Copy to clipboard' class='copy-to-clipboard'>
<svg xmlns='http://www.w3.org/2000/svg' height='512px' viewBox='-40 0 512 512' width='512px'>
<path
d='m271 512h-191c-44.113281 0-80-35.886719-80-80v-271c0-44.113281 35.886719-80 80-80h191c44.113281 0 80 35.886719 80 80v271c0 44.113281-35.886719 80-80 80zm-191-391c-22.054688 0-40 17.945312-40 40v271c0 22.054688 17.945312 40 40 40h191c22.054688 0 40-17.945312 40-40v-271c0-22.054688-17.945312-40-40-40zm351 261v-302c0-44.113281-35.886719-80-80-80h-222c-11.046875 0-20 8.953125-20 20s8.953125 20 20 20h222c22.054688 0 40 17.945312 40 40v302c0 11.046875 8.953125 20 20 20s20-8.953125 20-20zm0 0'
fill='#FFFFFF'
></path>
</svg>
</button>
</section>
</main>
</body>@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&family=Roboto:wght@300;400;500&family=Work+Sans:wght@300;400;500&display=swap');
/* ------- Reset ------- */
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ------- Reset END ------- */
body {
background-color: DarkSlateGrey;
color: AliceBlue;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
main {
padding: 2rem 0;
min-width: 450px;
}
.centered {
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
font-weight: 300;
font-size: 1.3em;
margin-bottom: 1rem;
}
h2 {
font-weight: 400;
font-size: calc(clamp(0.95rem, 0.525rem + 1.509vw, 1.25rem));
}
form {
width: 100%;
max-width: 600px;
text-align: center;
legend {
width: 100%;
font-size: 1.15em;
line-height: 3.5em;
}
.input-field {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
column-gap: 1rem;
margin-bottom: 1rem;
.input-size {
text-align: left;
}
input {
padding: .25rem .5rem;
width: 120px;
font-weight: 400;
}
label {
text-align: right;
}
.unit {
padding-left: 10px;
}
}
}
section {
text-align: center;
&.clamp-result-box {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 1rem 0;
outline: 1px dashed gray;
button {
background: transparent;
border: none;
cursor: pointer;
margin-left: 1rem;
}
.copy-to-clipboard svg {
width: 32px;
height: 32px;
}
}
}// Vanilla JS re-write of Pedro Rodriguez's clamp calculator
// https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
window.addEventListener('DOMContentLoaded', (event) => {
const clampTemplate = (minFontSize, maxFontSize, yIntersection, slope) => (`
clamp(${minFontSize}rem, ${yIntersection}rem + ${slope}vw, ${maxFontSize}rem);
`)
const calculateClamp = function ([
minViewportWidth,
maxViewportWidth,
minFontSize,
maxFontSize,
pixelsPerRem
]) {
const minWidth = minViewportWidth / pixelsPerRem
const maxWidth = maxViewportWidth / pixelsPerRem
const slope = (maxFontSize - minFontSize) / (maxWidth - minWidth)
const yAxisIntersection = (-minWidth * slope + minFontSize).toFixed(3)
return clampTemplate(minFontSize, maxFontSize, yAxisIntersection, (slope * 100).toFixed(3))
}
const formHandler = function ({ target, currentTarget: { elements } }) {
if (!target.matches('input')) return
// Note: inputSizes are mapped from form elements and are dependant
// on a fixed order of HTML inputs for destructuring in calculateClamp e.g.
// 0: minView.. 1: maxView.. 2: minFont.. 3: maxFont.. 4: pixelsPerRem
const inputSizes = [...elements].map(({ value }) => Number(value))
clampResult.textContent = calculateClamp(inputSizes)
}
const form = document.forms[0]
const copyToClipboard = document.querySelector('.copy-to-clipboard')
const clampResult = document.querySelector('.clamp-result')
form.addEventListener('keyup', formHandler)
form.addEventListener('change', formHandler)
copyToClipboard.addEventListener('click', () => {
navigator.clipboard.writeText(clampResult.textContent.trim())
})
})
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.