Love exploring your content. I was today years old when I realised your intro is “Hello my front-end friends” and not “hello my friend and friends” as my brain chose to mishear it. 😂
Nice, I also didn't know that this was possible. However, it breaks one major benefit of your original approach: You can't use custom properties in the definition of container queries or media queries, so you have to hard-code the column count and column width.
@veitLehmann, that's actually what I asked myself watching to the end of the video. Thx for the comment. That makes the solution less perfect than I initially thought :/
I love this. While media- and container-less design is nice, I really appreciate this kind of approach, because thats CSS how I know it. Never knew one could use calc for the breakpoint value. I wonder if one can use variables in there, too....
Awesome approach, definitely gonna try it and test it out; i think this enables using media breakpoints as css variables; if it is so - it's mindblowing - currently i postcss for this
Same here. I think people working on small to medium size websites should familiarize themselves with postcss, it really is a great and easy solution for those who don't want to dig into sass / less etc.
@@einatblackrose Agree, actually i think postcss is really powerful when using along with sass (sass compies scss to css and then postcss comes in play), thus you can use features of both sass and postcss, which is really neat; i have been using them together for like 6-7 months without a problem
It took me a while to really dig into grid, and honestly I'm still more comfortable with flexbox, but grid opens a world of new options for advanced layout, and often times just saves on some code writing (such as less divs) which is cool, you should give it a try.
@@mikeysd grid is so powerful for templating pages quickly, and to be able to change the format of them quickly. Was a game changer when I learnt how to use it
Doing the math for the gap and verry much short hand .class --c: 3; --w: 20ch; --g: 1rem; --m-w: calc(var(--w) * var(--c) + var(--g) * (var(--c) - 1)) @media/@container (width > var(--m-w))
How to make the border width with respect to size of element (either width or height of element) and also font-size with respect to size of element in which it is present
specifically, 1ch is the width of the glyph '0' in the used font, like 1ex is the height of the glyph 'x'. I think this is taken from the current font-size for all values except if you use them in specifying font-size, which will instead evaluate it in terms of the parent font-size just like when you use "em" (of course, what else could it mean?)
I know you are exploring, and I like that, but I feel that overall we are now making webpages as if they were accessed in a accordion, that is constantly changing width while browsing 😅
In my opinion, without thinking it all the way through, I'd like it to evaluate variables in the context of the specific container that is being tested.
Hi, I have a doubt that, I am mern stack developer and a beginner from india. Using tailwind is better than css or not..? If concentrate more on tailwind, will it help more to get a job...?
We'll *eventually* have custom media queries... it's in the spec: www.w3.org/TR/mediaqueries-5/#custom-mq - when it will happen, I don't know :( - I also don't know if we'll be able to do it like you put, but I hope we'll be able to do something like that.
I tried to use variables ones inside media query and it totally failed. I think that would be really useful. I wonder if it will work inside the calc()
it would then create a different number of columns depending on the available width, while here it's specifically going from 1 to 3 after the specific column width is exceeded
Yeah, the 600 is kind of magic numbery, whereas if you do it like this, it's more explicit. Same thing, if you're doing the math in your head, but also allows for other units and less thinking on our end 😅
please make one more projects of full responsive website i have just started your course to develop full website responsive but that’s very old please make more videos i want learn all the possible ways to make responsive website quickly and very smooth. I’m stuck and only you can help me
That course is older, but what it teaches is timeless as so much of it is about taking the right mindset into how to do things. I have a few more recent videos with larger builds too
@@KevinPowell Thanks Kevin glad you replied,yes i agree though that course is old but its worth watching,i am very fascinated watching your videos.I must say your the "CSS EXPERT GURU"
Every time i make my portfolio website you drop new a new way to make layout vedio, but can you make a vedio on how to select color scheme and font vedio please?
When you say select, do you mean come up with a color scheme and pick fonts? I've covered both :D - ua-cam.com/video/mq8LYj6kRyE/v-deo.html and ua-cam.com/video/zUMAjJ88NJ0/v-deo.html
Love exploring your content. I was today years old when I realised your intro is “Hello my front-end friends” and not “hello my friend and friends” as my brain chose to mishear it. 😂
I realized that a month or two ago, when he did a logo for front-end friends. Mind-blowing stuff.
Same! 😄
Same 😂
Same!
Wait .. does he say front-end and not friend 😐
Wow! I think I know CSS and now I see I don’t know it well enough. Thanks! A lot to discover!
Nice, I also didn't know that this was possible. However, it breaks one major benefit of your original approach: You can't use custom properties in the definition of container queries or media queries, so you have to hard-code the column count and column width.
Yeah, waiting for the day when custom media queries actually gain support! They are in the spec, afterall
@veitLehmann, that's actually what I asked myself watching to the end of the video. Thx for the comment. That makes the solution less perfect than I initially thought :/
I love this. While media- and container-less design is nice, I really appreciate this kind of approach, because thats CSS how I know it. Never knew one could use calc for the breakpoint value. I wonder if one can use variables in there, too....
Sadly, no 😞. Custom media queries are in the spec, but so far, no one has implemented them
This is awesome. Please post more tricks like this
WOW 👏👏 thank you, this is best discovery I completly missed
Every single time I think "Ohh yeah I actually have good knowledge of css" BOOM you upload something and increase it :D nice one!
You're awesome Kevin! Thank you for the video! 😊
This is really cool to know, didn't know CSS has evolved this much
Thank you to your both, you have both helped me learn today
Thanks for the video Sir❤
Really cool approach. Can you use a variable for column count in the media query calc?
Sadly no 😞
No but with something like SASS you could create them in a loop!
Awesome approach, definitely gonna try it and test it out; i think this enables using media breakpoints as css variables; if it is so - it's mindblowing - currently i postcss for this
Sadly we still can't use variables in there....
Same here. I think people working on small to medium size websites should familiarize themselves with postcss, it really is a great and easy solution for those who don't want to dig into sass / less etc.
@@einatblackrose Agree, actually i think postcss is really powerful when using along with sass (sass compies scss to css and then postcss comes in play), thus you can use features of both sass and postcss, which is really neat; i have been using them together for like 6-7 months without a problem
@@gio2156 That's interesting, I never thought of using them together. What can postcss add in addition to the capabilities of sass?
You can use this together with clamp to make some cool stuff too
Thanks Kevin
Could you please advise how I could center the last item if I use a grid.
now all we're waiting on is using custom :root properties as conditions
Thank you and Miriam for this. Have you tried it with postcss yet? I wonder if this would allow to use it with variables.
I should totally dig deeper here. Never used grid before, though. Only flexbox.
You could use this for flexbox stuff too! I just used this for a quick example :)
But, I'd also say to definitely dive into grid! You won't regret it!
@@KevinPowell Absolutely. I held off on learning grid for a few years. Wish I hadn't.
It took me a while to really dig into grid, and honestly I'm still more comfortable with flexbox, but grid opens a world of new options for advanced layout, and often times just saves on some code writing (such as less divs) which is cool, you should give it a try.
@@mikeysd grid is so powerful for templating pages quickly, and to be able to change the format of them quickly. Was a game changer when I learnt how to use it
Doing the math for the gap and verry much short hand
.class
--c: 3;
--w: 20ch;
--g: 1rem;
--m-w: calc(var(--w) * var(--c) + var(--g) * (var(--c) - 1))
@media/@container (width > var(--m-w))
you can't use variables in the media query
That means I am not the biggest fan of it, since it is not as modular.
Cool to know it's possible. What's the difference with repeat(auto-fill/auto-fit, minmax(200px, 1fr)) in this case ?
\o/ Kevin CSS Things nobody can miss that 😂😊😊
How to make the border width with respect to size of element (either width or height of element) and also font-size with respect to size of element in which it is present
Nice concept
thanks ❤
please talk about devin a first ai software engineer what is your perspective
What is the "ch" in the @container query?
In other words what does 30ch stand for?
ch = character, essentially a single letter of your text
@@einatblackrose thank you so much man.
specifically, 1ch is the width of the glyph '0' in the used font, like 1ex is the height of the glyph 'x'.
I think this is taken from the current font-size for all values except if you use them in specifying font-size, which will instead evaluate it in terms of the parent font-size just like when you use "em" (of course, what else could it mean?)
Can you have a font always take up the full width of a responsive parent div?
Without JS, not that I know of
Thanks 🎉
03:57 which font @media queries use for ch and ex units?
If it's a media query, it'll use the default font + size in the browser. If it's a container query, it uses that containers font and size
I know you are exploring, and I like that, but I feel that overall we are now making webpages as if they were accessed in a accordion, that is constantly changing width while browsing 😅
Thnx 👍👍
BTW how much safe is to use Container query? or still should we use media-query?
Haha, this is awesome!
Awesome!
May somebody help me out from which video does the first solution comes from?
Would be great if css variable where working inside of media/container queries, they could inherit from :root ..
In my opinion, without thinking it all the way through, I'd like it to evaluate variables in the context of the specific container that is being tested.
Hi,
I have a doubt that,
I am mern stack developer and a beginner from india.
Using tailwind is better than css or not..?
If concentrate more on tailwind, will it help more to get a job...?
Will it be possible to use custom properties within queries ? EG
@container (width > var(-col-size)){…}
We'll *eventually* have custom media queries... it's in the spec: www.w3.org/TR/mediaqueries-5/#custom-mq - when it will happen, I don't know :( - I also don't know if we'll be able to do it like you put, but I hope we'll be able to do something like that.
@@KevinPowell I can't wait! That's a major missing piece, and I didn't know they are working on something like this.
I tried to use variables ones inside media query and it totally failed. I think that would be really useful. I wonder if it will work inside the calc()
Couldn't "repeat(auto-fill, ...)" be used here instead?
it would then create a different number of columns depending on the available width, while here it's specifically going from 1 to 3 after the specific column width is exceeded
Is the point if "* 3" so it's clearer that you're looking for 3 columns of 200px vs just having 600, where that's not obvious?
Yeah, the 600 is kind of magic numbery, whereas if you do it like this, it's more explicit. Same thing, if you're doing the math in your head, but also allows for other units and less thinking on our end 😅
please make one more projects of full responsive website i have just started your course to develop full website responsive but that’s very old please make more videos i want learn all the possible ways to make responsive website quickly and very smooth. I’m stuck and only you can help me
That course is older, but what it teaches is timeless as so much of it is about taking the right mindset into how to do things. I have a few more recent videos with larger builds too
@@KevinPowell Thanks Kevin glad you replied,yes i agree though that course is old but its worth watching,i am very fascinated watching your videos.I must say your the "CSS EXPERT GURU"
Every time i make my portfolio website you drop new a new way to make layout vedio, but can you make a vedio on how to select color scheme and font vedio please?
When you say select, do you mean come up with a color scheme and pick fonts? I've covered both :D - ua-cam.com/video/mq8LYj6kRyE/v-deo.html and ua-cam.com/video/zUMAjJ88NJ0/v-deo.html
@@KevinPowell yes, I did thanks
Why can't we use custom properties inside nth selectors
There are a few places we can't use them, sadly
Just curious to know how would you use them?
@@KevinPowell 😐
we need mixins
There's a proposal by Miriam Suzanne for them, so it's sort of in the works!
I do not understand, try it in real project
what is the difference between a media and container query?
Kevin has some videos about it, I'd recommend you to look for them
How you dare to have a class named wrapper... #WWAD
What would Adam do? 😂
@@KevinPowell Let's be honest - he would call it wrapper...
First
Kevin, The Wizard Mathematician....who dabbles in CSS for fun 😆