This repository contains JavaScript functions to implement CSS clamp functionality. It dynamically adjusts the font size of elements based on specified minimum, preferred, and maximum values.
This function takes an HTML element as a parameter and applies the clamp functionality to it.
- Retrieves the
data-clamp
attribute value from the element. - Validates the number of values in the
data-clamp
attribute. - Trims and assigns the values of
min
,preferred
, andmax
from thedata-clamp
attribute. - Calculates the viewport width (
vw
) and viewport height (vh
). - Retrieves the root font size of the document.
- Converts the
min
,preferred
, andmax
values to pixels. - Returns the clamped font size.
This function applies the clamp functionality to all elements with the data-clamp
attribute.
- Selects all elements with the
data-clamp
attribute. - Iterates over the selected elements.
- Calls
cssClamp()
for each element and assigns the returned clamped font size.
Call applyClamp()
to apply the clamp functionality when the page loads.
Add an event listener to the window object for the resize event to call applyClamp()
whenever the window is resized.