Utility Classes vs Custom Classes: How to Build Maintainable Websites Like a Pro

[@Gearyco]

I know it's long. I talk a lot because there's a lot to cover. I show a lot because there are a lot of details and different scenarios. Trust me: if you invest the time and really digest it, you'll be a way better developer. Comment and let me know what your biggest takeaway is. Also, I'm happy to answer any follow up questions you have!

[@websquadron]

Nice one

[@emadhosen]

Yes it’s long and you talk a lot BUT please make it always long and always speak a lot because the value you are offering insanely cannot be boring

[@wpclassroom1085]

@@emadhosen Very True💯

[@estaschoeman5256]

Using custom classes with modifiers is something that I knew I should use but was not sure how to use it. Thanks Kevin for the time and effort that you put into the community.

[@techfairyrina]

I found Kevin's channel 1 year ago. As for now I am in Inner Circle, using utility and custom classes during my web development work. I get clients with much higher check then before. What can I say? :) This channel is GOLD! Thank you so much, Kevin, for what you are doing :)

[@Gearyco]

🙌💪🏻 great job taking action! That’s the most important part.

[@randyluna551]

59:02 "one way ticket to chumpville" 🤣😂🤣 Not only is the training and teaching you provide incredible but you are seriously fun and funny to listen too.

[@Gearyco]

Thank you 🙏

[@davidwalls2304]

Kevin, watched the video twice and will probably watch it at least a few more times to make sure I absorbed everything. First off, I'm tired of being a "chump" and appreciate the suggestions to make life easier moving forward. On a side note, I enjoyed the "screwed the pooch" and the "up the creek without a paddle" phrases. They definitely add color to the video. Thank you for his overview. I'm new to ACSS and wondered what the difference was between utility and custom classes. This video provided a great explanation.

[@Gearyco]

Thanks for the kind words. Happy to help!

[@andreavocaturo3448]

Thanks for the amazing content Kevin! I discovered your channel recently and it has been a godsend. I am a newbie at this but I am confident that I can become good at it by simply following your methodology. You are a technical wizard and an incredible teacher. I love your commitment to teaching us the right way to do things. You are the only source of truth brother. I am so happy I discovered your channel so I could stop watching all the chumps out there who are spreading ignorance around. Thank you so much for everything that you are doing man!

[@Gearyco]

🙌🙌

[@youtubecuaphu]

This is the most informative Bricks video I've seen. I watched it from start to finish and hope there will be more Dev tutorials with Bricks like this.

[@Gearyco]

Many more to come!

[@chrisfoti1123]

Another great video, extremely helpful. Thank you!!!

[@laurelbraun9428]

It's so helpful seeing a pro at work!

[@rebelinc]

Damn Kevin, so inspiring. Just had an Elementor site handed from a pro developer and had to create a few pages and incorporate ACF. Was a nightmare to match the layout coming from Bricks and ACSS. Keep those Golden Nuggets coming.

[@Gearyco]

🙌

[@Z1PP]

Thank you so much for providing us with excellent instructions and fundamentals in a concise and great way. You already have me hooked with Automatic and Frames.

[@Gearyco]

You're very welcome!

[@kareem2928]

Finally, I've asked you personally about this more than once! It's here and more significant than before ^__^. Thank you, Kevin.

[@fredchams1052]

I can't say more than you spread love of the work well done. I always love your videos (and products) for that. Every time I watch your videos, every time I learn something!

[@Gearyco]

🙌

[@bluetheredpanda]

Thanks for the video Kevin, it's great as always! I believe I have a pretty good instinct when it comes to utility vs. custom, but I’ll have to rewatch it a few times to really grasp the “rules” you’re using to determine this. From what I saw: - Every time it’s a global element or component that’s likely to be reused throughout the site, use a custom class. - When it’s a basic layout, that’s not going to be reused exactly (ie. layout for a page section, the content of which would be unique to that page), utility classes are okay. - For both, use variables for consistency, and ideally contextualized variables. ➡Is that correct? Also, follow-up question: you mentioned a training on doing cards the right way, in both Oxygen and Bricks. Is that in the Inner Circle? Because I found the Oxyegn one on this channel (actually 2 of them, most recent being kzbin.info/www/bejne/eZXZp4eemMuJhJI) but not the Bricks one. Or is that the right one? Thanks,

[@Gearyco]

Correct. And there are 3-4 card tutorials on the channel. Two in Bricks.

[@bluetheredpanda]

@@Gearyco Is this one of them? “How to Properly Add & Query Service Pages With Bricks (CPT + Query Loop)” (sorry to be a pain, just want to learn everythigng I can 😅)

[@captteemo9133]

OMG you uploaded exactly on the day I had my figma prototype finished and wanted to start but didn't know what to use where etc. Thanks a lot 😄👍

[@AldeaCMS]

Pure Gold man! I came from Elementor to Bricks, and your video is amazing! I know is not abour bricks, but you understand what I mean. I want to join your Inner Circle! :) Is late right now in Chile, but tomorrow I will! Thank you so much!

[@Gearyco]

Would love to have you!

[@dahunsi]

And the train keeps moving. I read comments before commenting so that I will not repeat things, but I have to. If you are not a part of the Digital Ambition Inner Circle and you 'think' this tutorial is 'GOLD', then .... Kevin, I like the way you broke things down and made reference to your other tutorials to catch up on some things. It would be nice if links to the tutorials referred to are listed (just suggesting). Another GR8 one. Thanks a lot.

[@Gearyco]

I think I did list the main one I mentioned ... 20 features for legit page builders. What was the other one I mentioned? Sometimes I forget.

[@bridiemacdonald9436]

Kevin - thanks for all of this. Finally getting the hang of it.

[@RMSAnalyst]

Another amazing 🤩video Kevin! Your videos are diamonds!💎

[@kappesante]

when one thumb up is not enough you can always hope to find the same video in the sibling channel, and finally give the deserved multi-like.

[@Gearyco]

I appreciate it!

[@andrew.schaeffer4032]

Thanks! utility classes -> for super basic structure, or stuff that doesn't repeat. Custom classes -> for when stuff repeats. I was surprised to see the text move down when you applied margin bottom to the ::before pseudo element (I think it was the first accent one with the bar above the text). Always thought those pseudo elements were position absolute and outside the flow of the document.

[@AmandaLucaseu]

Loved the video Kevin - especially about the pseudo inset shadow !

[@emadhosen]

it did not only click for me, but it smashed me. I don't think there is a need to follow other YT Channals after watching this top level tutorial. Thank you very much for the tutorial Kevin. Are there going to be more like tutorials?

[@Gearyco]

For sure!

[@wpeasy]

Dude. definitely not a chump :) Love the presentation and the focus on consistency

[@captteemo9133]

Amazing, another Tutorial in Bricks, love that builder so much 🔥

[@mario312]

"you gonna have to have this whole conversation like a chump" I'm totally t-shirting this, adopting it as my slogan

[@vaniarensi7627]

Thanks, that was one of the questions I had about ACSS 🙏🏻 (Bob Ross🤣) And for everyone still thinking about joining or not the Inner Circle.. just do it, it’s super worthy

[@nielstieman9594]

Love the video! One question: You are writing a grid. ACSS has grids as well. Why didn't you use those classes?

[@Gearyco]

I explained it. Because some grids you need to have global control over their structure and spacing. So you can’t use utility classes.

[@mubindidit230]

Finished watching the whole video without skipping for a single second. Pure value. I am super motivated to take the time and setting up the workflow to organize classes. I have a question? How is the Gap var s,m,l getting the spacing with any value? I mean in the wpcodebox you have not setup any value (like: 2em, 3em). Is this pulling from ACSS 🤔

[@stripedgoat]

I'm not Kevin, but I can answer your question (he probably forgot it). Yes, the ACSS variables have their values pre-set in the framework code itself. Often times they're not exact values (such as 2 or 3em), but clamp and other type of calculated values -- so they're perfectly responsive.

[@mubindidit230]

@@stripedgoat Thank you so much for the help 😊

[@EduwareIzekor]

Don't be a Chump! Put it on a shirt! This video is mandatory to watch :) This was a good one.

[@ocbroadband]

The 'Classless Builder'. Isn't that an ironic statement of which we know which one it is referring to. Touche! lol Great video Kevin as always.

[@Gearyco]

It has a nice ring to it.

[@collectiveunconscious3d]

Great video, the first of its kind I've ever seen lol. Most videos on page builders are affiliate marketers and not actual web designers I bet (like a chump, haha)

[@phillcoxon]

Amazing. Thank you! I learned so much following along.

[@itspraveensharma]

Awesome video, content is Gold. Period

[@Gearyco]

Appreciate that

[@stripedgoat]

Awesome. So this was like a wrap-up of all the general best practice approaches. I will definitely start utilizing contextualized utility classes/variables. That's the only thing I wasn't doing from this entire tutorial, and I learned everything from you! 🙏🏼 P.S: I also noticed that setting the html tag to 'figure' is disregarding border-radius. Why is that? UPDATE: I went looking into it, and figured it out myself. So basically figure places the image into another box. We have to use a css line to target the actual 'img' to apply the border-radius (.your-custom-class img {border-radius:var(--radius-s);}), as once you set your html tag to 'figure', Bricks isn't targeting the image any longer, but the figure itself.

[@Gearyco]

Right, but there's a different workaround according to Bricks. I believe it has to do with setting overflow to hidden. I just couldn't remember what it was when I was recording.

[@MariuszNowak300]

@@Gearyco Yep. IMAGE / Style / Misc/ Overflow: Hidden

[@randyluna551]

Hey Kevin, at 32:04 why are you putting blocks in each column and not Divs? Is it because, like you said, you don't want Divs just floating around? Also, at 36:20 is there a difference between Utility class codes and Custom class codes......are there two different cheat sheets?

[@Gearyco]

Blocks and divs are the same thing, but blocks are display flex and 100% width by default. It's one less step to have to set their display to flex. Yes, utility classes are pre-made classes in the ACSS library that do very specific things. Custom classes contain a group of styling instructions for a very specific context. Watch this: kzbin.info/www/bejne/Z37OppJ8gZhkeMksi=t8ikfB_VzAFgPLzh

[@antomariantisna530]

Templating is a beast! Most designs will use the same structure, so using templates will speed up the process

[@Gearyco]

For sure, but that’s a different topic.

[@uioverhaul]

Kevin. Excellent presentation. I say this as someone who disliked ACSS at the beginning. But you could also add 2 more color shades damnit! Haha. Great content dude. Keep it up.

[@Gearyco]

A couple shade changes coming soon.

[@nikoweb]

Nice! Joining Inner Circle was best invest I've made in a long time. :- )

[@Gearyco]

🙏

[@nikoweb]

@@Gearyco when Frames will be released? Missed the "early access" and can't wait to get it to my hands! 😵

[@Gearyco]

@@nikoweb We're waiting on some things with Bricks related to proper licensing and access.

[@simonepagnini6735]

I love your tutorial...Thanx!!! After I watched the other about grids with Oxyninja, Automatic css... what would you suggest, which is the best to use? :)

[@Gearyco]

I built ACSS to fix all the limitations I ran into with OxyNinja. ACSS is far more flexible and powerful.

[@mlememe9541]

I was wondering where responsiveness of heading size is being controlled from? Its size scales when you adjust the width od viewport

[@Gearyco]

automaticcss.com

[@thewhiterussian138]

Dear Kevin: Command+Option+Right arrow (or left arrow) will switch tabs. An even better way is to darg the tag you are looking at BEHIND all the others (so it's on it's own) and switch between tabs using Command+Tab. So you never have to touch the mouse agian. Youuuuu're welcome :)

[@isaurasotoca]

Hi Kevin 😊 Nice tutorial, as always! One question: when would you recommend using figure tag on images?

[@Gearyco]

Most situations. I’ll have to do a video.

[@isaurasotoca]

@@Gearyco That'd be great! 🥰

[@grassyandris]

Hi Kevin, Can I add the grid snippet to the bricks-settings-custom code section? Unfortunately it doesn't work for me. I also tried it for the child theme. Your videos are super helpful! Thanks!

[@Gearyco]

Get WPCodeBox :) it’s worth it.

[@thebizpixie]

Now that I've watched a ton of your videos, and I'm starting to get the hang of this approach, I find myself wanting to use utility variables for pretty much everything - whether that's in a BEM class (for reusable components) or by ID (for one-offs). My question is, when, if ever, would it make sense to use a utility class over a utility variable?

[@Gearyco]

If using a variable at the ID level, it’s probably better to use a utility class instead.

[@thebizpixie]

@@Gearyco Would you mind clarifying why - or when - one is better than the other? I don't seem to have quite grasped that piece yet.

[@ZachariahWiedeman]

I'm addicted to your videos, man... Would there be any good reasons to place a heading accent beneath the heading in HTML for web crawlers and then styling it to visually appear above the heading? Or am I overthinking this?

[@Gearyco]

That’s exactly what we do in all our frames. Our accent heading class has order -1 on it so it’s always first, but it comes second in the DOM after the heading.

[@akivamajowka5742]

Hi kevin, great video! Im sorry to be a bit out of topic, but i really wanted to ask you if you can make a video on the best approach to translate websites built with Bricks Builder and specially how to create left-to-right designs that convert to right-to-left (like Arabic and Hebrew) when the second language is selected. I've been struggling with this for a while.. it would be incredible to see such a tutorial from you, Thanks in advance

[@bluetheredpanda]

Hey @Akiva! I don’t know what Kevin’s answer to this question is, but what I’ve been doing lately to translate websites is that I use Polylang to handle the different languages. What’s great about this is, it lets you duplicate your pages / templates, and serve the appropriate one to your visitors based on the language of the site they’re viewing. This means, you could make any necessary adjustments for each language (aside from LTR / RTL, sometimes a layout may need to be adapted, because English is quite the terse language compared to most others, especially when compared to ie. German). It’s even better if you’re using logical properties for your paddings, margins, etc. instead of directional ones. That would be using `{text-align: end}` instead of `{text-align: right}`, `padding-block` and `passing-inline` instead of `padding-top`, `padding-right`, `padding-bottom`, and `padding-left` (this is something I’ve seen Kevin do in a few trainings). See this superb guide by Google for more info: web.dev/learn/design/internationalization/ Not only is it cleaner, more future-proof code, you’ll have much less work to do if working this way. I’m pretty sure by combining these two techniques, you can knock your localized websites super fast, and with awesome results! 🙌 Please let me know if this helps or if it's not enough, it‘s a topic I’m also interested in.

[@martinwessel7137]

Hi Kevin - love your work and dedication to learn us "smucks"... Regarding your service cards, you're saying to not use utility classes because you might use the same cards on other pages. I have some sections I use on multiple pages of a site, but I just saved as a template, and used the template element to show the same. Any changes needed is done on the template, and then it's published througout the page. Is the template element a bad idea ?

[@Gearyco]

I can’t really say for sure without looking at it.

[@mayanikolova8353]

Brilliant, the best content, thank you

[@wingtracer]

Kevin - I'm trying to use your frames hero alpha, and there's too much padding to suit me as set in var(--fr-hero-padding). You say not to edit utility classes or contextual utility classes in this video, but here this is a variable. Do we just need to not use your variables if we don't like the styling of those, and instead create our own new variable? I'm starting to understand the classes better with all the videos (and this one especially), but what about adjusting variables? Any vids on that?

[@Gearyco]

“Contextual utility classes” can be edited. That’s the difference with those. In fact we let you edit those from the ACSS dashboard. Look under the frames tab.

[@wingtracer]

​@@Gearyco I jumped over to the frames tab, and saw Hero Padding pointed to an ACSS variable. First, for my proper understanding.... is that "--fr-hero-padding" inside of "var(--fr-hero-padding)" considered a class, a variable, or is that one and the same? Second - do we ever edit the ACSS variables, or instead just find a variable that works more to our liking?

[@Gearyco]

@@wingtracer it’s a variable. Just swap it with a new variable like one of the section spacing variables: var(-section-space-m) would match all your other sections. Or you can use a calc as well.

[@wingtracer]

@@Gearyco goti it. Thanks.

[@LDStevenFrench]

Loving your work

[@Gearyco]

🙏

[@PswACC]

The Bob Ross reference was great and mentally soothing. lol

[@klokkerholm1993]

Where is it best to be hooking in to margin-top--s and all these spaceing classes?

[@Gearyco]

Can you ask a different way? Not sure I'm understanding exactly what you're asking.

[@reneklokkerholm1453]

@@Gearyco Sure when should u use spaceing class direct on elements or wrappers to space out a design ? your way in the video you input the spaceing class direct into a custom class with a variable ? i was just wondering

[@WannaBeMuzkant]

I'm just wondering why you still use px when responsive design is already far ahead with .em, .rem units :)

[@alexander-van-aken]

You clearly didn’t watch the video :)

[@Gearyco]

Didn’t I say like 5 times in the video not to use pixels?

[@alexander-van-aken]

@@Gearyco it probably was even more 😂🥰

[@WannaBeMuzkant]

@@Gearyco sorry….i’m jumping forw-back ;))) Yes you did!! My mistake😜😜😜💪

[@mihaiandrei97]

You can hold CTRL + click for multiple cursors. Weird, as I'm used to ALT + click, but at least it works.

[@Gearyco]

Ah, good to know.

[@tognabologna7078]

Haha I had a good chuckle at "un-zoom-in...I guess that's called zoom out" :)

[@Gearyco]

Talking is hard.

[@tognabologna7078]

@@Gearyco 🤣

[@Danishevskiy]

Awesome! Thanx a lot

[@rookiesmarts]

Just a suggestion... Can you add the word "bricks" in the video title.. it will help in youtube search for people searching the video

[@Gearyco]

The builder doesn’t matter all that much to this concept. This concept is true in oxygen and webflow as well.

[@chrisparky]

What is an alternative to WPcode BOX? just need to add that CSS

[@Gearyco]

You can add it directly in bricks

[@deskman]

If it is clicking? Yes, it is. And it keeps clicking. So thanks for the click - now heading over to my own sandbox to try this out. Thanks.

[@JanWessels]

Kevin could you show more Bob Ross instruction video's! 🤣

[@Gearyco]

😂

[@weili6126]

Learning 😊😊😊

[@gashumba888]

Is Oxygen tutorial over???

[@Gearyco]

Mostly? Unless they do something relevant in the future.

[@gashumba888]

@@Gearyco 😯

[@AdamJHumphreys]

Oxygen is a dying platform we all had high hopes for.

[@gashumba888]

​@@AdamJHumphreys Well, the problem with these "all you can eat" billing companies is that after the initial growth, they all plateau at some point. Bricks will fall into the same problem as Oxygen unless it can continue signing up new users every year. The likes of Microsoft, Adobe and Apple have perfected the subscription model. It is the only way to continue to innovate while still growing the company. If Oxygen dies completely, I will move to something like Webflow instead.

[@redefyned1353]

I did it all for the cookies

[@JaySolomonK]

Oh! all this top level education for free? what a chomp like be.. aghm.. man.. No seriously, thank you so much

[@Gearyco]

You're most welcome

[@mihaiandrei97]

FIRST

[@christophheine4725]

I don't think classes are the right thing to use. Classes are so 90s... I like presets, though 🤣

[@Gearyco]

You’re not helping my blood pressure

[@christophheine4725]

@@Gearyco You know what could be helping? Breakdancing 😂

[@wingtracer]

i routinely drink coffee in the morning and watch Kevin's vids waiting for his hidden nuggets of head-shaking moments that get me loling. @26:16 Learn More 🤡

[@mubindidit230]

🫡 to you Kevin for this amount of hard work. It is a pure 💎 Gem! Going to continue watching it

[@Gearyco]

💪🏻