As someone who does more back-end work in my job, I love learning about this kind of front-end stuff that I don't get to use as often.
Flexbox has been great to work with because it's much easier to control your responsive design. You can choose what lengths stay fixed, which expand and shrink, etc.
When I learned how to use flexbox I went searching for how to add tools to my responsive-design toolbox. I learned about how to use media queries so that different CSS rules are applied based on the width of the page.
Flexbox, grid, and media queries are some of the heavy hitters in responsive design these days, but wanted to know more about effective use of things like CSS functions like calc, min, max, clamp, minmax (grid only) and when to use them. I can find reference material, but I haven't found any good resources that explain when you'd use them instead of something else.
Does anyone have a good resource for responsive design that covers use of CSS functions too? It's no good to have a tool in your toolbox if you don't know you should be using it.
I don’t have a good resource, but min, max, minmax are good if you have a responsive layout where elements change (under a parent container in vh, vw, %) but you also want to have a threshold that is not exceeded. Like min-width or max-width, but as a value instead of the explicit css property, which means you can set properties to equal that value.
Thanks. After reading your explanation it became clearer that the reason you use clamp is because you're using different units (e.g. rem vs %, px vs vw) and varying page dimensions may affect those units differently (e.g. 10% may be larger or smaller than 100px depending on the parent's width).
Here I read the entire MDN article on clamp and it didn't click in my mind until you explained it.
Flexbox has been great to work with because it's much easier to control your responsive design. You can choose what lengths stay fixed, which expand and shrink, etc.
When I learned how to use flexbox I went searching for how to add tools to my responsive-design toolbox. I learned about how to use media queries so that different CSS rules are applied based on the width of the page.
Flexbox, grid, and media queries are some of the heavy hitters in responsive design these days, but wanted to know more about effective use of things like CSS functions like calc, min, max, clamp, minmax (grid only) and when to use them. I can find reference material, but I haven't found any good resources that explain when you'd use them instead of something else.
Does anyone have a good resource for responsive design that covers use of CSS functions too? It's no good to have a tool in your toolbox if you don't know you should be using it.