ACSS 101.04: Fluid Responsive, Scale-Based, Contextual Spacing
HTML-код
- Опубликовано: 2 май 2024
- As is true of typography, the spacing system in Automatic.css is automatically responsive and scale-based, but it also happens to be one of the only contextual spacing systems in existence.
That's because ACSS has been at the forefront of defining and establishing the concept of contextual spacing in web design.
In this lesson, you'll learn how the ACSS spacing system works and how to apply spacing within the context of a real project.
Covered:
- Base Spacing Controls
- Spacing Scale Controls
- Section Spacing Controls
- Gutter
- Anatomy of a Typical Layout Using Spacing Variables
- Spacing Variables vs Contextual Spacing Variables
- Section Padding Classes
- Auto Contextual Spacing'
- Contextual vs non-contextual spacing
- Adding spacing with variables
- Adding space with classes (gap, margin, padding)
Not Covered:
As is true for sections, ACSS has header spacing classes that control the block spacing of the header while maintaining a proper gutter. You can learn more about these in documentation and I'll try to cover these in the lesson about headers.
---
Interested in using Automatic.css on your sites and accessing the private ACSS support and strategy community? Get a license here: automaticcss.com
Interested in using Frames on your sites and accessing the private Frames support and strategy community? Get a license here: getframes.io
Want more helpful dev tutorials and agency-related trainings? Check out Kevin's channel: / @gearyco 
Развлечения
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!
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 really like that you do not only create an awesome product, but also teach how to use it!
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.
Now its Gearyflix time:)
14 hour road trip through the Canadian Rockies: Awesome
Steak supper: excellent
Watching another ACSS101 before getting on a cruise? Priceless!
The way you've presented it makes perfect sense Kevin. Everytime I see a new 101 video I'm excited :) Great series!
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!
I like the refactored padding classes. I have been saying it, we will soon need to be ACSS Certified.
Learn ACSS in one week 🎉🎉
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.
No need to re record, this was awesome.
Thanks Kevin. Awesome info. ACSS is such an invaluable tool. I can’t imagine not having it.
🙌
You are explaining this very well, including the reasons why ACSS is built the way it is. Thanks.
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.
Great explanation Kevin. Keep them coming.
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.
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.
Well-explained with much Geary energy 👏
Kevin, great explanations the video. Conceptually, it is clear but I'll need to play with things for it to truly set in.
Very good Kevin, makes sense.
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! 💪🏻
To answer, I like how most spacing decisions should be contextualised and makes sense. Looking forward to more releases of the tutorials
Another excellent tutorial. Thank you, Kevin! You are a natural teacher, as I said many times. Don't change anything!
Clear! No re-recording 🎉
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.
Thank you Kevin, very useful focus 😀
No rerecording needed...you NAILED it!
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. 👏
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!
Contextual spacing is one of my favorite things about ACSS.
This training is the best I have seen
Thanks for the video. Everything is explained in a clear way.
Great lesson on the contextual spacing.
Please add a timestamps:) And great work as always:)
They’re coming
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.
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.
No you don't need to re-record, this is the best explanation.
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.
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).
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)
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.
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.
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.
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
The only thing i miss here is "peace" at the end of the video.