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

แชร์
ฝัง
  • เผยแพร่เมื่อ 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
  • บันเทิง

ความคิดเห็น • 69

  • @bjon3048
    @bjon3048 19 วันที่ผ่านมา

    I really like that you do not only create an awesome product, but also teach how to use it!

  • @coolwebdesign8747
    @coolwebdesign8747 2 หลายเดือนก่อน +8

    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.

  • @KristiyanIvanov
    @KristiyanIvanov 2 หลายเดือนก่อน +8

    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!

  • @issakhlief
    @issakhlief 2 หลายเดือนก่อน +4

    Learn ACSS in one week 🎉🎉

  • @alex_vie
    @alex_vie 2 หลายเดือนก่อน

    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!

  • @dahunsi
    @dahunsi 2 หลายเดือนก่อน +2

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

  • @reggiewaysama
    @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.

  • @abdulwaheedorg
    @abdulwaheedorg 2 หลายเดือนก่อน +3

    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.

  • @mrErycki
    @mrErycki 2 หลายเดือนก่อน +4

    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
      @koperkuba 2 หลายเดือนก่อน +1

      Now its Gearyflix time:)

  • @RobCooper
    @RobCooper 2 หลายเดือนก่อน +3

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

  • @ceescoenen
    @ceescoenen 2 หลายเดือนก่อน

    Clear! No re-recording 🎉

  • @clausmorlock
    @clausmorlock 2 หลายเดือนก่อน

    Well-explained with much Geary energy 👏

  • @greggdavis
    @greggdavis 2 หลายเดือนก่อน +1

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

  • @DanielNeubauer
    @DanielNeubauer 2 หลายเดือนก่อน

    Great explanation Kevin. Keep them coming.

  • @SamFrysteen
    @SamFrysteen 2 หลายเดือนก่อน +2

    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
      @AutomaticCSS  2 หลายเดือนก่อน +2

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

  • @phobzy85
    @phobzy85 2 หลายเดือนก่อน +1

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

  • @nostressirish2767
    @nostressirish2767 หลายเดือนก่อน

    Very good Kevin, makes sense.

  • @vasko456
    @vasko456 2 หลายเดือนก่อน

    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.

  • @eucalyptech
    @eucalyptech 2 หลายเดือนก่อน

    Thank you Kevin, very useful focus 😀

  • @Jim.Hummel
    @Jim.Hummel 2 หลายเดือนก่อน

    No rerecording needed...you NAILED it!

  • @davidwalls2304
    @davidwalls2304 2 หลายเดือนก่อน

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

  • @LupusDesign
    @LupusDesign 2 หลายเดือนก่อน

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

  • @CoThinking
    @CoThinking 2 หลายเดือนก่อน

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

  • @basilbabaa1628
    @basilbabaa1628 2 หลายเดือนก่อน

    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
      @AutomaticCSS  2 หลายเดือนก่อน

      🎉🎉🎉 great win! 💪🏻

  • @ReubenHochstetler
    @ReubenHochstetler 2 หลายเดือนก่อน

    Contextual spacing is one of my favorite things about ACSS.

  • @stewartr7648
    @stewartr7648 2 หลายเดือนก่อน

    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.

  • @jasonvargas4798
    @jasonvargas4798 2 หลายเดือนก่อน

    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.

  • @chrisgreen5711
    @chrisgreen5711 2 หลายเดือนก่อน

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

  • @kevinroberts3789
    @kevinroberts3789 2 หลายเดือนก่อน

    Crystal clear. Do not re-record!

  • @azuzaazuza
    @azuzaazuza 2 หลายเดือนก่อน

    No need to re record, this was awesome.

  • @lencarter9070
    @lencarter9070 2 หลายเดือนก่อน

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

  • @bluetheredpanda
    @bluetheredpanda 2 หลายเดือนก่อน

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

  • @koperkuba
    @koperkuba 2 หลายเดือนก่อน +1

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

    • @AutomaticCSS
      @AutomaticCSS  2 หลายเดือนก่อน

      They’re coming

  • @stphnmwlkr
    @stphnmwlkr 2 หลายเดือนก่อน

    Great lesson on the contextual spacing.

  • @tjveach
    @tjveach 2 หลายเดือนก่อน

    This training is the best I have seen

  • @Europommie
    @Europommie 2 หลายเดือนก่อน

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

  • @basilbabaa1628
    @basilbabaa1628 2 หลายเดือนก่อน

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

  • @slack_r
    @slack_r 2 หลายเดือนก่อน

    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
      @AutomaticCSS  2 หลายเดือนก่อน

      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
    @itspraveensharma 2 หลายเดือนก่อน

    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
      @AutomaticCSS  2 หลายเดือนก่อน +1

      It’s available now.

  • @beollan
    @beollan 2 หลายเดือนก่อน

    No you don't need to re-record, this is the best explanation.

  • @febryanvaldo
    @febryanvaldo หลายเดือนก่อน

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

    • @AutomaticCSS
      @AutomaticCSS  หลายเดือนก่อน

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

  • @membershipmovement
    @membershipmovement 2 หลายเดือนก่อน

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

    • @AutomaticCSS
      @AutomaticCSS  หลายเดือนก่อน

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

  • @jzajzz
    @jzajzz หลายเดือนก่อน

    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
      @AutomaticCSS  หลายเดือนก่อน +1

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

  • @jzajzz
    @jzajzz 2 หลายเดือนก่อน

    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
      @AutomaticCSS  2 หลายเดือนก่อน

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

  • @Luca-ui3rn
    @Luca-ui3rn 2 หลายเดือนก่อน

    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
      @AutomaticCSS  2 หลายเดือนก่อน +1

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

  • @palagorn
    @palagorn 2 หลายเดือนก่อน

    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
      @AutomaticCSS  2 หลายเดือนก่อน

      This is explained at 5:55

    • @palagorn
      @palagorn 2 หลายเดือนก่อน

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

    • @AutomaticCSS
      @AutomaticCSS  2 หลายเดือนก่อน

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

  • @sophiemulders
    @sophiemulders หลายเดือนก่อน

    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
      @AutomaticCSS  หลายเดือนก่อน +1

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

    • @sophiemulders
      @sophiemulders หลายเดือนก่อน

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

  • @tir7898
    @tir7898 2 หลายเดือนก่อน

    Thank you! (for the algo)

  • @user-eo1vz9lt8g
    @user-eo1vz9lt8g 2 หลายเดือนก่อน

    is the sandbox environment now available?

    • @AutomaticCSS
      @AutomaticCSS  2 หลายเดือนก่อน +1

      Not yet, we're trying to figure out a suitable licensing situation for a seamless experience.

    • @user-eo1vz9lt8g
      @user-eo1vz9lt8g 2 หลายเดือนก่อน

      @@AutomaticCSS ok, thanks

  • @iamwaqasdotcom
    @iamwaqasdotcom 2 หลายเดือนก่อน

    The only thing i miss here is "peace" at the end of the video.