Custom CSS in Bricks Builder for an efficient workflow | How to CSS Tutorial | WordPress Tutorial

Sdílet
Vložit
  • čas přidán 13. 09. 2024

Komentáře • 30

  • @Sascha.Hauser
    @Sascha.Hauser Před rokem +4

    If you know CSS in an out, this might be faster than browsing through the Builder-Menu, no question about that.
    However, if that is not the case, i am not sure that this workflow is really more efficient.
    Also, when the code is getting longer and longer and you have to change something month later,
    you have to find it in the code to change it, it is much more clear where to find and change things later on, when using the menu of the Builder.
    Also, writing all those proper BEM classes and targeting them inside your CSS takes also some time.
    Not forget that stuff not always work, so it also takes time to troubleshooting your code.
    I have seen enough videos, where people search for +20-30 seconds to find things in their CSS, in that time you easily have
    open the menu and change the value there.

    • @captainfire74
      @captainfire74 Před 6 měsíci

      100% agreed !!! Maybe because I am not a CSS pro for now :p
      Though it's still good to know in case you know there are some things you always want to do on your cards on every sites for example, then you can just copy/paste it in seconds from your docs and change values :)

  • @mailwood1388
    @mailwood1388 Před 10 dny

    Good lesson. I would like more lessons on design practices, classes and styles.

  • @johnramos7761
    @johnramos7761 Před rokem

    Magnificent tutorial. I'm learning tons with you! Thanks!

  • @BGdev305
    @BGdev305 Před rokem +2

    This reinforces the idea of using an external stylesheet.
    Also.. I didn't know you could have Advanced Themer and ACSS installed together! It seems like there would be some conflicts between the two, namely color palettes. Can you do a short on configuring the two?

    • @DesignwithCracka
      @DesignwithCracka  Před rokem

      AT provides a global option to prefix the classes and variables to avoid conflict.

  • @noraholmquist8231
    @noraholmquist8231 Před rokem +2

    Very interesting tutorial. I have often wondered about how to solve the “where did I put that value” problem in builders. I see the logic of picking a logical unit of elements, such as a card. What do you think about using the page as the location for CSS?

    • @EwanGilmour
      @EwanGilmour Před rokem

      Yes, that's a good question. Is a similar problem then going to occur with CSS snippets all over the place, and us having to click a lot to look for snippets? Perhaps better to have them all in the one place? Or at least on the page level, as suggested above.

    • @DesignwithCracka
      @DesignwithCracka  Před rokem +1

      It can get quite tricky, depends on the situation. For components like a card, I prefer placing the CSS on the root level of the component. However, if I have a utility style, such as what color a text or button should be when placed on a dark background, I use an external code editor and label the snippet as 'utility styles' etc. It all depends on what works best especially when working with a team, there should be rules on how CSS is applied.

  • @danieleromano7442
    @danieleromano7442 Před rokem

    Great work, more tutorials!💪

  • @hosseinkhanmohammadi4770

    Thank you 🎉

  • @jasonmichael7800
    @jasonmichael7800 Před rokem

    Another great video🎉

  • @elikemdaniels
    @elikemdaniels Před rokem +1

    Your tutorials have been super helpful to me since I returned to WordPress from Webflow. Thanks a trillion times. I have a question: How do you design empty states and conditionally set it appear IF there are no posts? What I'm trying to achieve is that, I'd like to display styled content of a DIV if there are no posts. I can see that the query loop builder has a section at the bottom called NO RESULTS that allows you type a string of text to display of there are no posts, or perform a dynamic action. Not sure what exactly to do there because none of those action/functions really give me the desired direction.
    What am I missing? Have you encountered this before?

  • @tomashudolin7197
    @tomashudolin7197 Před 2 měsíci

    So there is nothing like in Oxygen? I like the Oxygen's soluion where the CSSs can be splited based on purpose and is in directly in builder. So in Bricks I have only one place for whole CSS and outside of the builder, right?

  • @blackmagic10000
    @blackmagic10000 Před 8 měsíci

    Do you use wpcodebox to keep evrything together?

  • @quickend01
    @quickend01 Před rokem

    First, I like to say - You have a very good teaching style and I do enjoy and learn well from your videos. It's very good to see you in alliance with Kevin G. (Thank you!)
    Question - Does Advance Themer and the "Plaster" the plug-in that became part of ACSS overlap? do you use both at the same time? or is the plaster turned off as you use Themer? Also, I no longer seem to see or experience the plaster since it was rolled into ACSS.
    At this point, I am not sure what the Plaster integration it's supposed to look or act like. Would you consider doing a small re-introduction of this option so we can know if we are using it to its potential?

    • @DesignwithCracka
      @DesignwithCracka  Před rokem

      Both AT and ACSS contextual menu (Plaster) work well. To use the contextual menu, you have to turn it on in ACSS Dashboard under Options.

  • @SinisaSinjori
    @SinisaSinjori Před rokem

    Nice tutorial. Thanks.
    I didn't think about writing css like that, because I thought it's faster with the builder, especially with Advanced Themer (that's a nice plugin). Maybe will give it a try next time.
    However, where do you place media queries in that case? Also in the same "Custom CSS" box?
    Also, where Bricks put that CSS code? External file (if that's selected in Bricks settings), or inline like it currently does with some CSS (regardless of choosing external file)?

    • @DesignwithCracka
      @DesignwithCracka  Před rokem +2

      Media queries can be placed inside the same place, but that you only need to write min-width media queries because the Custom CSS respects breakpoints.

    • @EwanGilmour
      @EwanGilmour Před rokem +1

      @@DesignwithCracka I guess this is a decent enough reason on its own for putting custom CSS code in as root per section.

  • @kevinrittershaus9380
    @kevinrittershaus9380 Před rokem

    Great tutorial! Question...I assume if you're using the Bricks parent theme and update it, these customizations would be wiped out? Is that correct? Using a child theme, however, they would be saved with any updates to Bricks?

    • @DesignwithCracka
      @DesignwithCracka  Před rokem +1

      Only customizations done inside the theme files is affected by updates. It doesn’t affect styles done anywhere else.

  • @lucianpascu8445
    @lucianpascu8445 Před 6 měsíci

    Bad teacher...A lot of gibberish instead of clear communication.

    • @DesignwithCracka
      @DesignwithCracka  Před 6 měsíci +1

      A dull student will always blame the teacher… and they’re usually characterized by rudeness.

    • @lucianpascu8445
      @lucianpascu8445 Před 6 měsíci

      @@DesignwithCrackaMy friend, you are above me when it comes to your work and English language but that doesn't imply your teaching style is good. You have a long video for something that can be compacted and presented in a much clear language. Maybe I was rude or maybe not - you can call it the language barrier. However, you should hear and see your videos through the eyes of a beginner ;) and make the necessary changes. There could be lots of people that don't write to you about that and struggling to understand and you will never know. Best.

    • @DesignwithCracka
      @DesignwithCracka  Před 6 měsíci +1

      @@lucianpascu8445 not all my videos are meant for beginners, if you had difficulty understanding anything, you could have simply asked a question for more clarity. When I make a video for beginners, I take the time to explain basic concepts.

    • @lucianpascu8445
      @lucianpascu8445 Před 6 měsíci

      @@DesignwithCrackaMy point was that you can simplify your videos and gain more from that along with your viewers. I am not a begginer when it comes to CSS :) for example but I find BricksBuilder as not intuitive as it surely can and will surely be in time :) Working with classes in this builder is way harder than it should be. Of course I can test and/or read the docs for everything by myself and not look at others that already spent their time deschipering some functionalities not very cleverly implemented in the UI but sometimes is faster to do the latter. Not in this case so therefore my comments. You're doing a great job but why not doing it much better? :) At least for personal satisfaction if nothing else. Best.

  • @brianPowalski
    @brianPowalski Před rokem

    nice tutorial. rather see your beautiful face rather than this fake "james smith", just sayin