Mastering Bricks Builder - Global Classes For Beginners

[@marszu-com]

Purchasing Bricks was one of the best investments I have made recently. I am finishing the third website project and I feel better and better at it. I can't imagine building a website without using CSS classes. The worst thing is that I still have to pay for Elementor because I maintain several projects with it. However, returning to this builder after using Bricks seems like a nightmare. :) Thank you for another factual video.

[@WPTuts]

I agree - going back to Elementor after working with Bricks feels like you're working with one hand tied behind your back.

[@marszu-com]

@@WPTuts An exceptionally apt metaphor Ha ha ha ha :)

[@RR-ok4wz]

Another amazing tutorial. Thanks, Paul!

[@youtut]

Now when I watch the Bricks Builder tutorial videos, I can't concentrate unless it's Paul's face.

[@road2wp809]

Aamzing video of bricks and css classes, learn a lot, thanks.

[@BGdev305]

Probably should have at the very start 'mentioned' theme styles vs global styles.. since this is geared towards the elementary understanding of 'styles' in Bricks. Also, you when you click off of the selected element's class (during the BEM part), I think better practice is to use modifiers instead of styling on the ID level.

[@marszu-com]

"think better practice is to use modifiers instead of styling on the ID level." - Please explain what you mean. (my English is not good).

[@skysavvydrone]

Hey Paul, long-time Elementor user here who recently made the jump and am voraciously going through your content...question on classes: when I open the Classes/Variables library to see all my classes it says I have over 1000 of them..curious if there's any performance considerations in having so many? I didn't create over 1000, by the way :-). Not entirely sure how the number got up so high so fast! Only been messing with Bricks for a few days alongside Brixies, Advanced Themer and CoreFramework. Thank you! Second question: my global classes aren't always pickup up the style of the class after I apply it. If I go in and look at the attributes of the button, all of the attributes assigned to the class are there. It just isn't rendering that way on the front page (sometimes it does on some sections and others the button kinda goes its own way). Specifically the button colors, even though the color picker reflects what I selected for the global class. I checked that there were no existing styles on the button without the class applied so there is no tug-of-war going from what i can see. (but there is some "generated html" autopopulating that looks fishy) Any tips?

[@dragon3602010]

awesome thanks, do you think it will be possible in Elementor or Divi to do it with some workarounds?

[@JoyHints]

Why don’t you just switch to bricks?

[@WPTuts]

Not really, they don't support global classes natively.

[@Jim.Hummel]

Solid overview on Global Classes. Though Bricks is incredibly powerful on its own, and once one is comfortable with Classes, the addition of a tool like CF or ACSS is a huge multiplier! I just noticed your keyboard...is it new? Do you have a source?

[@israelplaza9840]

And copy and paste modules, sections in divi will not be the same ? And even better they can be saved in cloud and used them all across your sites or is some difference that I’m not looking at.

[@dragon3602010]

yeah i am wondering too

[@WPTuts]

No, that is a totally different concept. While this is a very simple demonstration of working with global classes, utility classes, etc., copying and pasting any elements has a lot of inherent limitations. It is not as flexible in practice.

[@enjoy5518]

Thanks for the video, May I ask about the video editor you use?

[@WPTuts]

I use Final Cut Pro 11 :)

[@enjoy5518]

@WPTuts Thanks Paul 😍

[@WPTuts]

@@enjoy5518 no problem at all. :)

[@alfanur_rizal]

Nice

[@PicSta]

Hey Paul, there is one thing you have shown, where I must disagree, because it's bad habit/practice to do so. If you're deselecting a class to make changes to a specific element, then you change everything on an ID basis. Visually it works, but you have hard time to override it again or maintain it. A better way is to use "modifier classes" what you have scratched by naming BEM (Block Element Modifier). This way you can have two variations, or more. For example, two buttons side by side but look differently. A pricing grid, and you want to declare one card as best deal and so on. You create a modifier class naming with a double dash ".btn--outline" and the basic styling goes into ".btn" for example. This way you can have a change in more than one instances, you can reuse it, and apply this to different projects of course. I hope this does make sense to you.

[@WPTuts]

@@PicSta where did I style at the ID level? I agree about using BEM Modifiers, but what I showed in this video was styling either using a global class or using a simple utility class to apply a specific style to an element - the shadow for example.

[@PicSta]

@@WPTuts When you deselect from a class, nothing is selected, where does the styling go to? The ID of the element. A utility class serves a complete different purpose. So I wasn't talking about the shadow.

[@PicSta]

Don't get me wrong, you achieved a button bigger with lighter text. The reason why this is a bad thing to do comes later on, if you change your mind you cannot use a class to override due to lower specificity. Another reason is, if you decide you like that style and want to reuse it, you have to manually do it every time. Then imagine the worst case, you want to change it because out of the sudden blue is the wrong colour for you, what do you have to do? Correct, go to every single button and change it.

[@WPTuts]

@okay, I get the part you’re referring to. It was simply to demonstrate that you can choose to style things outside of the class. I personally don’t see the need to create a separate class or modifier for a single element that you want to change from the parent style. If you’re doing it in multiple locations, fair enough. Styling at the ID level shouldn’t be something that is referred to as bad practice in the right context.

[@marszu-com]

I just read about CSS class modifiers and the rules for their use (style overriding and their hierarchy) - brilliant in their simplicity :) I have to start using them in practice. You are actually right - styling at the ID level is the least beneficial and I conclude that it should not be used at all.

[@BenedickHoward]

🔧 What are Global Classes? Reusable Code: Global classes are reusable pieces of code in your website's stylesheet that define styles for elements across your entire site. Style Templates: They act like style templates for consistent design. For instance, a class called button can define styles like background color and text size. 🕒 Benefits of Using Global Classes Consistency: Define styles once, apply them everywhere, ensuring a consistent design across the site. Easier Updates: Change the style in one place, and it reflects everywhere the class is used. Time-Saving: Reduces the need to rewrite styles for different elements. 🎨 Practical Example of Global Classes Creating a Class: To create a global class, select an element, click to create a class, and style it (e.g., btnPrimary). Real-Time Updates: Changing the style of btnPrimary updates all buttons using that class instantly. 🔄 Instance Overrides CSS Specificity: If you want to change styles for a specific instance (like making one button larger), simply deselect the global class to override it. 📦 BEM Naming Convention BEM Methodology: Use BEM (Block Element Modifier) naming for better organization. For example, a card can have classes like CardHeading for its heading. Standardization: This helps maintain a standardized naming system for team collaboration. 🛠️ Utility Classes Single Function Classes: Utility classes (like Shadow SM) apply specific styles, such as drop shadows, across different elements. Methodical Use: While useful, be cautious of overusing utility classes to avoid clutter. 📋 Managing Global Classes Classes and Variables Manager: Bricks Builder includes a Classes and Variables Manager for organizing, renaming, or deleting classes. Export/Import Options: You can easily export classes for use in different projects. 💡 Key Benefits Recap Consistency: Ensures a uniform design across all pages. Efficiency: Allows for quick adjustments site-wide. Flexibility: Facilitates testing and implementing design changes effortlessly. 🔗 Further Learning CSS Variables: For enhanced flexibility, consider learning about CSS variables alongside global classes.

[@iXzenoS]

This channel might as well rename itself to BricksTuts.