An Elementor Refugee Converts to Bricks & ACSS: Workflow Q&A (Part 1)

I'm trying out a new style of content to see what you think (let me know in the comments)!
‪@markjszymanski‬ is joining me to Q&A the Bricks/ACSS workflow as he makes his conversion from the realm of beginner-style page builders (like Elementor/Divi/Beaver/Etc.) to a more professional and maintainable workflow.
Note: This isn't a structured "start from the beginning" series. It's more of an exploration of the questions Mark has based on where he's currently at in the workflow. If you want a "start from the beginning" workflow course, check out my free "PB101" course right here on this channel and keep an eye out for my upcoming free "ACSS 101" course on the ‪@AutomaticCSS‬ channel.
In Part 1 we're diving straight into a discussion on things like:
Auto Spacing
Contextual Spacing
Smart Spacing
Custom Classes
Tokens
BEM Methodology
Auto-BEM
Blocks vs Divs
Paragraphs vs Spans
Attributes
And more!
Maybe you'll find this value, maybe not. Let me know in the comments!
** MY TOOLS **
🔥 AutomaticCSS (ACSS) - automaticcss.com
🔥 Frames - getframes.io
See all my recommended tools here: geary.co/tools/
** INNER CIRCLE **
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ ...and much more!
Learn more and join here: geary.co/inner...
** SOCIAL **
👉 FB - / marketingkev
👉 LinkedIn - / kevingeary
** CHAPTERS **

[@Gearyco]

We still need to investigate why the var(--border) variable wouldn't work on Mark's install. I suspect caching, but we just decided to move on to other stuff. The general strategy should work just fine for everyone, just make sure you having all forms of caching turned off during development.

[@sean-gs]

Maybe because he let the "var(--border)" in the border color area in bricks I didn't see him remove it so the border was there but no color was added because bricks give a higher specificity to the color of the border set in style.css maybe.

[@Gearyco]

He removed it and it still didn't work.@@sean-gs

[@sean-gs]

hum strange not something to do with code execution of bricks 1.7 ?

[@LupusDesign]

Excellent video, Kevin.

[@omdollars]

52:18 NginX Helper..is this the caching ?

[@markjszymanski]

Thank you for having me on, Kevin!! This chat was unbelievably valuable!

[@coolwebdesign8747]

It really was. And not only for you Mark. 🙂👍 Such a videos are incredibly helpful for any other ex-elementors. Not only because of Kevin's experiences and expertise but mostly thanks to his strong skills to explain and pass his knowledge to us.

[@LupusDesign]

I will be watching more of your ACSS videos.

[@SamanticsNL]

This is like a PB101 follow-up for chumps. Thank you! Right now I cannot imagine how I've made Divi websites once.

[@monicabjerke3141]

Same!

[@omdollars]

You had me at "and id's and classes...all these things are all just Attributes " Tremendous helpful talk - 🙏

[@ALIMAHMA]

Absolutely brilliant idea and exceptionally informative content. Thanks, Kevin and Mark!

[@mr.matt.eastwood]

Mark the man and Kevin the legend! Very much enjoyed this. I enjoy both your channels and it's great to see you create together. Yes, more please!

[@graffigdesign8977]

Literally at the exact same stage of transition. Perfect timing. Thank you so much for this. 👍🏻😀

[@paige0394]

I enjoyed this format! Although Mark's lack of bookmark folders was frightening 😄

[@markjszymanski]

Everything is one click away...try it ;)

[@whatznext28]

I love this video's format. It helped me to see someone working through their specific scenario to give me a better grasp of the fundamentals. Really valuable stuff!

[@johnboyd8053]

This is one of the best videos I've seen. Thank you for taking the time to explain things more in laymen terms. Things like the explanation of using and modifying the BEM portion was eye-opening. I appreciate your willingness to educate people from all differing backgrounds. I am definitely looking forward to future videos in this format.

[@Jim.Hummel]

I'll chime in with another "Fantastic!" vote here. As you said, Kevin, you really didn't cover a new feature or tool here but you actually stitched things together in a real-world scenario, including the decision-making process that one would encounter. I'm in a similar position as Mark, so I found this to be a valuable discussion/lesson. I hope that there are more in the future. Thank you both for your time and for sharing.

[@chrisgreen5711]

Really great video. Been using Bricks for a few months now and still learned things from this video 😄. Mark did really well too

[@MainsailWebDesign]

Like it. Like it a lot... It was so cool to watch Kevin teach a budding developer with such patience and kindness. It was helpful for me too to learn a thing or two, like a shortcut R tab, etc. Another side benefit that I've noticed is that when I watch Kevin's videos and then talk to clients, I have noticed that I am a lot more patient and understanding with them. It's crazy but I have to say that I'm becoming a better person. LOL. Thank you. Top notch as always!

[@Gearyco]

💪🏻

[@joejauregui1372]

no joke Mark turned me onto you Kevin, and I followed mark from elementor to bricks seriously you 2 keep up the great work guys!!!

[@creativestudioske554]

All ELEMENTOR refugees gather around 🥹 Thanks @Kevin for the new series we want more let it be a series let it be deep

[@sumerianbrother]

Line height nugget for the win! Goddammit this has caused so much extra work. Ugh. TY guys!!!

[@mdn1808]

This video is incredibly good value. If I were the guest, instead of Mark, I would probably ask identical questions. The format of the conversation itself is excellent, questions with phenomenal answers from Kevin. And since I watched ABSOLUTELY all of Kevin's videos, I learned something new again. Just an example of p and span, now it's crystal clear to me what it's for. Good job guys!

[@Arisch24]

This video does pretty much sum up your experience with front-end development. It shows you have previously written code and you know what the actual fundamentals are. That's one of the reasons why your videos are of high quality.

[@rafikiAli]

Amazing and far beyond HELPFUL!! TY! MJS - subbed!

[@markjszymanski]

Thank you!!!

[@davidwalls2304]

Enjoyed this video. I've been watching your videos and using ACSS for over a year now and finally answered a few "ahh, that's why/how it's done" questions. I think this is an excellent idea for another round of videos. This is especially helpful for people that are newer to the game.

[@karl-knoop]

Just perfect! Great idea to release this kind of a tutorial series. Answering Marks questions helped me a lot.

[@bluetheredpanda]

This is a great format. It’s entertaining, and I’m pretty sure the back and forth is very conducive to teachable moments for beginners . I hope you keep going. Thanks to both of you!

[@DavidvanMoorsel]

This is incredibly helpful. Mark is asking a lot of the questions that I'm having as well while trying to learn both Bricks and ACSS. Kevin's explanations are great as always. Would love to see more like this. Thanks to both of you!

[@kotalaadam]

Insane! Amazing tutorial, especially the data attribute part - real eye opener what you can do with proper builder. Thanks a lot! And please… continue in this series! 🎉

[@jtisaks8569]

Elementor - Bricks - Framer - Webflow all these amazing tools yet i dont know which one. I need to find one and move to the next. Thank you for this.

[@captainfire74]

Exactly the type of semi-beginner tutorial I needed !!! Thanks :)

[@plantsrealm]

Thank you so much for these series! Extremely helpful for anyone in the Bricks/ACSS stratosphere, but more so for Elementor expatriates (like myself, until I redo my sites in Bricks). Thanks!!!

[@graybirchsolutions]

Well, that was fun! Great content as always. Loved the back-and-forth and brainstorming over specific problems (and picked up a few new nuggets along the way). After watching a whole lot of your structured videos, it was great to see the application of those techniques to real-world problem-solving in a more organic and unstructured way.

[@GrantHawkey]

Great concept for video format guys 🙌 It’s a great way for many of us to learn ‘over the shoulder’ and highlights real world daily scenarios we need to solve for. Thanks heaps, would love more! 🙏

[@Zim_88]

Good questions, Mark and good answers, Kevin!

[@piotrekmichalski1186]

What a great idea for a series, thank you Kevin!

[@crazy4uonly21]

Kevin you Build different. This was gold nugget but a heavy one . Much Love Fam . ❤

[@exterminatic]

This is very educative material as for someone trying to learn Bricks builder and ACSS, please more of these types of videos please.

[@RobCooper]

Absolutely fantastic training. Even just to understand more about the Bricks builder interface and the decisions being made.

[@derekshort]

That was fun to watch. Thank you. Kevin, you talked about a few things that you have never previously talked about.

[@sumerianbrother]

Brilliant - really like this format! Exactly the things I was struggling with with BEM. After 10 templates it gets really confusing to remember everything.

[@mattbrooke8320]

Great content and enjoyable to see problem solving on real life situations. Would love to see locking the ID styles when adding classes in the new BEM builder so there is a reminder to use the class as the ID styles are locked.

[@oldfridayboy5597]

Very helpful video! I think something that would also probably help refugees a lot is you planned video about elements one should never use.

[@teammoderngeeks]

Great video. Please produce more of this.

[@kristapsvilcans]

@markjszymanski Mark, I recommend You to change "auto scroll element", because it is very annoying when You click at element and it scrolls all the time up... Bricks >> Settings >> Builder >> Canvas >> Auto scrool element into view: 50%. When I changed it, it was much better experience. And please change browsers blue color to something not so screaming :D

[@BrendanOConnellWP]

^this! I see years-long users still not use this

[@kristapsvilcans]

@@BrendanOConnellWP Yes, I think this should be by default. When I started to use Bricks that was the most annoying thing.

[@BrendanOConnellWP]

@@kristapsvilcansagreed! i have it in my blueprint

[@markjszymanski]

Great tip, will do!

[@bakernickolas8736]

I love Bricks much more than Elementor. I have been recently used it and I also recently use Quill Forms. I would like to have a tutorial about Quill Forms as well! Looking forward to it!

[@michaelmclaughlin1563]

Thanks for a great tutorial video

[@theskatingchoreographer]

Absolutely fantastic! Thank you guys!

[@chrispoole4084]

Thanks, great content. More like this welcome.

[@markfulgado8293]

This was Awesome

[@HeaverMarketing]

Love the new content type!

[@fred3r1k]

same here... it was the best decision in my business life xD

[@web-atelier]

Excellent 👍, thanks a lot.

[@brentwilson5]

This was great! Thank you!

[@dahunsi]

I love the idea of AutoBem 2.0

[@joewebdev]

super helpful video

[@organisman]

Great content, thanks a lot for that. Now, I got one question. How do I get into the side menu?

[@Gearyco]

?

[@simonkerridge]

Another great useful video. I certainly hope you continue a series of these videos. Thank you, Kevin. 🫡👍

[@ErinHewett]

Loved it!

[@ThierryC-te3rx]

So good !

[@philippfischer]

Great job!

[@wittywolk]

Hey Kevin, I have a question - will you ever ditch the 62.5% font-size rule? I recently started a project and for the first time since a couple of years I decided to not use it; I've read multiple arguments against it and I think they're mostly valid. Would like to hear your opinion. :D

[@Gearyco]

There is only one good argument against it and it’s one hardly anyone makes. But ACSS users can set it to whatever they want - there’s no restriction.

[@wittywolk]

@@Gearyco so I guess this means that you don't plan to, okay, understandable. Anyway, thank for your work! I finally decided to check out Bricks so I'll be rewatching some of the older stuff of yours, let's see where this will take me. :D

[@derekshort]

17:50 I’ve learned from experience that the Rich Text element is best for a paragraph that will include a link somewhere in it. Am I right?

[@Gearyco]

You can insert a link in a basic text element there’s just no ui for it

[@derekshort]

54:30 I thought so. I’ve known “custom properties” for a few years now... Not to brag.

[@derekshort]

The term “token” confuses me. I still don't understand the origin of that one. Lol

[@derekshort]

Did you know that you do not need a semicolon before a closing curly bracket? Am I right, or is it needed in WordPress PHP code for some reason? In my experience, it's not needed. This method is more visible in minified CSS.

[@Gearyco]

?

[@Gearyco]

Oh, for the last key value in the list? Yeah, but it causes errors when people come back to add stuff and aren’t paying attention. Best to close each line properly.

[@derekshort]

@@Gearyco Ah. Very good point!

[@jackwalsh6487]

How are you Bricks devs feeling about the major security flaws in Bricks compared to previously working with Oxygen?

[@sumerianbrother]

Loving it - scan root level + delete few files vs fighting w/ Oxygens repeater nonsense. 🎉 winning 😀

[@adnanmehedii]

First comment ❤

[@toniospam5114]

No no no, oh no no no (kevin heart style) : please don't make more videos like this one, I really hope this channel won't become a mainstream channel for whoever got lost on their road to web dev. Kevin, seriously, continue the great stuff you've been doing until now (technical teachings), continue the Q&A, do more for Figma tutorials, SEO and whatnot, but don't do these type of videos. Furthermore : can you trust a guy who has a vivid blue browser theme ;-) ?

[@Gearyco]

😅

[@odinaka_joshua]

😂😂

[@markjszymanski]

😂😂🤣🤣

[@htz70]

Yes Bricks sometimes adds specificity making it harder to override its styles from my own external code-based css. To make it easier, I give myself some specificity leverage by adding an ID on the Body tag (via a php hook, same on all pages) like: id="my-site". So #my-site .my-bricks-class.brx-annoying-class ... usually works.

[@Gearyco]

Interesting. I’ve been advocating for builders to remove all specificity on default styles