Clamp Calc is a tool for generating clamp CSS functions.
This app allows users to specify the minimum and maximum sizes for their elements, as well as the minimum and maximum viewport widths. Using these parameters, the app generates a CSS clamp function that ensures the element scales dynamically with the viewport width.
The clamp() function is a CSS function that allows you to set a value that falls between a minimum and maximum value, and which can change dynamically based on the viewport size. The clamp() function takes three arguments:
`clamp(minimum, preferred, maximum)`
minimum: the smallest value that the output of theclamp()function can be. If the preferred size value is smaller than the minimum size value, then the output will be set to the minimum size value.preferred: the value that will be used if it falls within the range defined by the minimum and maximum size values.maximum: the largest value that the output of theclamp()function can be. If the preferred size value is larger than the maximum size value, then the output will be set to the maximum size value.
The clamp() function returns the preferred value if it is between minimum and maximum.
For example, you can use the clamp() function to set the font-size of an element to a value that changes dynamically based on the viewport width, but that never falls below a set minimum or goes above a set maximum:
`font-size: clamp(1rem, 5.33vw, 3rem);`
In this example, the font size will be 1rem if the viewport width is very small, it will be 5.33vw (5.33% of the viewport width) if the viewport width is between 300px and 900px, and it will be 3rem if the viewport width is greater than 900px. This allows you to create responsive layouts that adjust to different screen sizes and ensure that text remains readable and accessible across different devices.
The CSS clamp function is one of my favorite ways to add responsive sizing. It allows me to specify the size of an element at all possible screen sizes in a single line of CSS.
However, it can be challenging to quickly determine the preferred value. The options are to either make guesses and adjustments, or find and use a calculator or tool online.
The calculations aren't very straightforward and the online tools can be difficult to find and use. This is my attempt at building a simple but effective tool without the distractions of irrelevant information and advertisements.
The formula uses the concept of linear interpolation, which is based on the equation of a straight line, y = mx + b.
y = yAxisIntersection
m = slope
x = minVW
b = minSize
The inputs set the following values:
minSize: minimum size value of element
maxSize: maximum size value of element
minVW: minimum viewport width
maxVW: maximum viewport width
*Note that all values must be of the same unit. For my app, I have converted all values to rem
Here's how the preferred value is calculated in steps:
slope = (maxSize - minSize) / (maxVW - minVW)
yAxisIntersection = -minVW * slope + minSize
preferred = yAxisIntersection rem + (slope * 100)vw
Here's the complete CSS clamp function:
clamp(minSize, preferred, maxSize);
Similar to other projects, the biggest challenge for me personally was finding the right balance between making improvements and getting something complete. In the past I've found myself taking a long time, or never even finishing a project, all in the pursuit of perfection or "one more thing."
So instead for this project, I made an effort to just get everything working before a self-imposed deadline, then focus on making improvements over time.
Challenges specific to this project:
Type related errors
There were a few bugs that I found related to different types. For example, when writing event handlers I learned that event.target.value was of type string when I was expecting an integer. Fixing this was as simple as using event.target.valueAsNumber instead. In the future, I'm planning on implementing TypeScript to gain experience as well as prevent type related errors in the future.
Handling inputs
Forms and inputs can be tricky and there's still some work do be done in order to solve a few bugs. I encountered NaN related errors when any of the inputs were empty, and my quick fix was to use 0 as a value instead of the empty value. This causes some unexpected / undesired behavior, such as moving the cursor or an unnecessary leading 0 in front of numbers.
Decimals and Floats
Some of the math involved involves numbers that produce rounding errors due to the way that JavaScript handles numbers. I addressed these bugs by rounding different values at different steps. This was acceptable to me because the math does not need to be precise to an extreme degree.
Bugs & Improvements
- Improve inputs
- Error handling
- Can't input decimals
- Flash of unstyled content on first load
- Implement TypeScript
Features
- Add ability to change units from
remtopx
Min Size:
Set minimum size of element in rem
Max Size:
Set maximum size of element in rem
Min VW:
Set viewport width that Min Size will be below
Max VW:
Set viewport width that Max Size will be below