Using the CSS Numeric Functions - min, max, calc, clamp, and minmax

  Переглядів 13,988

Steve Griffith - Prof3ssorSt3v3

Steve Griffith - Prof3ssorSt3v3

3 роки тому

CSS actually has several mathematical functions that let you dynamically calculate and update values for any CSS property that uses a numeric value.
Code from video: gist.github.com/prof3ssorSt3v...
MDN reference for CSS functions: developer.mozilla.org/en-US/d...

КОМЕНТАРІ: 39
@KnightToD5
@KnightToD5 4 місяці тому
The Odin Project brought me here. Thanks for your video.
@Alex-nu4cb
@Alex-nu4cb 4 місяці тому
Very well-made video. Thank you. #OdinArmyStayStrong
@RRehanashraf
@RRehanashraf Місяць тому
The odin project brought me here, very well explained sir! keep up the good work
@ayoub7558
@ayoub7558 Місяць тому
me too how are you doing so far
@RRehanashraf
@RRehanashraf Місяць тому
@@ayoub7558 doing good let's do it together?
@DarkReaperK97
@DarkReaperK97 Рік тому
Thank you very much Professor. I had no clue at first how it worked, why it sometimes got big and why it didn't. I do now all thanks to you. Much appreciated!
@timemmanson8350
@timemmanson8350 2 місяці тому
The odin project! Let's keep going!
@mrx-qi8th
@mrx-qi8th 3 роки тому
Very appreciated, i requested for this. Didn't have a hope that my wish may come true. And to all people who's watching this first watch the video width,max-width,min-width from this channel(Steve u might wanna pin it in the description since it has really close meaning to min max) then min max will be very easy. And again tnx steve i realy used ur width video and gonna study calc and minmax() and min in this video
@darkpain4208
@darkpain4208 Рік тому
Mr. Steve, we really can't thank you enough for the the exceptional explanations you provide us. Thanks to you, I have better understanding of min() and max(); really never thought I would understand it. 🖤
@lincolnmutwiri3481
@lincolnmutwiri3481 7 місяців тому
really appreciate this. Thanks 👍
@o.n.edozien2386
@o.n.edozien2386 2 роки тому
Very useful tutorial!
@yinonelbaz5309
@yinonelbaz5309 2 роки тому
the best web dev channel on youtube ! thanks!!!!!
@timothygbadegesin4673
@timothygbadegesin4673 3 місяці тому
Well explained and practically demonstrated. Thanks for sharing your knowledge on this one.
@tsubimekdeinmansubimekdein3898
@tsubimekdeinmansubimekdein3898 11 місяців тому
You are powerful Steven.
@tech_manuel5903
@tech_manuel5903 3 місяці тому
I'm here from the odin project. I'm hoping to make good use of it.
@carbastan6605
@carbastan6605 6 місяців тому
great job! thank you so much!
@KelvinWKiger
@KelvinWKiger 3 роки тому
Thank you ! 🍀
@Smile__007
@Smile__007 9 місяців тому
Nice content 👍🏾
@quangtoanta8577
@quangtoanta8577 2 роки тому
Thanks you!
@abdulaziz7013
@abdulaziz7013 3 роки тому
Great! Thanks
@johnaweiss
@johnaweiss Рік тому
5:39 "Kind of like"? Or exactly like?
@lilyleon1475
@lilyleon1475 2 роки тому
Hello Steve, just watching along with you and right off the bat would like to understand why you select vh for font-sizing and not vw? Is this standard and could vw be used instead, or is this just a no no? I hope you can get to answer me - thanks
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 2 роки тому
You can use either. When calculating font sizes you just have to take into account the form factor of what your user is using - laptop, tablet, phones. They all have different aspect ratios and you need to account for that in your styles. Media queries can be used to get different aspect ratios. This is meant as a basic example, not a finished production ready stylesheet.
@lilyleon1475
@lilyleon1475 2 роки тому
@@SteveGriffith-Prof3ssorSt3v3 Hello Steve, I appreciated the response - thank you! To explain, I came to your channel, looking to find out some more about this method, precisely for the purpose of using it in live projects. I think it's fair to say this is probably the same reason anyone else who visits information channels like yours, although I agree you'd have to be a little bit nuts to implement it right away, after watching just one instructional video. I've also read up about using clamp on the major CSS sites, watched other videos and had never seen Vh used before, which threw me. But it's good to have seen it, so I can evaluate it when I come to test this out in further research. BTW, I also came across a modular typescale using CALC, which is interesting, since it achieves the same end result, without the downside of only 90% browser support. I am just researching it all, before implementing it - I have to assume users will view on the whole spectrum of devices as I have no way of knowing this for sure. Thanks again for the quick response and explanation - Peace!
@engineerchess3698
@engineerchess3698 3 роки тому
great,please can you make tutorial for chrome extension using reactjs
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 роки тому
Please post any tutorial requests in the comments here - ukposts.info/have/v-deo/hHOWrpevaat_lJc.html - for me to track and see people voting on them.
@damo190
@damo190 3 роки тому
Sir, pls make a video on fit-content and fit-content ().
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 роки тому
Please add requests in the comments here - ukposts.info/have/v-deo/hHOWrpevaat_lJc.html - and vote for the ones that are already there.
@c__beck
@c__beck 3 роки тому
When using clamp, the middle variable should always include rem or em to make it accessible. Otherwise users who either change the default font size or zoom won’t be able to adjust the font size to their needs. Regardless of zoom level or font size, 4vh never changes.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 роки тому
Thanks for sharing your note.
@biswabaral949
@biswabaral949 Рік тому
always keep the minumum value less than 300px
@Barister-sv3gj
@Barister-sv3gj 10 місяців тому
why?
@biswabaral949
@biswabaral949 10 місяців тому
@@Barister-sv3gj responsive purposes
@scottonanski4173
@scottonanski4173 16 днів тому
But this doesn't really explain how it works which leaves gaps in the knowledge of the people trying to understand HOW this works. Welp, time to go look for another video.
@ro3843
@ro3843 Рік тому
i have nothing against kevin powell and webdevsimplified (kyle) - they're both great people for sharing so much knowledge --- but really, your videos are the easiest for me to follow and learn from. thanks again for posting all this css goodness
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 Рік тому
Kevin is great. I talk with him from time to time, and we are both Canadian!
@darrenfrancis8126
@darrenfrancis8126 9 місяців тому
same man steve explained this so much better for me
Stop Using Buttons as Links
7:10
Steve Griffith - Prof3ssorSt3v3
Переглядів 7 тис.
How to Use the CSS clamp Method
7:15
Steve Griffith - Prof3ssorSt3v3
Переглядів 18 тис.
Піхотинці - про потребу у людях
00:57
Суспільне Новини
Переглядів 1 млн
CSS Clamp Simplified, with Fluid Responsive Typography Examples
9:19
Deeecode The Web
Переглядів 2,6 тис.
Using CSS custom properties like this is a waste
16:12
Kevin Powell
Переглядів 154 тис.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Переглядів 876 тис.
calc() lets you do some real CSS magic
11:54
Kevin Powell
Переглядів 179 тис.
Getting into Game Programming with C# or C++
6:21
Stefan Mischook
Переглядів 199 тис.
The Difference between JS Expressions and Statements
8:45
Steve Griffith - Prof3ssorSt3v3
Переглядів 5 тис.
Responsive Typography with CSS Clamp
8:37
Tom Is Loading
Переглядів 32 тис.
MinMax in CSS Grid - 3/3 Flexibility
4:37
Layout Land
Переглядів 42 тис.