Is CSS Mathematics a new approach to responsive design?
Recently, CSS has been enriched with new mathematical functions. At first glance, these functions seem like a simple new way to define styles, but it's not that simple. Perhaps these new features will help us change the established approach to responsive design!
0:00 Prologue
0:35 Remembering a CSS veteran: the calc() function
04:51 Meet the min() function
06:33 Meet the max() function
07:19 min() and max() in practice
10:57 The icing on the cake: clamp()
14:20 What's the true value of these new functions?
15:32 Browser Support
16:00 Summary
______________________________
One of my favorite Frontend channels on Telegram:
https://t.me/frontendnoteschannel
______________________________
Taiga UI
https://taiga-ui.dev/grid
https://github.com/TinkoffCreditSyste...
_______________________________
calc() Examples
1) Vertical Alignment
https://codepen.io/Trebushnoi/pen/Jjy...
2) Grid knee
https://codepen.io/Trebushnoi/pen/dyz...
min(), max() examples
1) Vertical margins
https://codepen.io/Trebushnoi/pen/ZEJ...
2) General link styles
https://codepen.io/Trebushnoi/pen/gOx...
3) Background image
https://codepen.io/Trebushnoi/pen/LYj...
clamp() examples
1) Adaptive card
https://codepen.io/Trebushnoi/pen/Exv...
2) Adaptive grid
https://codepen.io/Trebushnoi/pen/dyz...
3) Adaptive Frame
https://codepen.io/Trebushnoi/pen/GRv...
_____________________
For the video, I used materials from these articles:
1) https://moderncss.dev/practical-uses-...
2) https://ishadeed.com/article/css-min-...
3) https://web.dev/min-max-clamp/
Thanks to the authors, even though they will never watch these videos due to the language barrier.
#css #html #frontend