ACSS 101.05: Smart Spacing

Smart Spacing is one of the most important and powerful spacing features in Automatic.css. It's what allows for achieving perfectly even spacing in your page building workflow (when desired) and perfect rhythmic spacing in your rich content.
It also provides you unprecedented control over rich content spacing that isn't provided by page builders or any other framework, saving you the time and hassle of writing complex custom CSS.
In this lesson you'll learn:
What is Smart Spacing?
Why does Smart Spacing exist? What problems does it solve?
What is user-agent and browser-reset styling and why is it undesirable?
Why gaps should be used for even spacing and why gap isn't possible when user agent styling or bad builder resets are being used.
How to use ACSS to control rich content spacing.
The .smart-spacing utility class for manually adding smart spacing to any container.
How to reference an smart spacing control with a variable.
--
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

[@ReubenHochstetler]

Smart spacing is a life-changing feature for anyone who loves consistency.

[@Jim.Hummel]

Another Quality of Life feature that increases the value of ACSS! Makes everything so smooth, it's like driving down a freshly paved highway!! Thanks, Kevin and Team!!!!!

[@chrisgreen5711]

OMG Kevin, I just didn't realise how unbelievably useful smart spacing is - this is a killer consistency feature. You all certainly do deserve massive pats on the back!

[@bjoernzosel]

man, this was always a big issue on my websites ... you are really making the life of web designers much easier. I just bought the LTD :) This is this is Bricks on steroids :D 🔥🔥🔥

[@vaughanprint]

Every aspect is catered for. Very fine grained, down to the last detail… I must keep practicing these testimonial statements.

[@IssaKhlief]

Happy to see videos rolling quickly, it's good to understand ACSS faster to start using it efficiently directly 🎉

[@stphnmwlkr]

Brilliant!!! Having to hold off until the official release is killing me... great job on the product and these videos.

[@AutomaticCSS]

No need to hold off. If it's a new project, start with 3.0.

[@GrantCharge]

@@AutomaticCSS Okay to start a new project in Generate with 3.0?

[@stphnmwlkr]

@@AutomaticCSS I wish. All of my projects are in a multisite environment so not really an option right now.

[@AutomaticCSS]

@@GrantCharge The dashboard is not fully compatible in Gutenberg yet.

[@nostressirish2767]

Love it. Brilliant stuff

[@phobzy85]

This is the ultimate time saver! This has been so well thought out and implemented. Kudos!

[@karlguildford6588]

That time in the basement has been well spent😀My 20 year old solution for the RT editor spacing is now looking forward to a well deserved holiday. Thanks

[@davidwalls2304]

Smart spacing -- more than just a name, it's like magic. I thought I understood conceptually what it did before hand but with all of the new controls, this is consistency magic.

[@LupusDesign]

Another important lesson. Thank you, Kevin.

[@DanielNeubauer]

I agree with Reuben - if you are a sucker for detail and consistency - you will love smart spacing.

[@grasshopperweb]

These tutorials were deeply needed and are highly valuable, thank you very much for creating these. One comment which you can obviously ignore, I don't see the value of continuing to harp on other frameworks for not having features you're describing. Personally, I haven't tried the other frameworks nor have the budget to, so I don't get any value from these kinds of statements. I'm only here to learn how to best utilize this amazing tool, I'm not shopping. I get the sense you're aging your videos faster by doing it as well as many will start carrying those features in the future if they're useful.

[@AutomaticCSS]

1. It's important for people who are learning CSS and web design in general to understand what a framework is doing that is far outside the scope of what their page builder or another framework is capable of doing. This is just good general information to have. 2. A common argument is that "all frameworks are the same" or "a framework is a framework." The only way to combat that misinformation is to point out when ACSS is doing something that no other framework is doing. 3. While *you* are sold and are a user, there are thousands who will watch this who haven't purchased a license yet who are very much interested in knowing what ACSS does vs other frameworks they might be considering. I can't just pretend that their desire to understand the differences isn't important.

[@grasshopperweb]

​@@AutomaticCSS I was not contesting the value you describe in point 1. at all. I 100% agree for that. I suppose the argument in 2 is more what I was pointing at. Seems more like a blog article kind of thing or even a sandbox site to experience it. But I suppose the differences are subtle to non-users and newbies so I see your point. Entitled me just wants the tutorial bits 😛

[@xhwsdm]

looking forward to more serial videos coming soon

[@stripedgoat]

Perfection ✨

[@starmap]

Thanks for clearing this up.

[@captainfire74]

Might be out of the concept of these tutorials but a video on what HTML tag to use in what situation would be incredibly useful ! (to me at least 😛)

[@AutomaticCSS]

PB101

[@eucalyptech]

Well done, thank you Kevin 😉

[@rubengarciajr]

The Rich Text Element within Breakdance give you control over the spacing out of the box. I just realized when i was messing with smart spacing. You have control over the wrapper, H1, H2, H3, H4, list, and p. Wish we had flow spacing lol

[@AutomaticCSS]

What about post content pulling from Gutenberg into a template?

[@virtuoseweb]

Hi Kevin thanks for ACSS and Frames, i save lot of times with this tool. Can u show or create a Slider on frames with progress bar ? If we have ten slide and we are on the 2 slides we can see a customizable barre with the progression. Like this we can design something where we can see a progress bar with ribbon on the vertical and when we scroll we go on the next stapes on your progress bar... U have make nice jobs and nice tuto

[@Tom-l9h]

Why is there only h2-h6 and no h1 and h1-h6 under headings for smart spacing? What if I want to control spacing under the h1?

[@AutomaticCSS]

There’s only one h1 and it’s always first. Adjacent sibling spacing is only applied to the top of elements, therefore the h1 doesn’t need it. And in blog post templates the h1 is an independent element which means you can easily apply whatever spacing you want to the bottom of it via the template. It’s not necessary to target it with smart spacing.

[@nmg2023nmg]

I would LOVE a video where you go and show difference with Bricks + ACSS versus Elementor and Divi, regarding, spacing, extra bloat of code and so on.

[@AutomaticCSS]

PB101

[@t.t.2977]

Will there be an option to create your own smart spacing presets that you can then share in the community? So, a sort of ultimate smart spacing preset collection?

[@AutomaticCSS]

There will be granular settings sharing capability at some point. For example, export all spacing settings. Or all color settings. But probably not granular to just smart spacing.

[@NotAddicted1981]

Forever I am completely evenly spaced out.

[@jacobengelbreth6227]

So just to understand this correctly. Is smart spacing primarily for rich text? 😊

[@AutomaticCSS]

It's for rich text in what it adds to the project. It's for even spacing and gap usage everywhere else based on its removal of bad default spacing from the browser and builder.

[@jacobengelbreth6227]

@@AutomaticCSS I see. But if you dont' remove the contextual spacing/automatic spacing and content-gap is applied by default to content within a container, the smart spacing doesn't take effect, right? This also leads my to another question: Would it then be better to add a h2, rich text, h3, rich text instead of just adding the h3 within the rich text element to keep the spacing of the content-gap?

[@bluetheredpanda]

​@@jacobengelbreth6227 ​ To your first question, if you look at 4:30 you'll see Kevin removes the "gap--none". In that context, the spacing present is the result of two influences: - the default Bricks spacing rules on different elements - the default "gap: content-gap" rule on the container (set by AutomaticCSS) The problem with this is, as Kevin demonstrates, you get double spacing. For example, the space between the first and second paragraph elements is the result of the gap + the bottom margin on the first paragraph. Generally speaking, it's easier to maintain consistent spacing by relying on gaps vs margin. "Smart spacing" helps with this by removing the default margin space created by Bricks, in that situation. As a rule of thumb you want it on (unless you know exactly what you're doing and why you want to turn it off, and even then I don't really see many situations where you'd need to) To your second question: when you can, *always* use individual elements (headings, simple text, media, etc.) rather than rich text. Rich text is a mixture of text, media and other content, which holds data related to its appearance. You can't control it as granularly as you can individual elements, for the most part - hence, avoid it when you have a choice. But in certain cases you don't have a choice, ie. when creating a Post Single template, the content and its styling will be determined by the content of each specific post the template will be applied to (the individual blog posts). That's a mixture of rich text. In that case, Bricks doesn't offer tools to control how it appears, while AutomaticCSS does. That's the scenario Kevin is referring to in the video.

[@vigilantezack]

@@jacobengelbreth6227 If you add all those elements as separate elements, then you could apply the smart spacing class to the container. If you have everything inside a single rich text element, then apply the class to the rich text element directly. If you had something like many elements and rich text elements all together, I can see how you might use a gap to separate them, but smart spacing applied only on certain containers and rich text elements as needed.

[@jacobengelbreth6227]

@@vigilantezack Thanks!

[@alfian_ridwan]

I'm not sure if I missed it in the video, but what's the rationale behind choosing margin-top over margin-bottom? Or is it entirely opinionated?

[@AutomaticCSS]

It’s how adjacent sibling spacing works

[@alfian_ridwan]

@@AutomaticCSS I saw in the the ACSS stylesheet you chose to go with margin-block-start for all adjacent sibling selectors with the :where and + selectors. Why not margin-block-end?

[@AutomaticCSS]

@@alfian_ridwan I already answered your question. Adjacent siblings are elements with something before them. If it's detected that an element has something before it, this dictates that the spacing should go on top.

[@saskia8018]

Are the general spacings with just one value a top-margin except if it's the first item of content?

[@AutomaticCSS]

Hmm, not sure exactly what you’re asking. Maybe you can clarify.

[@saskia8018]

Ah sorry, I meant what the "spacing" in the UI translates to on the CSS end, and if it's applied to the bottom or top of something by default. I rewatched and had missed the part where you said it's gaps. I still style headlines a lot with margins like a loser bc IE exists and there you have the issue of usually not wanting any spacing at the top of content when in general top makes more sense though.

[@goshenweb]

@Kevin - are there any plans to add tool tip to fields such as figure spacing that accepts top/bottom values since it is not immediately obvious and most users won’t really know that is possible without reading the documentation every time? Not a big deal but that would be nice to have

[@AutomaticCSS]

I’ll see if there’s any more space available. Can’t write a whole paragraph in them.

[@RobCooper]

wow

[@michaellaboulle6721]

Amazed how fast those videos are release. ACSS is just a game changer... Just one question on a minor thing, when I type @ipsum-short, it doesn't generate anything. I am probably missing something... Thanks in advance!

[@AutomaticCSS]

add a semi-colon or hit enter depending on where you're adding it.

[@brilliantlittlebusiness]

Hey Kevin, many Cookie / Privacy Policy solutions (Complianz etc) provide a shortcode to pull in the policies those systems create. Will Smart Spacing work with that content? I find that usually the formatting isn't great with the shortcode output so it'll be great to have some easy control over that content.

[@AutomaticCSS]

Depends on the html structure I suppose and whether or not you can add a class to the content wrapper

[@brilliantlittlebusiness]

@@AutomaticCSS Looking forward to trying it out!

[@solomonant]

Are any table controls for rich text coming by chance?

[@AutomaticCSS]

Tables are typically created with a table plugin, which should have styling controls.

[@solomonant]

@@AutomaticCSS right in most cases that would be the way to do it. I have often have legal docs I add to an official rules page and I'm not going to go into a page and build out all the different paragraphs, bullets, and tables from the doc they send. I just want to copy/paste into a rich text editor and be done. If some table controls won't be coming, no biggie, just wondering if there were thoughts, and/or plans for them. 👍

[@AutomaticCSS]

@@solomonant Not planning on it. There's an issue with having to override default styling based on which table system is being used. It's not an area we want to get involved in -- very messy. Smart Spacing will control the spacing above and below your table though.

[@solomonant]

@@AutomaticCSS don't do it then, totally get it's messy. I currently have various custom styles applied so I'll just stick to them. All good, no worries 👍

[@vigilantezack]

I'm not crying, you're crying!

[@Testfortest142]

Your lighting is over exposed

[@AutomaticCSS]

Not according to the histogram

[@ceescoenen]

Great Kevin, I can't wait to use it live. Which @rececipts are available? @ipsum-short (I guess) is great!

[@AutomaticCSS]

Cheat sheet coming soon