Это видео недоступно.
Сожалеем об этом.
PB101: L06 - Fluid Responsive Development With Math Functions (clamp, min, max, calc)
HTML-код
- Опубликовано: 15 авг 2024
- LINK TO CLAMP CALCULATOR: geary.co/clamp...
(I decided to build a clamp() calculator that's easier to use than the one I showed in the training).
Congrats on making it through the previous lesson! I know that was quite tedious.
The good news is, we know you're not a quitter! And today, you get rewarded for that.
In this lesson, you will learn how to work smarter, not harder. This is an introduction to fluid responsive development - techniques that you're going to use over and over again through the websites you build.
We'll take a look at clamp(), min(), max(), and calc() as well as practical use cases such as fluid responsive spacing, fluid responsive typography, and more.
This is the ultimate anti-chump training material, so absorb it like a sponge. In the next lesson, you'll learn how to tokenize all this, which is absolute GRAVY.
I know we haven't built much yet in the way of an actual website. That's because these concepts are required for the initial development setup. If you start building before you know the concepts in these early lessons, you must undo everything and take two steps back.
Ain't nobody got time for that, so let's crush these initial concepts, and then we can get to building!
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner...
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **
0:00 Intro
02:20 Clamp
4:00 Clamp for Section Padding
15:18 Clamp for Typography
25:12 Min & Max
33:38 Calc
39:07 Real-World Use of Calc
The clamp() calculator I used in this training is overly complicated, so I built a new one for you. You can use it here: geary.co/clamp-calculator/
Love this.
I noticed that the output between the original and yours version is different. Mind saying why is that? What are the changes? My curious brain would appreciate it!
@@wittywolk There are different ways to calculate the middle value. My calculator uses the same method used in Automatic.css and removes the redundant calc() inside the other calculator's output. I think the other calculator used a bit of an older method.
This is 🔥
@FBA C[r]ASH Course That's why AutomaticCSS includes it. People didn't want it in the raw clamp outputs for normal CSS use. If you're using ACSS, you don't need a clamp calculator.
On behalf of the entire web design community, I'd like to express our appreciation for creating these enlightening tutorials. It's clear that numerous aspiring web designers can greatly benefit from this content, even those who may not be aware of their knowledge gaps (WHICH THERE ARE MANY). Although the series currently covers very basic concepts, these foundational skills are essential for anyone aiming to deliver professional websites to clients.
I have assigned a newbie team member to watch each video, followed by a quiz-devised by one of our managers-to evaluate their comprehension. We eagerly await a more ADVANCED COURSE from you in the future (we'd happily pay for it), which would significantly contribute to the training of our more experienced power users.
P.S. I wholeheartedly concur that you stand out as one of the ONLY RUclips creators providing the essential education needed for one to confidently identify as a "web developer/designer." 👏
Why my brain has to blow out in every single vidoe of this series! 🤯
I don't have enough words to thank you mister. ❤❤
Kevin is doing you a HUGE solid here. This is the basis of truly professional web design in modern browsers. I still can't believe this course is free ... anyone else (me included) would charge hundreds, if not thousands, of dollars for the YEARS of experience distilled into these lessons.
I'm watching every video for 2 to 3 times, and I've learned more than I thought.
You're amazing ❤️❤️❤️❤️
I'm so glad!
Kevin is the best teacher for scalable and maintainable web design and development. These trainings are gold! Also, love the speed at which you are releasing them 🙂.
And Kevin is a diamond 💎
respect is definitely earned. this guy drops straight RAW info. This is some mad premium high-quality videos for FREE. love it
I'm not used to commenting much on RUclips but this disserves comment. Thanks for this, Kevin. Not many people are sharing this information for free. And the way you're doing it, it's pure gold. At least give us a "Buy me a coffe/bear" link. Can't wait for other videos.
Absolutely love your content Kevin, and your energy! You're helping me get up to date after a long time out of the industry. Thank you 🙏
First you give us the tools (ACSS and Frames) and than you teach us the science behind your tools. This is amazing, I feel empowered to tell our clients more about the basis of our webdesign work now.
Fantastic lesson, again. I will need to revisit this one a few more times. Thanks for making this free for us. We appreciate you.
Kevin, stop apologizing. Please. 😀People who have been following you for a while know you are knowledgeable, are passionate about things you want to share, and perhaps a bit 'overenthusiastic'.
Okay, so the new viewers either focus on the brilliant content chock-full of value, or get turned off by your on-screen delivery. You can't please everyone. Just keep on sharing and advising and enough apologizing. You are eating up valuable time and bandwidth. 😂
Before this video I was a chump. I knew there had to be a better way! But I didn't know what I didn't know! Thank you!
Man, that min max explanation was genius 🤩. I am so lucky I found you 😊.
I thought that I would have to design every breakpoint until you showed us the previous lesson. Here is another brilliant lesson. Thank you and I love your enthusiasm, your desire to teach and love of web design.
Not only are you a great teacher, but you also have such good humor! "What are the chumps, what does their life look like" 😂 LOL!
Believe it or not, some people get offended. Thanks for having a sense of humor.
This dude is the best, seriously. I couldn't find any other area that explained responsiveness this well. Well done!
Love that "straight to the face" style of teaching.
Watching your videos is like watching "Breaking Bad" full season in one day, just can't stop. Good stuff!
🙌
I cannot believe how much (and how quickly) this course is elevating my approach to web design. It is a challenge to resist the urge to pause the videos to go monkey around with each new thing I learn. I have to be patient and watch to the end of each video so I get the full context of what is being taught. And I appreciate how logically each topic is arranged and covered.
Thanks Kevin for explaining these valuable but 'hard to understand' concepts in a simpler language. I know you call it a page builder course but to me it's "Fundamental CSS concepts and best practices for responsive design" course and it's super valuable.
wow 😲, this clamp lesson was extremely enlightening! I'm so happy I decided to slow down and go through this course thoroughly by practicing each topic and re-watching to get it nailed into my soon to be formally chump brain. I can't thank you enough for reforming me Kevin so I'm joining your Inner Circle as a small token of "thanks" - got to get your ACSS soon too!
Great job doing the hard work 💪🏻
If this was a paid course, I'll buy it twice and watch it twice. And make a donation!
Thank so much for creating this clamp calculator, so easy to use! Best one!
This is amazing! Kevin, you're freakin' awesome. You're teaching web development from the ground up in a way that's easy to understand. This video course shouldn't be free, but I ain't gonna lie, I ain't sharing this with nobody! Just kidding, man😅😅. Seriously though, this is some incredibly valuable content. Two big thumbs up!👍👍
I'm watching all the videos for a 2nd time now, and I'm learning more each time (as stuff is sinking into my brain). Thank you for a great video series!
You're very welcome!
This video literaly changed everything for me.I can not say thank you enough!
Kevin I have really been enjoying these videos, thank you! Bless you and your family, you are a blessing to all of us! Shawn taggart
Glad you like them!
Thank you, Kevin for all the info. The things you say are absolutely unique on a free youtube channel. That's what makes you really special.
Thank you
🎉
Thank you for pushing your course so fast. Love to see the lessons, even more so fast one after the after. And already great value...
Absolutely love this series! Can't wait for a full lesson on grid. Especially when it comes to responsiveness and max columns with gaps in mind. More fire hoses pls
Kevin, I'm getting a lot of value from this series and can't wait for the next lessons. While I wish I could binge watch all of them right now, taking these lessons in short digestible segments is very valuable. I'm gaining a much better appreciation of the power of ACSS by watching the lessons so far. I've got a few sites that I need/want to rebuild but want to finish the 101 course so I'm not in "chumpville" as much. Thanks again for great content and an enjoyable learning experience.
🙏
This content is pure gold - so thankful for ACSS in my workflow.😊
Man you're funny as hell. Thank you for making this course entertaining as well as super valuable!
🙏
Feel like I've gone from firehose to the face to being waterboarded. But I am grateful for the lessons that Kevin is teaching here. We're getting out of Chumpville!
Thank you again for an excellent lesson, and for the series. The series is very well thought out and does a great job introducing concepts and techniques, and then building upon those techniques.
That is absolutely awesome! Thank you a lot Kevin for that course full breathtaking information.👏
Another great tutorial. Deconstruction of a lot of incomprehensible stuff. Thanks a lot
I just wanted to say that your course is awesome, thank you!
Glad you enjoy it!
Kevin don't tell them our secrets...class is the maximum they should know.
What a banger of a video. Practice will make this second nature. Glad to be learning even with a firehose hitting me. Sometimes you just need to jump into the deep end and swim. (Though it's been much more approachable than that so far)
Those janky jumps have always annoyed me. I'm so glad to be learning a way that allows them to be smooth and elegant and I LOVE being able to create a responsive design once. Awesome stuff.
💪🏻
I have been a chump for many years. lol. :) Now that changes... Thanks for this, so valuable. Thank for the Clamp Calculator too. You are generous.
Superb
You are a fantastic teacher! Thank you sooo much for so valuable lessons!
Another awesome lesson!! Thank you, Kevin.
Thank you so much for this series of video. It's priceless!
Thanks for watching!
I’m soaking it all up. I don’t want to be a chump 😂 Really appreciate your lessons - Thank you.
🙌
Great and easy clamp-calculator also. Would be handy to have a copy button added for the clamp() function.
Question: do you use the default breakpoints in Bricks Builder or do you setup custom ones in most projects? And do you always do desktop-first or do you do mobile-first? I am getting confused by online tutorials where some suggest building for mobile-first but can’t that still be done by the clamp functions for example and leaving it desktop-first in terms of which direction the settings flow? Would love your input.
Desktop first. Breakpoints are usually default but depends on the site width.
Awesome vid, Kevin. It seems I've been a chump for 10 years :)
Cheers
That was a riot. Someone mentioned fire hoses but that was more like that the water canon you used at the end?
Great episode, thank you Kevin 😃
I'm getting my answers ..... Thank You man...
can't thank you enough Kevin.
I hope next week is this acss and frames offer with the figma update 😁 I want to start making websites again.
"and this is what I call 'The Life of a Chump'" 🤣 Sh*t Kevin you crack me up with your brutal humour. I admit I was being a chump and putting in the padding values for each break point before. I ashamed to admit I was living the life of a chump, but happy you've shown me the light brother hahah f*ck.
In the video, you set the clamp on the H2 settings only. Do we need to set the clamp on every H1, H2 until H6? Can we just set it one for all the headings?
If we need to set it for each headings, then what is the difference with we set at each separate breakpoints???
Yes you need a separate clamp for each heading level. But there are no breakpoints to manage when you use clamp.
Hi my friend, firstly thank you very much for sharing realluy usefull info's. My question is that can you prepare web design tutorial from scracth using Figma and Bricks Builder? If you touch layout grid prenciples in this tutorial I will be very appreciated.
Perfect! Thx Kevin.
Maestro!!!!
Thank You!!
Thanks for a cool course, Kevin! One thing that I'm still wondering about - should we still care about fallback fix for Safari?
Nah
Can't wait ♟️
Thank you Sir great lesson
Great updates. Question on your comment on video for Frames Workflow as I feel this is still a sticking point for me, when could we expect this video?
It's on my list! No timeline.
Gold !!!
Hi Kevin
Is there a specific rationale behind configuring the container size to 1336px? Additionally, when determining the ideal measurement unit for the container , should we prioritize px, rem or percentages (%)? which is better and what is the ideal size?
Also, I watched a little bit of a video about Automatic CSS (to get an idea), I noticed the use of pixels instead of rems. Is there a particular reason for this choice although you said the px time is over?
Regards
Pixels in ACSS is a reference unit. All the values are converted to rem in the actual stylesheet.
@Gearyco, Would it be wise to create a 75ch max-width class and 50ch max-width class for paragraph tags?
I haven't really found it necessary. You can already limit paragraph width in ACSS globally. Then we have a lede-width utility for smaller paragraphs that serve as ledes.
you blow my mind with this course. Such a good refresher.
just one question; what is the way if you want to start with Bricks/ACSS/Frames? at the moment a elementor user ( but with clamp and global styles) and was planning a new site for myself. really thinking about switching from elementor to bricks/Acss/frames...... :)
The sooner you switch, the better in my opinion. If you’re not a complete beginner, you will pick it up very quickly.
thanks for this Kevin.. i do have a question about the 62.5% in Bricks.. why isn't that on 100%? trying to understand the logic here?
Long story. I'd have to write an article.
If I were to design something in bricks or another program, would their be a way to export the CSS/ HTML for use on non wordpress sites?
Not easily
When to use: 'I need ..... never get smaller than X"
The Max() function makes the above counter-intuitive to me (unless I am missing the logic boat). So, it seems that Min() and Max() should be switched in terms of naming. Whoever is in charge of naming did it for reason(s) I don't know. Not a Kevin issue, of course.
It selects the max value. That’s why it’s called max.
Great insight, thanks. I have a logo which the client wants to keep consistent to screen sizes, so I've used VW for the logo size. At 1100px viewport, the logo is 8vw, but down at 380px viewport, the logo size is 22vw. Is there a way to 'clamp' or 'calc' this? (I'm a total newbie with CSS). Thanks.
Yep, clamp it.
@@Gearyco I've tried that, but the vw needs increasing as the viewport decreases. Any clamp calculator I have come across works in REM only.
Not sure I understand. Have you tried geary.co/clamp-calculator/@@rg-web-design
@@Gearyco Thanks for the link to the calculator.
The best way I can describe this is a 'reverse clamp';
Let's say on desktop I have an image which is 10vw. But on mobile, 10vw is too small. So on mobile I need the image to be 20vw.
An increase from 10vw to 20vw as the screen gets smaller.
I created the Min() in the max-width in my Bricks. When I look at the computed max-width, it shows 100% instead of 1333px, like you have. Do you know why that might be?
Would have to see a link.
Hello, what could be the reasons that dont let me copy and paste clamp code to bricks settings?
From where?
Thanks again :)
Question. My website layout is 100%. i.e not fixed to 1366px. What number do I throw into max viewport area?
Whatever device size you want the fonts and spacing to stop scaling at. Maybe 1920. Up to you.
@@Gearyco thank you.
Why, padding values are not available in my Chrome inspect element?
Not sure. 🤷♂️
I figured it out now(thanks to the forum guys), I added those global theme styles to the conditions, and boom walah, thank you, I'm still new and learning, my aim is to create a digital marketing company as you did. Thanks for being a mentor for me and a guide, a brother. Keep it up! -- from Philippines @@Gearyco
This method was very different than even what Webflow advocates for, as fluid and not jerky movement is only important and visible for developers shifting chrome inspection window, but real world users don’t see that as they open the website on their devices with fixed dimensions.
Even within breakpoints, there are variations, as not all mobiles are the same dimensions for eg, as can be seen on the Webflow breakpoints interface, there are variations within breakpoints and they need to be adjusted for, and I am not sure how these would play out for editing those variations within breakpoints.
Withholding judgment till I see the whole course.
True, users load the page on a device and that's it. But fluid responsive typography responds to that device size, where static breakpoint values do not. So the rendering of a font size via manual breakpoints, for example, is based on a device size the user isn't currently on.
With mobile breakpoint management, the range between each breakpoint shows the same rendering even though it's not necessarily appropriate for the bottom of that range as it is for the top of that range.
So, what exactly is the advantage to manual management of every breakpoint? And what is the supposed disadvantage of fluid responsiveness?
"Webflow doesn't teach it this way" isn't a relevant argument against fluid responsive development. Maybe webflow is just way behind in their instruction. I've been teaching this for years and most people in the advanced CSS world advocate for it as well.
@@Gearyco I am open minded about finding better approaches. Hopefully, as the course moves along, things might get more clearer. Cheers.
Did I just get called a chump, tell me I didn’t get called a chump 😂
Maybe!
We would create CSS variables and use those instead correct?
Next lesson
Can these calculation be made by default with ACSS without us to do the math?
Yes ACSS does all the setup for you. You can still make any tweaks you want to the values, but you don’t have to make all the decisions yourself
@@Gearyco awsome! Deffo will buy it
Good lesson. Why not share a cheat sheet document where these functions and calculations are laid out? As the requirements of all websites with regard to typography is the same? Kindly share a pro level cheat sheet, it would be very helpful where users can simply copy paste it in all websites.
The typography and spacing requirements are different for every site.
5:42 i am offended 😛😁
All this time I've been a responsive chump and didn't know it lol
We can rehabilitate you.
@@Gearyco looking forward to chump detox
Is 12!
I may have overlooked it, but how did you determine the min value?
For which thing?
For the clamp minimum value
@@Rollclick just made up a number because we haven’t really talked about a system for deciding the numbers. in real life it’s all based on mathematical ratios from a base size.
My neurons short circuted...🙃🙃🙃
I was a Chimp😢
AutomaticCSS should include fluid line-height with clamp on the typography! Its a dealbreaker for me.
Line height is already a fluid value.
@@whatamiwitnessing1003 Under typography in the dashboard you can set any value you want for the line height of every heading size and every text size.