To answer your question Kevin, it's a crystal-clear example of how to teach and how to explain all needed to others. So NO, you don't have to rerecord anything. It's perfect exactly how it is. Thank you.
I thought that I had seen it all in the previous video about typography, and I was already blown away, but man... we are witnessing a revolution in how to build and manage websites. The right way!
You explained it very well. I'm hoping to see a full tutorial at the end of this course to make a full webpage by starting from setting up ACSS. I just wanna see how do you setup ACSS to build a webpage.
This is clearly explained and there's no need for rephrasing. Continue sharing new content, and I'll cancel Netflix. Great work, you're the best! Consider developing a new page builder with ASCC integration.
Explanation for me was clear and perfect ... for newbies, would have been good to have a different frame with different class names, that still used contextual spacing to show how it relates site wide ... eg: pretending to have 2 different frames on different pages but the contextual spacing keeps their layout spacing in sync. Also... would be great to have some extra default contextual spacing values ... --card-gap and --card-padding are ones I always make.
Crystal-clear to me too. No need to re-record anything Kevin. As I stated log time ago, you are born to teach. Thanks,man. I'm glad I purchased ACSS LTD.
I just had to come back here and post again. Prior to watching this video I had been FIGHTING for hours upon hours with a Mega Menu in Bricks. While I hate them, this customer wants one. After watching this video however, I went back in stripped all the styling from the elements in the section, applied BEM classes to every component, used the PROPER contextual spacing variables and some of the appropriate utility classes available in ACSS as well. AND NOW.... This Menu now looks fantastic... perfectly spaced and perfectly scales from 2560 down to 992. This was a monumental advance in applied learning for me today! Thank you again Kevin and entire ACSS team... Appreciate you all so much!
Regarding to your question: you explain all that very well. From my point of view there is no need to re-record that video and try to explain something with different aproaches. It cannot be presented more clear. Thanks for that big effort you put into this!
Thanks Kevin, this just solidify my perspective on using the proper contextual variables on spacings rather than just using rem values. I know there's nothing wrong on using rems but with this type of approach? Man, this is a lot better, makes the site more maintainable and make sure that we're using CSS globally when handling gaps on sections.
This makes a ton of sense, honestly before watching this I didn't really understand how to use this to its fullest, now its super clear. Can't wait for the rest of this course.
Damn you’re on fire 😂 Seriously though, love how you’ve been able to break down the concepts so far - the individual concepts, but also the overall lesson plan. Such a great job. 👏
Have you noticed the small typo in the video thumbnail "101.03". Loving this series and very much looking forward to the first release of v3. Thanks Kevin.
Love the explanations and seeing visually how the spacing works. Have had a look at the documentation as wondered whether there was the equivalent of a spacing cheat sheet. It's just a thought but I would appreciate being able to glance at an image and know where the various spacing applies (e.g. coloured areas). I'm sure it becomes second nature, but learning any system, part of the barrier is becoming fluent in the terminology. Often being able to glance at an image and recall 'ah yep, the pink area = content gap' shortcuts the double-checking that I have it right. I can see you have done similar images demonstrating content width for example.
It’s the same as web design in general. Look up “box model css” or go through my PB101 course. There’s only three types of spacing. Once you learn the three types you’re good to go.
25:53 I understand why it makes sense to have a static variable with the icon and the heading..it's as if the icon is part of the heading. However I'm not sure if I'm confident enough to know when to use the static variable vs contextual in other use cases when it comes up on the fly. Is there something that you can pinpoint that should be a trigger for me to pause and consider using static variables
Some of it is just experience. But it’s not too big of a deal when you’re using a class-based workflow because a mistake can be fixed everywhere it occurs by changing one value. So, don’t stress about it too much (assume you’re using classes the way I teach it).
The video is clear to me, and thank you very much for the explanation. However, I’m wondering how I should explain this to the designer and how they should prepare their Figma file to start working. There are quite a few separate calculations here for mobile and desktop. From what I understand, changing the scale factor would require the designer to manually adjust all XS-XXL sizes in Figma, which would be a lot of unnecessary work. Is there perhaps an easier, ready-made way to handle this?
There’s no need to match it. Just have them use a ratio for different font sizes on desktop. How the text scales on mobile is irrelevant as long as it looks good. We don’t live in an age where you have to make things pixel perfect anymore.
Thanks Kevin for speeding up the ACSS 101 tuts...really appreciate your efforts. Waiting for ACSS 3.0 launch, very hard to stick to current system after watching real time editing in the play. Any idea about when would it be available for us?
Hi Kevin, thanks for the video :) So far, if I wanted to adjust the padding of a single section, for example, I adjusted it to ID level instead of using a utility class... would you always use a utility class for such a case? because I have disabled most utility classes... what would be best practice in this case? Many thanks in advance!
Question; the standard spacing ( the pixel values you put in there) are what drive the space variables right ? (-space-m etc) Can i calculate what the values are? So i can put the same spacing in my designs. ( waiting for F4F, but in meanwhile i try to standardize my design work based of of acss) 😊
Hi, I try to figure out. how to set section padding-left, padding-right in acss. Normally acss would use --space-m for left, right padding in section automatically. but I would like to set default padding for left, right at --space-s or something else otherwise i need to set every section padding left, right value manually. where i can set global padding-left, padding-right for section in acss ?
What if client want a pixel perfect design starting with a basic spacing of 15px (M) than 30px (L) 45(XL) 60px (XXL) 75px no variabile available? Is there a way to set space-s as the base?
Am I correct to say the automatic spacing is applied to block but not DIVs since Divs are unstyled?.. this is what's happening for me as I'm playing around with it
To answer your question Kevin, it's a crystal-clear example of how to teach and how to explain all needed to others. So NO, you don't have to rerecord anything. It's perfect exactly how it is. Thank you.
I thought that I had seen it all in the previous video about typography, and I was already blown away, but man... we are witnessing a revolution in how to build and manage websites. The right way!
You explained it very well.
I'm hoping to see a full tutorial at the end of this course to make a full webpage by starting from setting up ACSS.
I just wanna see how do you setup ACSS to build a webpage.
The way you've presented it makes perfect sense Kevin. Everytime I see a new 101 video I'm excited :) Great series!
14 hour road trip through the Canadian Rockies: Awesome
Steak supper: excellent
Watching another ACSS101 before getting on a cruise? Priceless!
This is clearly explained and there's no need for rephrasing. Continue sharing new content, and I'll cancel Netflix. Great work, you're the best! Consider developing a new page builder with ASCC integration.
Now its Gearyflix time:)
Explanation for me was clear and perfect ... for newbies, would have been good to have a different frame with different class names, that still used contextual spacing to show how it relates site wide ... eg: pretending to have 2 different frames on different pages but the contextual spacing keeps their layout spacing in sync.
Also... would be great to have some extra default contextual spacing values ... --card-gap and --card-padding are ones I always make.
We have these for frames users but we haven’t made them officially part of ACSS yet. It’ll probably happen soon.
You are explaining this very well, including the reasons why ACSS is built the way it is. Thanks.
Thanks Kevin. Awesome info. ACSS is such an invaluable tool. I can’t imagine not having it.
🙌
I really like that you do not only create an awesome product, but also teach how to use it!
You make perfect sense explaining it. Learning has never been so much fun! Thank you
Clear even for scattered-blonde me! I'll need to do more implementation before I"m solid, but you explained this SO well -- thank you!
I like the refactored padding classes. I have been saying it, we will soon need to be ACSS Certified.
Crystal-clear to me too. No need to re-record anything Kevin. As I stated log time ago, you are born to teach.
Thanks,man. I'm glad I purchased ACSS LTD.
I just had to come back here and post again. Prior to watching this video I had been FIGHTING for hours upon hours with a Mega Menu in Bricks. While I hate them, this customer wants one. After watching this video however, I went back in stripped all the styling from the elements in the section, applied BEM classes to every component, used the PROPER contextual spacing variables and some of the appropriate utility classes available in ACSS as well. AND NOW.... This Menu now looks fantastic... perfectly spaced and perfectly scales from 2560 down to 992. This was a monumental advance in applied learning for me today! Thank you again Kevin and entire ACSS team... Appreciate you all so much!
🎉🎉🎉 great win! 💪🏻
Regarding to your question: you explain all that very well. From my point of view there is no need to re-record that video and try to explain something with different aproaches. It cannot be presented more clear. Thanks for that big effort you put into this!
Another excellent tutorial. Thank you, Kevin! You are a natural teacher, as I said many times. Don't change anything!
To answer, I like how most spacing decisions should be contextualised and makes sense. Looking forward to more releases of the tutorials
Thanks Kevin, this just solidify my perspective on using the proper contextual variables on spacings rather than just using rem values. I know there's nothing wrong on using rems but with this type of approach? Man, this is a lot better, makes the site more maintainable and make sure that we're using CSS globally when handling gaps on sections.
The explanation of using context variable and the static variable was spot on Kevin, makes complete sense. Another great tutorial dude 👍
This makes a ton of sense, honestly before watching this I didn't really understand how to use this to its fullest, now its super clear. Can't wait for the rest of this course.
No rerecording needed...you NAILED it!
Contextual spacing is one of my favorite things about ACSS.
No need to re record, this was awesome.
Please add a timestamps:) And great work as always:)
They’re coming
Learn ACSS in one week 🎉🎉
The explanations of each spacing control with demonstrations makes things very clear. Will just need time now to apply them. Thanks! Thanks! Thanks!
Crystal clear. Do not re-record!
Damn you’re on fire 😂
Seriously though, love how you’ve been able to break down the concepts so far - the individual concepts, but also the overall lesson plan. Such a great job. 👏
Kevin, great explanations the video. Conceptually, it is clear but I'll need to play with things for it to truly set in.
Makes complete sense Kevin! Great explanation!
Great explanation Kevin. Keep them coming.
This training is the best I have seen
Thank you Kevin, very useful focus 😀
Well-explained with much Geary energy 👏
Thanks for the video. Everything is explained in a clear way.
Clear! No re-recording 🎉
Have you noticed the small typo in the video thumbnail "101.03". Loving this series and very much looking forward to the first release of v3. Thanks Kevin.
Very good Kevin, makes sense.
Great lesson on the contextual spacing.
No you don't need to re-record, this is the best explanation.
Love the explanations and seeing visually how the spacing works. Have had a look at the documentation as wondered whether there was the equivalent of a spacing cheat sheet. It's just a thought but I would appreciate being able to glance at an image and know where the various spacing applies (e.g. coloured areas). I'm sure it becomes second nature, but learning any system, part of the barrier is becoming fluent in the terminology. Often being able to glance at an image and recall 'ah yep, the pink area = content gap' shortcuts the double-checking that I have it right. I can see you have done similar images demonstrating content width for example.
It’s the same as web design in general. Look up “box model css” or go through my PB101 course. There’s only three types of spacing. Once you learn the three types you’re good to go.
25:53 I understand why it makes sense to have a static variable with the icon and the heading..it's as if the icon is part of the heading.
However I'm not sure if I'm confident enough to know when to use the static variable vs contextual in other use cases when it comes up on the fly. Is there something that you can pinpoint that should be a trigger for me to pause and consider using static variables
Some of it is just experience. But it’s not too big of a deal when you’re using a class-based workflow because a mistake can be fixed everywhere it occurs by changing one value. So, don’t stress about it too much (assume you’re using classes the way I teach it).
The video is clear to me, and thank you very much for the explanation. However, I’m wondering how I should explain this to the designer and how they should prepare their Figma file to start working. There are quite a few separate calculations here for mobile and desktop. From what I understand, changing the scale factor would require the designer to manually adjust all XS-XXL sizes in Figma, which would be a lot of unnecessary work. Is there perhaps an easier, ready-made way to handle this?
There’s no need to match it. Just have them use a ratio for different font sizes on desktop. How the text scales on mobile is irrelevant as long as it looks good. We don’t live in an age where you have to make things pixel perfect anymore.
Thanks Kevin for speeding up the ACSS 101 tuts...really appreciate your efforts. Waiting for ACSS 3.0 launch, very hard to stick to current system after watching real time editing in the play. Any idea about when would it be available for us?
It’s available now.
Hi Kevin, thanks for the video :) So far, if I wanted to adjust the padding of a single section, for example, I adjusted it to ID level instead of using a utility class... would you always use a utility class for such a case? because I have disabled most utility classes... what would be best practice in this case? Many thanks in advance!
yes, this is a perfect use case for utility classes. ID styling is far less efficient and much more inflexible.
How do I turn off the gutter for a section, but still keep the section blocking?
What’s the use case? There’s probably a better way to do what you’re trying to do.
Question; the standard spacing ( the pixel values you put in there) are what drive the space variables right ? (-space-m etc)
Can i calculate what the values are?
So i can put the same spacing in my designs. ( waiting for F4F, but in meanwhile i try to standardize my design work based of of acss) 😊
You would use the max value on desktop design and min value on mobile design. Is that what you mean?
@@AutomaticCSS yes thanks! 🙏i was thinking to difficult 😅
Hi, I try to figure out. how to set section padding-left, padding-right in acss. Normally acss would use --space-m for left, right padding in section automatically. but I would like to set default padding for left, right at --space-s or something else otherwise i need to set every section padding left, right value manually. where i can set global padding-left, padding-right for section in acss ?
This is explained at 5:55
@@AutomaticCSS even though i set gutter to 10px it is still not use 10px in mobile instead it is use 24px.
@@palagorn Post in the support group with details and we can help you there.
What if client want a pixel perfect design starting with a basic spacing of 15px (M) than 30px (L) 45(XL) 60px (XXL) 75px no variabile available? Is there a way to set space-s as the base?
There’s no such thing as pixel perfect design on the modern web
@@AutomaticCSS i agree, but there are so many agencies that still want it :(
Am I correct to say the automatic spacing is applied to block but not DIVs since Divs are unstyled?.. this is what's happening for me as I'm playing around with it
Divs are display block so they don’t support gap.
is the sandbox environment now available?
Not yet, we're trying to figure out a suitable licensing situation for a seamless experience.
@@AutomaticCSS ok, thanks
It's a bit confusing, until you use it 😊😊😊
Yes, you have to interact with this stuff for it to make sense.
Thank you! (for the algo)
The only thing i miss here is "peace" at the end of the video.