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

Поділитися
Вставка
  • Опубліковано 2 лют 2025

КОМЕНТАРІ • 136

  • @techfairyrina
    @techfairyrina 2 роки тому +13

    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
      @Gearyco  2 роки тому +1

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

  • @Gearyco
    @Gearyco  2 роки тому +18

    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
      @websquadron 2 роки тому +2

      Nice one

    • @emadhosen
      @emadhosen 2 роки тому +3

      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
      @wpclassroom1085 2 роки тому

      @@emadhosen Very True💯

    • @estaschoeman5256
      @estaschoeman5256 2 роки тому

      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.

  • @randyluna551
    @randyluna551 Рік тому +1

    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.

  • @chrisfoti1123
    @chrisfoti1123 2 роки тому

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

  • @andreavocaturo3448
    @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!

  • @youtubecuaphu
    @youtubecuaphu 2 роки тому +1

    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
      @Gearyco  2 роки тому +1

      Many more to come!

  • @davidwalls2304
    @davidwalls2304 2 роки тому

    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
      @Gearyco  2 роки тому

      Thanks for the kind words. Happy to help!

  • @kareem2928
    @kareem2928 2 роки тому

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

  • @laurelbraun9428
    @laurelbraun9428 4 місяці тому

    It's so helpful seeing a pro at work!

  • @captteemo9133
    @captteemo9133 2 роки тому

    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 😄👍

  • @rebelinc
    @rebelinc 2 роки тому +3

    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.

  • @Z1PP
    @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
      @Gearyco  Рік тому +1

      You're very welcome!

  • @kappesante
    @kappesante 2 роки тому

    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
      @Gearyco  2 роки тому

      I appreciate it!

  • @fredchams1052
    @fredchams1052 2 роки тому

    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!

  • @bridiemacdonald9436
    @bridiemacdonald9436 2 роки тому

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

  • @andrew.schaeffer4032
    @andrew.schaeffer4032 2 роки тому +1

    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.

  • @bluetheredpanda
    @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 ua-cam.com/video/CdvvThcfVN0/v-deo.html) but not the Bricks one. Or is that the right one?
    Thanks,

    • @Gearyco
      @Gearyco  Рік тому +1

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

    • @bluetheredpanda
      @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 😅)

  • @dahunsi
    @dahunsi 2 роки тому

    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
      @Gearyco  2 роки тому

      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.

  • @randyluna551
    @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
      @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: ua-cam.com/video/1Mku_FL31Bg/v-deo.htmlsi=t8ikfB_VzAFgPLzh

  • @AldeaCMS
    @AldeaCMS 2 роки тому

    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
      @Gearyco  2 роки тому

      Would love to have you!

  • @AmandaLucaseu
    @AmandaLucaseu 2 роки тому

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

  • @captteemo9133
    @captteemo9133 2 роки тому +1

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

  • @RMSAnalyst
    @RMSAnalyst 2 роки тому

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

  • @EduwareIzekor
    @EduwareIzekor 2 роки тому +1

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

  • @phillcoxon
    @phillcoxon 2 роки тому

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

  • @mario312
    @mario312 2 роки тому

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

  • @vaniarensi7627
    @vaniarensi7627 2 роки тому

    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

  • @wpeasy
    @wpeasy 2 роки тому

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

  • @nielstieman9594
    @nielstieman9594 2 роки тому

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

    • @Gearyco
      @Gearyco  2 роки тому +1

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

  • @ocbroadband
    @ocbroadband 2 роки тому +1

    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
      @Gearyco  2 роки тому +1

      It has a nice ring to it.

  • @emadhosen
    @emadhosen 2 роки тому

    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?

  • @thewhiterussian138
    @thewhiterussian138 5 місяців тому

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

  • @stripedgoat
    @stripedgoat 2 роки тому

    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
      @Gearyco  2 роки тому +2

      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
      @MariuszNowak300 2 роки тому

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

  • @mubindidit230
    @mubindidit230 2 роки тому +1

    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
      @stripedgoat 2 роки тому +1

      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
      @mubindidit230 2 роки тому

      @@stripedgoat Thank you so much for the help 😊

  • @simonepagnini6735
    @simonepagnini6735 2 роки тому

    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
      @Gearyco  2 роки тому

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

  • @mlememe9541
    @mlememe9541 2 роки тому

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

    • @Gearyco
      @Gearyco  2 роки тому

      automaticcss.com

  • @itspraveensharma
    @itspraveensharma Рік тому

    Awesome video, content is Gold. Period

  • @wingtracer
    @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
      @Gearyco  Рік тому +1

      “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
      @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
      @Gearyco  Рік тому +1

      @@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
      @wingtracer Рік тому

      @@Gearyco goti it. Thanks.

  • @thebizpixie
    @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
      @Gearyco  Рік тому +1

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

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

  • @antomariantisna530
    @antomariantisna530 2 роки тому

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

    • @Gearyco
      @Gearyco  2 роки тому

      For sure, but that’s a different topic.

  • @ZachariahWiedeman
    @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
      @Gearyco  Рік тому +1

      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.

  • @grassyandris
    @grassyandris 2 роки тому

    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
      @Gearyco  2 роки тому

      Get WPCodeBox :) it’s worth it.

  • @isaurasotoca
    @isaurasotoca 2 роки тому

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

    • @Gearyco
      @Gearyco  2 роки тому +1

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

    • @isaurasotoca
      @isaurasotoca 2 роки тому

      @@Gearyco That'd be great! 🥰

  • @nikoweb
    @nikoweb 2 роки тому

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

    • @Gearyco
      @Gearyco  2 роки тому +1

      🙏

    • @nikoweb
      @nikoweb 2 роки тому

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

    • @Gearyco
      @Gearyco  2 роки тому +2

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

  • @martinwessel7137
    @martinwessel7137 2 роки тому

    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
      @Gearyco  2 роки тому

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

  • @akivamajowka5742
    @akivamajowka5742 2 роки тому

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

  • @collectiveunconscious3d
    @collectiveunconscious3d 2 роки тому

    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)

  • @PswACC
    @PswACC 2 роки тому

    The Bob Ross reference was great and mentally soothing. lol

  • @mayanikolova8353
    @mayanikolova8353 2 роки тому

    Brilliant, the best content, thank you

  • @WannaBeMuzkant
    @WannaBeMuzkant 2 роки тому +1

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

    • @alexander-van-aken
      @alexander-van-aken 2 роки тому +2

      You clearly didn’t watch the video :)

    • @Gearyco
      @Gearyco  2 роки тому +1

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

    • @alexander-van-aken
      @alexander-van-aken 2 роки тому +1

      @@Gearyco it probably was even more 😂🥰

    • @WannaBeMuzkant
      @WannaBeMuzkant 2 роки тому

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

  • @klokkerholm1993
    @klokkerholm1993 2 роки тому

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

    • @Gearyco
      @Gearyco  2 роки тому

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

    • @reneklokkerholm1453
      @reneklokkerholm1453 2 роки тому

      @@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

  • @mihaiandrei97
    @mihaiandrei97 2 роки тому

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

    • @Gearyco
      @Gearyco  2 роки тому

      Ah, good to know.

  • @LDStevenFrench
    @LDStevenFrench 2 роки тому

    Loving your work

  • @Danishevskiy
    @Danishevskiy 2 роки тому

    Awesome! Thanx a lot

  • @uioverhaul
    @uioverhaul 2 роки тому

    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
      @Gearyco  2 роки тому +1

      A couple shade changes coming soon.

  • @rookiesmarts
    @rookiesmarts 2 роки тому

    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
      @Gearyco  2 роки тому +1

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

  • @tognabologna7078
    @tognabologna7078 2 роки тому

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

  • @chrisparky
    @chrisparky 2 роки тому

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

    • @Gearyco
      @Gearyco  2 роки тому +1

      You can add it directly in bricks

  • @deskman
    @deskman 2 роки тому

    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.

  • @weili6126
    @weili6126 2 роки тому

    Learning 😊😊😊

  • @gashumba888
    @gashumba888 2 роки тому

    Is Oxygen tutorial over???

    • @Gearyco
      @Gearyco  2 роки тому +2

      Mostly? Unless they do something relevant in the future.

    • @gashumba888
      @gashumba888 2 роки тому

      @@Gearyco 😯

    • @AdamJHumphreys
      @AdamJHumphreys 2 роки тому +1

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

    • @gashumba888
      @gashumba888 2 роки тому

      ​@@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.

  • @JanWessels
    @JanWessels 2 роки тому

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

  • @redefyned1353
    @redefyned1353 2 роки тому

    I did it all for the cookies

  • @JaySolomonK
    @JaySolomonK Рік тому

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

    • @Gearyco
      @Gearyco  Рік тому

      You're most welcome

  • @mihaiandrei97
    @mihaiandrei97 2 роки тому

    FIRST

  • @christophheine4725
    @christophheine4725 2 роки тому

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

    • @Gearyco
      @Gearyco  2 роки тому

      You’re not helping my blood pressure

    • @christophheine4725
      @christophheine4725 2 роки тому +1

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

  • @mubindidit230
    @mubindidit230 2 роки тому +1

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

  • @wingtracer
    @wingtracer Рік тому +1

    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 🤡