Це відео не доступне.
Перепрошуємо.
PB101: L09 - Creating Common Page Layouts With CSS Grid
Вставка
- Опубліковано 16 сер 2024
- Good news! It's time to actually start page-building!
Remember the "everything is a box" lesson? Well, now you'll learn how to position those boxes in a typical page layout fashion.
Here's the secret: Most websites mix and match the same basic layouts. They're not as fancy as they might seem at first glance!
Here's the second secret: These layouts are super easy to create with CSS Grid. We don't even have to dive deep on Grid yet - surface-level grid concepts will get us really far!
So, grab a drink and block out the next hour or so. I will teach you the basics of CSS Grid, and then we will build a real-world example page.
Your homework is to build the same page as soon as you finish this training!
** 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
2:23 Why Grid is Superior to Flexbox
5:39 Grid vs Flexbox (Equal Columns)
15:48 Basic Layouts With Fractional Units
18:21 The minmax Function
23:22 Easy Equal Columns With the Repeat Function
27:30 Grid vs Flex (Repeating Layouts)
30:08 Real-World Page Layout (Messagely)
33:14 Hero Section
50:24 Features
56:27 Talking Points
1:05:46 CTA Section
1:07:55 Wrap-Up
Let me know if the pace of the page building is okay in this training! Do you want me to go slower? Faster? Things are just fine as they are?
It's good so far.
Pace was perfect. Another great lesson. Thank you!
The current phase it good and doesnt feel too long. Also if possible can you give us a starting template of those tokens to use them as templates? thank you
@@VijayKumarIM Automatic.css --- the tokens we've created so far are just the tip of the iceberg. There's no copy/paste ... you're in framework territory.
It's great! even though the training material is fast; how you present it make it understandable and easy.
New merchandise slogan! "When in doubt, BEM it out."
1:09:48 "... speed is important, but speed comes from experience and practice..." could not agree more = ) thank you!
Thank you so much for this free course, Kevin! I started three years ago with Elementor and basic knowledge in web design, and I always had the feeling that this isn't the right way to do it. 😅 I finally switched to Bricks, and your content is incredibly helpful for me 🖤
Amazing course. Pretty sure it's THE best web design course I have ever taken in my life. And we are only half way! Even though 95% isn't new information to me, it does help a lot to achieve a better and more scalable workflow. You have a very clear and entertaining way of teaching. Keep up the amazing work! Can't wait for the rest of it.
💪🏻💪🏻
09:23 "this is not fat shaming... don't try to cancel me" LOL! Great lessons btw!
Just when I think I know what I'm doing I watch one of your videos and realize I'm not! Once again many thanks Keving for a bounty of great information and training.
I'm glad to inform you that I checked myself out of Chumpville, I ain't even going to watch content from other chump villagers anymore.
Auto-alternating content code snippet for you to type yourself and, therefore, learn faster:
.talking-points-wrapper > *:nth-child(even) > *:last-of-type {
order: -1
}
I don't advocate for copy/paste. Make people type it so they learn faster.
@@Gearyco Good point. I just edited my comment.
I've been putting off watching this series because I thought I would be too advanced for it. I was wrong. You've shown me things I've been doing wrong for 20 years (lol). Thanks for the content.
Thanks for giving it a shot!
I finally understand the basics of CSS Grid 😊. It should not have taken me this long 😅. Now I’m confident writing it without double-checking a resource page. Great lesson, Kevin!
Great lesson once again. Practice/homework will come after watching again and taking notes. Damn this is a great 101 course!
I'm not sure when this liberating thought occurred to me, but I'm never going to have to buy a WordPress theme ever again. Amazing! 🤑
I think CSS grid in general meant to be for layout structure. Flex is more for content based alignment. I call them BroSis (Brother and Sister), they can live individually but also work hand-in-hand.
CSS grid was quite obscure to me since the arrival of Flexbox. I wasn't using Grid because I didn't understand how it worked, or at least it was pretty fuzzy. Thanks for clearing this up! As usual, you are a great teacher, with your own recognizable style.
Flexbox was here long before Grid FYI.
@@Gearyco Yes, I know. What I meant was that I used Flexbox a lot, mostly. When Grid came along, I didn't dive in because I felt it was more complex than Flex. (sorry, English is not my first language).
This course is frigin awesome! Up till now, its been a review for me but now all the pieces are coming together. I love Bev by the way. I hate painting myself into a corner.
Thank you Kevin. It's really helpful and I'm waiting for more advanced and level by level tutorials from you. 🍀
Kevin, you are one master teacher! Excellent tutorial, very rich, useful, & practical. Teaching must be your life calling cause you are enjoying it so much. Bravo!
I do enjoy teaching :) Also helps me get better.
@@Gearyco you don't know anything about anything until you have taught someone how to do something. quote on a poster in my teacher's office in high school.
Flexbox and grid work great together. Best way I've heard it put on knowing when to use which is by Kevin Powell (and I paraphrase): use grid when you want the parent to dictate the layout, use flexbox when you want the content (of the children) to dictate the layout
Just love your passion, you must be the one who calls the other idiot and explain him why, keep the good work!
Peace from Portugal!
Another excellent lesson, Kevin. Your pace is fine, for me. I can stop and replay, when necessary.
This is right on money and so much fun! Moden web page building training with best practices! The course is getting tactical now and this is where "rubber meets the road"!
Kevin, I spent all day trying to get this right 😢… it was a real bemmer! 😆
to all those who want to know how to do it the right way: watch this brilliant training tutorials.
Wow, It will take 2 to 4 hours to design that page for some people. Really loving this course ☺️.
I was confused why Grid is better than Flexbox and now I totally get it 😅. Thanks Kevin 🤗!
Done, that was really helpful. I'm learning heaps about both Bricks and how to group/name my content in CSS. Thank you.
I literally did the pat on the back Was in need for that. Thank you for the reminder 👌
So much best practices are packed within these videos. Thank you so much :)
I loved this and felt a sense of accomplishment after working through this. BTW to anyone without WPcodebox, I just used the style sheet. I love your analogy of touching all the bases and can see how all these best practices are going to help. I know I can only get quicker at them :) Thanks for the great lesson.
💪🏻💪🏻💪🏻
Another great tutorial, Kevin, and the pace is perfect for me.
Loving all the great info you're providing in this series. Great presentation and really fantastic job of breaking down the topics. So glad that I found your channel and Automatic.css! I"m not a pro webdesigner, but create/maintain my organizations website and feel so much more confident because of your content!
Much appreciated!
And that is how Bev calling us is no longer a problem!
Thank you Kevin for these very instructive videos, it's really a great job!
Thank you for your lessons, really helpful, your videos rewired how my brain works 😂😂
Never thought I'd say this: actually looking forward to when Bev calls now 😎
Great lesson Kevin, great pace it’s starting to sink in and come together thank you.
Marvelous
Never knew I was a hard criminal until watching these videos 😂
Get off the streets!
@1:03:57 Note for later:
> *:nth-child(even) > *:last-of-type {order: -1}
Very helpful, thank you Kevin !
Thanks for another lesson. Keep it up!
I'm really so happy with this course and I understand every second since lesson 1 and I can use bricks and other builders very very well BUT HOW CAN I REMEMBER ALL THIS AMAZING CSS POINTS during the development process!! :D ( I mean DRY ) - I'm worry!
great job as always
Great lesson! Seems like less fire hose in the face now.
BEM! Another great tutorial!
I agree. I hate all uppercase. Felony violation. Lifetime prison sentence.
Man, I dig your style. Just subbed.
that sounds like a SNL skit " Becky & Bev from accounting"
This is awesome; I could not resist trying the alternating talking points card, but it did not work. I know you said to watch. I had to try, LOL
Probably missed a small step. Post a link in inner circle and we can help you sort it out.
@@Gearyco That is ok; I will move on to lesson 10. Thanks!
@@Gearyco I returned and re-did the entire lesson, and yes, I missed a step. It is all working the way you have taught it!
Thanks a lot for this course. Is there anyone following along with vanilla HTML/CSS? I'm learning a lot by doing it this way.
Good Lesson
As a beginner in web developing I would be interested in a second part of this episode so to speak as I am a little bit confused on which is better: flex or grid for sections, containers. If I understood correctly from this lesson it is a best practice to use grid on sections but after inspecting the DOM of AutomaticCSS website I am noticing each section being set to flex, including the whole "body".
Grid and flex can be used anywhere depending on what you need to do. Did you watch the lesson on flexbox yet?
@@Gearyco yes! So flex gives flexibility over grid on aligning items within sections or containers?
Kevin, when you get a chance, can you tell me what tool /chrome extension you are using that allowed you to annotate the web page?
THKS
Presentify
@@Gearyco thanks Kevin just got it
I guess, this is part of his screen recording app. Maybe CleanShot X.
Another fantastic eye-opening lesson! Thanks man!
Bang on Kevin
nice one..
What are the pros and cons of using this function for my grid columns?
repeat(auto-fit, minmax(var(--column-width-min), 1fr))
Apart from the fact that this totally eliminates my breakpoints, I was thinking this might be helpful if I made it a token (--grid-auto) and didn't want to have to overthink how many columns I need when plopping grids into different sized containers throughout my page. Thank you to anyone who is able to answer this question for me!!
You’re missing a min function in there. I think this will cause overflow issues on mobile if content width is too wide.
So, as you say, since grid is more versatile than flex, and used more often, why does Bricks set sections and containers to be flex by default. We have to change them to grid. Wouldn't it make more sense to set them to grid and then change them to flex when needed? Would you be in favor of Bricks changing the default setting for sections and containers to grid?
No bricks is correct because the content the user will put in any box is unknown. Flex is a better option as a default.
@@Gearyco OK, thanks!
@@Gearyco This is the reason I never used Grid because when is the content or amount of columns ever truly known in a website build? Flex doesn't need to know this but Grid does?
@Gearyco QUESTION: I have followed along with the repeat(4, minmax(0, 1fr) grid column layout, but my boxes all stack vertically and I can't seem to get them to expand out horizontally using the repeat function.. any direction on that? thank you!
Could be a few reasons. Would need a link.
I cant express enough gratitude for your course! Its opening soooo many doors! Thank you!
I have one question. If I make a grid of 3 items, but I have 7 or 8 items, is it possible to center the last one/s? With flexbox that's possible, I haven't figured that out in CSS grid...
It's not possible with grid. But if you're using ACSS, you can use our flex-grid-- classes to do this. It requires a lot of flexbox calculations, but ACSS will do it for you if you use those utility classes.
Hi Kevin, I have a doubt. Wouldn't be a good idea to add for example the container gap (row and column) style in .brxe-container? and create a utility class like .gap-0 in case I want to have that? Don't want to take much of your time, if you just say NO I know you have solid reasons. Thanks for the great course!
It can cause some issues if you’re using a framework, so I leave it out. Also, ACSS has the option to add it automatically so I do it there.
Thank you for the answer@@Gearyco
Is WPCodeBox required to be able to use the var() functions? Any other options?
Nope. You can use ACSS now.
I tried out your global classes grid-1 to grid-6. example (repeat(5, minmax(0, 1fr))
My problem it isn't responsive. Just overflow.
If i use example repeat(auto-fit, minmax(XXXpx, 1fr)) is responsive, but not fixed the grid number. (I have to calculate from container widht, how much have to set pixel for min-max)
What I'm doing wrong? (I'm using Bricks builder too)
Watch the lesson on responsiveness.
Great one as usual , I'm facing a problem when I try to apply root code ( order-1) .. it's not working for me by any way. what could be wrong ? Thank you.
Not without a link
@@Gearyco no worries i got it. Bricks requires % before and after root , however its not like that on the lesson but anyway that makes it workes ..Thanks Kevin.
@@FarisHammoud yeah they changed it after this video was recorded.
Kevin, should the talking cards here actually not be in an unordered list?
Wouldn’t hurt. Did I not make them a list? Can’t remember this far back.
How do you inset an SVG file to replace the icon in the icon element?
It’s an option in the element dropdown
Thanks for this video. I used the BEM class grid-3 on a container, but when I check on mobile I can't change the classname and it's still 3 columns. Do i need to add some media query in my CSS?
grid-3 is a utility class not a bem class. It’s not meant to be edited.
@@Gearyco Yes you're right. I was in doubt ;). I was to soon with this reaction, because in the next lesson you're making the messagely sire responsive.
The repeat function can only be used if the columns are equal, correct?
No you can repeat lots of grid types
Awesome stuff, I have a question about utility classes from Automatic CSS while using BEM. Say I am creating a "talking-point-card" class and then I want to apply the grid-2 variable that you created in tutorial but I am also using Automatic CSS and feel the urge to simply apply the grid--2 utility class instead of creating my own variables, how would you suggest incorporating Automatic CSS in situations like this while still keeping the talking-point-card BEM structure maintainable for the future? Thanks!
in the grid-template-columns input in bricks just put var(--grid-2)
Perfect makes sense now that I just finished the entire 101 series. Pair that with keyboard shortcuts for bricks tutorial and I feel like a god. Thanks, seriously!@@Gearyco
Do you have ACSS course similar to PB101 ? Thanks.
Probably a good idea
@@Gearyco so that means you will create it :P ?
Loving all of this and following along from the start but I'm obviously having some sort of rookie error and totally stuck at creating grid columns via the CSS point - have tried adding CSS both via the WP Code plugin as well as create a stylesheet in the custom settings but neither seem to be having an effect - only if I do it via Custom CSS on the individual page. Have spent ages going back and forth to check settings / my code but can't seem to work it out agh - any help would be appreciated! Thanks!
Need a link
Hi Kevin, does WP Code Box have a free version? Or is it possible to tokenize the CSS in Page Builder itself?
You can use the Child theme stylesheet
hey may i ask, what chrome extensions are you are using to be able to write on your screen thanks :)
Not a browser extension. It's an app called Pro Mouse.
around 1:04:42 when you assign things to root classes, That root is for the individual element you have selected right? If you want to do something similar with custom css alone, I think root would provide global variables, so would you instead target a class set on the section? so its be something like .talking-points > * nth-child(even)
{...}
Correct. “Root” in bricks is just a reference word for the current class/ID. So it’s basically like writing the class name.
Q - when are you using the clamp funciton with calc and when are you using without calc?
Not sure what you mean. Example?
@@Gearyco in 34:32 for example up to the h3 tag you are using calc inside the clamp function and below it you do not using it.
Oh, I see. calc() isn't required in a clamp function. The use of it is redundant. It doesn't matter either way, it gets processed to the same conclusion.@@maayanzilberberg2523
@@Gearyco Thank you for clarifying that
At about 13:10 you talk about flexbox and you set each of the two blocks to 50% and it breaks the layout. Because, as you say, the parent has gap applied to it and flexbox can not handle gap so 50 + 50 + gap is more than 100. When I try this flexbox seems to handle the gap just fine. I set the parent to flex. I set a column gap to 100px. I set each of the two blocks to 50%. Everything works, they appear side by side on the page with a 100px gap between them. What am I missing here?
Only when the container is set to not wrap. If you need the container to wrap, flexbox can’t handle the gaps.
@@Gearyco Thanks!
Why didn't my images scale up or down? The ratio changed.
I would need to see a link
I fixed it! Maybe it was because I didn't set HTML tag to figure? @@Gearyco
Sometimes I wonder where have you picked up all this knowledge from? :D
15-20 years 🥵
am i the only one or why can't i find var(--card-gap) in the cheat sheet?
fr-card-gap - it’s part of Frames
@@Gearyco ah ok, on 54:36 you use this variable. thought this was an acss variable at best 👍
@@aportmannch It was a variable I made in a separate lesson, I believe.
Ive wanted to do homework but dont have wpcodebox:(
There are other options. In many cases, the builder itself allows you to add custom CSS via a style sheet. codebox is simply my favorite way to do it, but it’s not required.
F****** Bev. lol
I've been building websites since 1999 and this video with its talk about token and clamp nonsense makes web design with a builder seem more difficult What a Nonsensical jargon. Clamp *2 clamp *3. But images with 3rem 4rem. I build sites before there were training courses. I was a teacher at school myself, but I refuse to talk like this.. sorry
Tokens and clamps have nothing to do with page builders my friend. No need to stay stuck in 1999. It's 2023. CSS is far more efficient and powerful now. Time to level up!
@Gearyco token = css variable. --var? And,clamp is a waste of time. I don't know,what browser you use but I don't need to,change my font-size on mobile and desktop. And if I really want we still don't need clamp. We still have round wheels on or cars.. why make bumpy ride with hyper modern sqaure wheels. I've test your clamp theory but didn't find a benefit.. sorry.. that's my finding.
I want a 60px h1 heading on my hero. How you gonna do that without media queries?@@peterpinkster
I'm starting to get troll vibes.
@Gearyco I see you get pissed because i am not agree with you.. and ask me a kindergarten question so its better I leave you alone.. you can't handle criticism...shame
@@peterpinkster 1. I'm not pissed. 2. You clearly can't answer a simple question. That's on you, my guy.
Hey Kevin, I want with all my heart to watch your videos and learn from you, for real, but why every time I play your videos 85% of them are you talking a lot of same words and repeating them?
Come on man get straight to the point it's 7:13 minute and if you analyze all you said was that grid is better then flexbox.
I would really appreciate if you could shorten your unnecessary words. Time is valuable.
Important points made in the first 7 minutes...
- Page Builders encourage flexbox, when they should be encouraging grid (be careful!)
- Most page builder users only use flexbox, which is wrong
- What to expect from this video
- This training just scratches the surface of CSS Grid (Important so that you know there's more to grid than what's shown here)
- CSS Grid is superior for content layout (but flex is useful for positioning)
- Grid is for creating columnized dual-axis layouts
- Grid gives you layout control from the parent container
- Grid offers more control over size and placement of elements
- Grid offers more control for element re-ordering
- Grid offers more robust control for responsiveness
- Grid supports flexbox alignment controls
- Grid supports named layout areas
- Grid is magical for overlapping elements
- Visual demonstration of grid vs flexbox for 2-column layout
You either: (1) Severely lack listening comprehension skills or (2) severely lack the processing skills to realize what's important and not important.
People like my content because it's in-depth and covers everything you need to know. It's also 100% free and has no ads on it. If you don't like something about my content, then don't watch it. I'm not going to change my entire teaching style and personality to fit the desires of a random UA-cam commenter. You can also use the fast forward button. Or the 2x speed button. Or whatever you need to do other than complain about FREE content. Saying "get to the point" when I made 14 important points in the 7 minute stretch of video you're calling out is fucking lunacy.