Beautifully explained and demonstrated, Kyle. It's definitely easy to fall into this trap with frameworks that provide a default content spacing, if you just blanket apply it to all elements. Nice work buddy.
Thanks! This is just what I needed. Spacing always seems more difficult than it has to be, and you explained how to fix these three layouts perfectly. Here's a comment for the algorithm.
Great video. But personaly have little bit problem with that gap between paragraphs in blog example. It is smaller than the space between heading and first paragraph, so it makes the second paragraph little bit out of that group.
Hi kyle, Great video. How does the spacing adjust with different devices widths? I find it hard in generate blocks pro and I am still figuring out a way to group things like headings, sub headings and labels inside a card and then there are buttons.
Very interesting topic. I understand the spacing that you do in figma but I would be interested in knowing if you have any css rules for applying the figma spacing to margin and/or padding , besides the p+Hn margin-top example. Thanks
Your choices are really to add margin or to put things in a container and have multiple gap values. So much of the way you go on that depends on how you like to build. I think the challenge here is the "developer" in us wants this to be a simple math equation with a rule and declaration that solves it. But design is only part science - it's also an art... And art doesn't always work that way. There's a balance for sure!
@@TheAdminBar Oh, sure! I knew you'd have a good reason and that makes sense. I have some odd affection for odd numbers . . . but I'll take your advice, of course.
this channel is pure gold!
Beautifully explained and demonstrated, Kyle. It's definitely easy to fall into this trap with frameworks that provide a default content spacing, if you just blanket apply it to all elements. Nice work buddy.
Thanks so much, Dave 🙌
Thanks! This is just what I needed. Spacing always seems more difficult than it has to be, and you explained how to fix these three layouts perfectly. Here's a comment for the algorithm.
Thanks so much 🙌 I'm really glad to hear it was helpful!
excellent: easy to understand in the real world. Thank you, Kyle.
Nice CSS technique: p+h2
Nice one!!
Thanks! Glad you enjoyed it 🙌
Great video. But personaly have little bit problem with that gap between paragraphs in blog example. It is smaller than the space between heading and first paragraph, so it makes the second paragraph little bit out of that group.
Hello, can you do a live broadcast of the perfmatter plug-in tutorial?
We have a full playlist of them! ruclips.net/video/IQBcXxhXkq0/видео.html
Hi kyle, Great video. How does the spacing adjust with different devices widths? I find it hard in generate blocks pro and I am still figuring out a way to group things like headings, sub headings and labels inside a card and then there are buttons.
Very interesting topic. I understand the spacing that you do in figma but I would be interested in knowing if you have any css rules for applying the figma spacing to margin and/or padding , besides the p+Hn margin-top example. Thanks
Your choices are really to add margin or to put things in a container and have multiple gap values. So much of the way you go on that depends on how you like to build.
I think the challenge here is the "developer" in us wants this to be a simple math equation with a rule and declaration that solves it. But design is only part science - it's also an art... And art doesn't always work that way.
There's a balance for sure!
Great video - my next client who doesn't understand spacing will get a link! 😅
Why do you use an 8 pt grid rather than, say, a 6, 7, or 9?
It's just the most common convention. I probably would go with either 8 or 10 to make things simple. I like 8 cause it lines up nicely with REM units.
@@TheAdminBar Oh, sure! I knew you'd have a good reason and that makes sense. I have some odd affection for odd numbers . . . but I'll take your advice, of course.
Should it be 48px not 40 ??
Soundtrack is async to video. You should fix that or check in the future before you upload.
They were literally recorded simultaneously, so I don't think that's possible.
@@TheAdminBar then it must be your setup in general, as it feels like the voice is async and not coming out your mouth.
Good