I discovered your channel a few weeks ago, when I switched from Elementor to Bricks. I would have liked to find this content much sooner... I think it is important that this reaches more people and they stop wasting their time.
If I worked on a website you made I'd be calling you to drop a thank you for your CSS organization for the time you saved me from inspecting and hunting down elements in different areas in the css.
Another outstanding tutorial Kevin with an excellent solution. Can't thank you enough for all these tutorials. Can't say I get the logical properties bit so will have to go away and explore :D
It's just a replacement for fixed directional properties. It's a more modern approach to writing CSS that provides support for axis changes (e.g. RTL support, etc.).
That was fantastic! And what's even more cool for myself, is the fact that I was thinking in the same direction as you! 😅 The tokenization is always is so satisfying for some odd reason, lol. I just love the cleanness it brings. I didn't know you can swap the values into negatives with * -1 though, that was something I picked up today. And also the grid-auto-rows was new to me. Thanks for another high quality tut!! 👊🏼
Yes, the -1 is tremendous. A guy just commented a couple days ago saying he's been building sites since 1999 and "this tokens stuff is stupid." Cracked me up. How can something so insanely useful continue to escape certain people? Crazy world we live in.
@@Gearycoha! I’ve met similar developers, and they typically tend to be older folks with an “I’ve seen it all” closed-off mindset… (Not trying to be disrespectful towards anyone’s age - far from it! Just stats…)
love it love it love it.... why, cause my spidy sences were a tingling about variables... which means... I am a tiny bit less chumpie. Great Stuff! Thank you!
good, very good. i can say this is one of the most used patterns in ui i use for general layouting, makein flexable grids, even tables. next challange now is how to get rid off lines of the last children item if they are empty.
This is crazy, thanks a lot for this tutorial! I used it to fix my elementor acordion widget not wanting to display in two columns and it worked perfectly! Not to mention i didnt have to touch the tablet and mobile versions since it worked automagically! Will also use this on my personal Bricks website since i prefer using grid whenever i can instead of flexbox.
nice solution and I don't think there is a better one..but since I'm also a perfectionist it's a good idea to add the thickness of your line on left and top as well so it can actually be in the middle even if the line is thicker
Thank you Kevin, well done. Please consider add links for the codepen and the blog post as well in the YT description box. FYI, I added a comment here with ur codepen link, pretty sure YT filtered it as spam😣
Thanks, Kevin. Paying with a like and a comment. I have a question, but want to try and sort it out myself. If I get stuck I'll hit you up in the inner circle.
Thanks for the tutorial :-) But how can I best implement this with Bricks and ACSS? Somehow it doesn't work for me. 😞 As soon as I have written the comment, it works. :-D But one question, how can I round the corners of the lines at the end? Unfortunately it doesn't work that way: .grid__item::before, .grid__item::after { content: ''; position: absolute; background-color: var(--line-color); z-index: 1; border-radius: 5px; }
That’s exactly how I would have done it. Jokes, I had no idea 🤣 @kevin Will you have a logical properties video in pb101? Why they are best practises and how to use them? Because to my eyes that makes the code super hard to read 😂 Keep up the fantastic work you are changing peoples lives!
good job as always! a quick thought tho: what happens if you set a stupid number for the thickness? sure, the offset will keep moving the line at gap/2 but does a 20px line stays centered? when you changed it to 5px, it seems that those lines are still in place on the outer side, but enlarged towards the inside of the card. di suspect we have to change the position with the translate trick to keep them centered right on the border. i didn't check this yet, so maybe i'm talking shit.
Works great as far as it goes. But I was following along with a grid structure using cards of different widths on each row, and the method falls over when the vertical grid lines don't line up.
Thanks for the great and elegant solution. But this elegant solution still lacks automatic symmetry of the elements. For example, we have 3 columns, and 4 elements, then it would be good for the quadruple element to be in the middle, and if there are five elements, then it would be good for them to be displayed on different sides. Tell me how this can be done dynamically and maintainably with a grid. Thank you
@@turvodnikAs mentioned, it is just not possible to use grid for your use case. A grid is like a checkerboard; you just can't have a row of a grid with columns not vertically aligned with another row.
@@Gearycothank you, I'll check it out! But what if it's e.g. a 3-col grid and there are five elements? Wouldn't the container border span the empty cell as well then? 🤔
If you want the entire grid to have a border, then that's what the above will do. Maybe I'm not sure what you're wanting. A visual would help.@@nikostrobel
![BRASIL vs. PERÚ [4-0] | RESUMEN | ELIMINATORIAS SUDAMERICANAS | FECHA 10](http://i.ytimg.com/vi/tbyOJKXfQnI/mqdefault.jpg)
Yes, this is peak CSS writing. Like magic
I discovered your channel a few weeks ago, when I switched from Elementor to Bricks. I would have liked to find this content much sooner... I think it is important that this reaches more people and they stop wasting their time.
Yes please do a css only series
CSS is powerful but you man are the best explaining it. Thanks for sharing your knowledge.
If I worked on a website you made I'd be calling you to drop a thank you for your CSS organization for the time you saved me from inspecting and hunting down elements in different areas in the css.
Precisely! I thank myself often when I go back to edit an old site, too :) It's not just for others!
The 100%vw and vh and the overflow:hidden is what I couldn’t get to. So smart 👌
oh man, that was absolute beauty. the true genius is in the simplest solution. you could use this to illustrate the frase "code is poetry"
One of the best tutorials ever. Thanks for this method. Saves a lot of time
23:20 Okay that responsiveness is where the magic happens for me. Amazing!
Another outstanding tutorial Kevin with an excellent solution. Can't thank you enough for all these tutorials. Can't say I get the logical properties bit so will have to go away and explore :D
It's just a replacement for fixed directional properties. It's a more modern approach to writing CSS that provides support for axis changes (e.g. RTL support, etc.).
That was fantastic! And what's even more cool for myself, is the fact that I was thinking in the same direction as you! 😅 The tokenization is always is so satisfying for some odd reason, lol. I just love the cleanness it brings. I didn't know you can swap the values into negatives with * -1 though, that was something I picked up today. And also the grid-auto-rows was new to me. Thanks for another high quality tut!! 👊🏼
Yes, the -1 is tremendous. A guy just commented a couple days ago saying he's been building sites since 1999 and "this tokens stuff is stupid."
Cracked me up. How can something so insanely useful continue to escape certain people? Crazy world we live in.
@@Gearycoha! I’ve met similar developers, and they typically tend to be older folks with an “I’ve seen it all” closed-off mindset… (Not trying to be disrespectful towards anyone’s age - far from it! Just stats…)
@@GearycoHe’s probably jealous. Lol
You the man. I just watched the Intro and the Outro and it was great. I will come to watch only that every time you upload a video.
This video just helped me immensely with a build I'm working on. Thank you so much!
love it love it love it.... why, cause my spidy sences were a tingling about variables... which means... I am a tiny bit less chumpie. Great Stuff! Thank you!
Great explanation for a tricky problem.
I finally got a chance to implement this. Great results and appreciate the tip on grid-auto-rows for balanced lines.
Wow! 😮 So neat, so clean. Damn I have so much more to learn but I am glad I found you to help me through my ascension. Thank you Kevin.
good, very good. i can say this is one of the most used patterns in ui i use for general layouting, makein flexable grids, even tables.
next challange now is how to get rid off lines of the last children item if they are empty.
I prefer to keep them. Looks weird when they’re gone
Oh man how ellegant this solution is! It gave me such a aha moment to watch your solution even when you are tripping over your tongue! 🤣
This is crazy, thanks a lot for this tutorial! I used it to fix my elementor acordion widget not wanting to display in two columns and it worked perfectly! Not to mention i didnt have to touch the tablet and mobile versions since it worked automagically!
Will also use this on my personal Bricks website since i prefer using grid whenever i can instead of flexbox.
Generally the rule of thumb is:
Grid - laying out content
Flex - positioning elements
This is awesome. The only drawback is when you need overflow not be hidden :)
This was great. Worked just like I wanted.
Amazing job. Wanna see same thing but with a grid exmaple there will be some columns and rows with "span 2" settings.
Incredible training. I haven't used this sort of design but am thinking I'll implement it at the next opportunity.
nice solution and I don't think there is a better one..but since I'm also a perfectionist it's a good idea to add the thickness of your line on left and top as well so it can actually be in the middle even if the line is thicker
Wow, exactly what I was looking for ! :)
Another incredible tutorial - thanks Kevin
I am late to the party, but these videos are amazing. Time to binge watch everything :D
Just found you. Great stuff. And yes I learned quite a bit. Thank you!
I’m going to try this! Would you add this to Automatic CSS?
Considering it
I feel like I'm being blasted with a fire hose of web design content every week, I don't know when you sleep. Thanks for another excellent video!
👨🚒
Another platinum tutorial!
Love it! Exceptional content, no doubt. Again!! Cant thank you enough.👍
This was a great tutorial, can't say enough, thanks....
Thank you Kevin, well done.
Please consider add links for the codepen and the blog post as well in the YT description box.
FYI, I added a comment here with ur codepen link, pretty sure YT filtered it as spam😣
Thanks, Kevin. Paying with a like and a comment. I have a question, but want to try and sort it out myself. If I get stuck I'll hit you up in the inner circle.
Yes sir!
Great stuff as usual Kevin! Heard about Logical properties for the first time, need to dig into it!
I love this. Thank you.
Thanks for this, very helpful
I love this solution! Thanks for this great tutorial!
You are so welcome!
Fantastic and if you ever wanted to remove borders in between headers you can use
/* row lines */
.grid-container > .grid-item::after {
width: calc(100% + var(--line-offset) * 2);
height: var(--line-thickness);
top: calc(var(--line-offset) * -1);
left: calc(var(--line-offset) * -1);
}
/* columns lines */
.grid-container > .grid-item::before {
width: var(--line-thickness);
height: calc(100% + var(--line-offset) * 2);
bottom: calc(var(--line-offset) * -1);
left: calc(var(--line-offset) * -1);
}
Top content, thank you so much Kevin 😃
This stuff is amazing
Brilliant, thank you!
Great tutorial! 🙏🏻🙌🏻 But is that your video/audio editing program on the right side in the background? 🤔🤦🏻
Yep.
I agree, it's premium content
i rarely do, but i have to take the hat off today, you Kevin, are getting out of control 😁😁😁😁
🙏
Thanks for the tutorial :-)
But how can I best implement this with Bricks and ACSS? Somehow it doesn't work for me. 😞
As soon as I have written the comment, it works. :-D
But one question, how can I round the corners of the lines at the end?
Unfortunately it doesn't work that way:
.grid__item::before,
.grid__item::after {
content: '';
position: absolute;
background-color: var(--line-color);
z-index: 1;
border-radius: 5px;
}
you are real GOAT!
That’s exactly how I would have done it. Jokes, I had no idea 🤣
@kevin Will you have a logical properties video in pb101? Why they are best practises and how to use them? Because to my eyes that makes the code super hard to read 😂
Keep up the fantastic work you are changing peoples lives!
good job as always!
a quick thought tho: what happens if you set a stupid number for the thickness? sure, the offset will keep moving the line at gap/2 but does a 20px line stays centered? when you changed it to 5px, it seems that those lines are still in place on the outer side, but enlarged towards the inside of the card. di suspect we have to change the position with the translate trick to keep them centered right on the border. i didn't check this yet, so maybe i'm talking shit.
I think it’s an unlikely scenario because it’ll be super ugly anyway
i agree, at that point all of this won’t make much sense and other techniques are maybe better.
Kevin awesome as always. What if we want the line dividers to be dotted lines?
I think you can use border on the pseudos and get it done. Haven’t tried it though.
our guy
Works great as far as it goes. But I was following along with a grid structure using cards of different widths on each row, and the method falls over when the vertical grid lines don't line up.
Why are you using different width cards?
Thanks for the great and elegant solution. But this elegant solution still lacks automatic symmetry of the elements. For example, we have 3 columns, and 4 elements, then it would be good for the quadruple element to be in the middle, and if there are five elements, then it would be good for them to be displayed on different sides. Tell me how this can be done dynamically and maintainably with a grid. Thank you
It can’t
@@Gearyco And with Flex containers this is possible, but how can you do it as conveniently as with grid?
@@turvodnikAs mentioned, it is just not possible to use grid for your use case. A grid is like a checkerboard; you just can't have a row of a grid with columns not vertically aligned with another row.
I love it ❤
Perfect. Now all we need is a solution for grids where the cards are supposed to have outer lines too (my typical use case...) 😅
Add to grid container: border: var(--line-thickness) solid var(--line-color);
@@Gearycothank you, I'll check it out! But what if it's e.g. a 3-col grid and there are five elements? Wouldn't the container border span the empty cell as well then? 🤔
If you want the entire grid to have a border, then that's what the above will do. Maybe I'm not sure what you're wanting. A visual would help.@@nikostrobel
Nice 👌
Kevin IQ 500 confirmed
No, I think I’m super average. Just abnormally persistent.
👍
.DRY {display:none;}
Thank you again