ACSS 101.04: Fluid Responsive, Scale-Based, Contextual Spacing

Рет қаралды 3,089

2 ай бұрын

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

Пікірлер: 68

@coolwebdesign8747 Ай бұрын

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.

@KristiyanIvanovS Ай бұрын

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!

@basilbabaa1628 Ай бұрын

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!

@AutomaticCSS Ай бұрын

🎉🎉🎉 great win! 💪🏻

@jasonvargas4798 Ай бұрын

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.

@RobCooper Ай бұрын

14 hour road trip through the Canadian Rockies: Awesome Steak supper: excellent Watching another ACSS101 before getting on a cruise? Priceless!

@chrisgreen5711 Ай бұрын

The explanation of using context variable and the static variable was spot on Kevin, makes complete sense. Another great tutorial dude 👍

@alex_vie Ай бұрын

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!

@reggiewaysama Ай бұрын

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.

@mrErycki Ай бұрын

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.

@koperkuba Ай бұрын

Now its Gearyflix time:)

@abdulwaheedorg Ай бұрын

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.

@basilbabaa1628 Ай бұрын

Thanks Kevin. Awesome info. ACSS is such an invaluable tool. I can’t imagine not having it.

@AutomaticCSS Ай бұрын

🙌

@dahunsi Ай бұрын

I like the refactored padding classes. I have been saying it, we will soon need to be ACSS Certified.

@azuzaazuza Ай бұрын

No need to re record, this was awesome.

@SamFrysteen Ай бұрын

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.

@AutomaticCSS Ай бұрын

We have these for frames users but we haven’t made them officially part of ACSS yet. It’ll probably happen soon.

@issakhlief Ай бұрын

Learn ACSS in one week 🎉🎉

@greggdavis Ай бұрын

You are explaining this very well, including the reasons why ACSS is built the way it is. Thanks.

@phobzy85 Ай бұрын

The way you've presented it makes perfect sense Kevin. Everytime I see a new 101 video I'm excited :) Great series!

@stewartr7648 Ай бұрын

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.

@clausmorlock Ай бұрын

Well-explained with much Geary energy 👏

@DanielNeubauer Ай бұрын

Great explanation Kevin. Keep them coming.

@vasko456 Ай бұрын

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.

@ceescoenen Ай бұрын

Clear! No re-recording 🎉

@davidwalls2304 Ай бұрын

Kevin, great explanations the video. Conceptually, it is clear but I'll need to play with things for it to truly set in.

@LupusDesign Ай бұрын

Another excellent tutorial. Thank you, Kevin! You are a natural teacher, as I said many times. Don't change anything!

@nostressirish2767 24 күн бұрын

Very good Kevin, makes sense.

@eucalyptech Ай бұрын

Thank you Kevin, very useful focus 😀

@CoThinking Ай бұрын

To answer, I like how most spacing decisions should be contextualised and makes sense. Looking forward to more releases of the tutorials

@Jim.Hummel Ай бұрын

No rerecording needed...you NAILED it!

@lencarter9070 Ай бұрын

The explanations of each spacing control with demonstrations makes things very clear. Will just need time now to apply them. Thanks! Thanks! Thanks!

@bluetheredpanda Ай бұрын

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. 👏

@kevinroberts3789 Ай бұрын

Crystal clear. Do not re-record!

@ReubenHochstetler Ай бұрын

Contextual spacing is one of my favorite things about ACSS.

@slack_r Ай бұрын

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.

@AutomaticCSS Ай бұрын

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.

@itspraveensharma Ай бұрын

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?

@AutomaticCSS Ай бұрын

It’s available now.

@Europommie Ай бұрын

Thanks for the video. Everything is explained in a clear way.

@koperkuba Ай бұрын

Please add a timestamps:) And great work as always:)

@AutomaticCSS Ай бұрын

They’re coming

@tjveach Ай бұрын

This training is the best I have seen

@stphnmwlkr Ай бұрын

Great lesson on the contextual spacing.

@Luca-ui3rn Ай бұрын

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!

@AutomaticCSS Ай бұрын

yes, this is a perfect use case for utility classes. ID styling is far less efficient and much more inflexible.

@febryanvaldo 23 күн бұрын

It's a bit confusing, until you use it 😊😊😊

@AutomaticCSS 23 күн бұрын

Yes, you have to interact with this stuff for it to make sense.

@jzajzz Ай бұрын

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

@AutomaticCSS Ай бұрын

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).

@jzajzz 9 күн бұрын

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

@AutomaticCSS 8 күн бұрын

Divs are display block so they don’t support gap.

@sophiemulders 26 күн бұрын

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) 😊

@AutomaticCSS 25 күн бұрын

You would use the max value on desktop design and min value on mobile design. Is that what you mean?

@sophiemulders 25 күн бұрын

@@AutomaticCSS yes thanks! 🙏i was thinking to difficult 😅

@membershipmovement Ай бұрын

How do I turn off the gutter for a section, but still keep the section blocking?

@AutomaticCSS Ай бұрын

What’s the use case? There’s probably a better way to do what you’re trying to do.

@palagorn Ай бұрын

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 ?

@AutomaticCSS Ай бұрын

This is explained at 5:55

@palagorn Ай бұрын

@@AutomaticCSS even though i set gutter to 10px it is still not use 10px in mobile instead it is use 24px.

@AutomaticCSS Ай бұрын

@@palagorn Post in the support group with details and we can help you there.