Bricks 101 Part 12 - Bricks CSS Classes - Work efficiently - BricksBuilder

[@LeoMerkel]

BTW Imran, the session with you and Paul yesterday evening was of great value for me. Very informative. Tnx for taking the time.

[@websquadron]

Any time!

[@ThomStanton]

Picking up more bits and pieces from you in a rather non-linear fashion. Headed over to Headers tutorial now. Good to know how CSS can be managed in that type of element. Thanks again. 🙂

[@TakuapaFriends]

Using custom classes in bricks is like discovering the 3/4 gear in a Ferrari. Without is more like driving the car in gears 1/2 only. And with global classes and var it is like finding gear 5/6.. also. Custom classes made me fall in love with bricks. With them I can push myself every day. Even your very simple example shows how great this is. You should do your 101 Parts again, but this time with classes used. :) Always nice to have good frame for naming of classes.

[@websquadron]

Don't worry about the earlier videos. It's all about easing them in. All videos going forwards use Classes now :)

[@GeorgeWebDevCy]

Thiis is exactly what make me love Bricks CSS classes

[@websquadron]

Hehe :) I held off doing the Classes Tutorial - but right before we hit the Hero Video, it's time to unleash :))))

[@GeorgeWebDevCy]

@@websquadron I know why you held back. You didn't want to scare people but classes in brick are a game changer. You know how clients say give that section a different color accross the site and you have to go thought all the pages. This just makes it like a 1 minute job.Effieciency.

[@fedestock77]

Thank you for this content. Really useful!!

[@antonichristian5845]

great stuff Imran and very powerful... also you can create a class go to the style tab and scroll down and if you're comfortable writing css you can add your own styles in the custom css box... you don't even have to change styles in the styles tab...

[@LeoMerkel]

Even more comfortable it gets with Code Box. You can write SCSS with all it's fantastic efficiency boosters. And you have all your Custom Code in one place. Great Combo.

[@websquadron]

Great point :)

[@Sinanisler]

this is much more powerfull than global element styling. it is almost like a tailwind or bootstrap :)

[@websquadron]

So True :)

[@fedestock77]

Would you mind elaborating a little bit more on why you think this? So far, for what I've seen, classes seem much more efficient and clear than global styles but I don't feel I understand 100% why.

[@michaeltrull5788]

Great video

[@websquadron]

Thanks!

[@sproksch87]

Thx for this nice video. Does this also work like this with elementor?

[@websquadron]

I do need to do a version for EL when the final Flexbox is out

[@sproksch87]

@@websquadron i´m lookin forward for this video :)

[@MJScottPhoto]

One word - Webflow.

[@davidwalls2304]

Imran, I am rebuilding a website and REALLY wish I would have taken advantage of the class system. One question, can you have multiple settings inside the class for different breakpoints? For example, you used a padding 20, could you change to mobile and change that to 25 then have that style set for different values at different breakpoints? Thanks

[@websquadron]

Absolutely yes :)

[@RyudoFanel]

I wonder how useful automatic.css is in that case. I mean, even if the plugin takes a lot of work off your hands by providing many classes automatically (and already calculated), in the end you can do everything yourself with some effort. I must admit, I'm currently hesitating a bit with the purchase, even though it is supposed to be the Holy Grail for Bricks.

[@websquadron]

To be honest I need to dig deeper more into Automatic CSS too as I am not convinced that I would completely need it. Or could I just use an alternative free solution like SiteOrigins css or Microthemer.

[@RyudoFanel]

@@websquadron I tested Automatic CSS for a few days by now and to be honest: From my point of view it is definitely NOT worth the 99$ / year. Some features are certainly "nice to have", like fluid typography or fluid spacing. You don't have to worry about them at all. They work out of the box. Honestly, it would be amazing to see similar features in Bricks natively. The colors would also be great if they would work 100%, but they seem to have CSS specificity problems now and then. Everything else from the CSS framework like the predefined classes etc. you can create yourself. It's more work of course, but you have full control over them. Above all: Your own classes don't go AGAINST Bricks. With Automatic CSS I had sometimes the feeling they work against Bricks. In the end I got the plugin refunded. Thought I would let you know about my experience with the plugin.

[@websquadron]

@@RyudoFanel Very useful insight.

[@vigilantezack]

ACSS isn't just some utility classes, it's also a kind of an automatic utility class generator. Basically if you change the settings in the backend settings, it generates all those classes with the new values automatically. Not only that, but it generates all the CSS variables that go with them. You can't always apply a class, sometimes you only need the variable that the class uses for a specific situation. ACSS also has some functionality that effects selector chains. So it isn't just a single class or single variable that affects the direct element you put it on, for example owl spacing. If you apply it to a parent, it spaces out everything under it. Normally when a class is applied to an element, it only affects that element, but these extras apply to children as well. Further, all the utilities and classes have their responsive breakpoint alternatives where it makes sense. Like adjusting grids and flexboxes. Overall, ACSS gives you a ready-to-go fully functioning CSS class/utility/variable system that can be automatically adjusted and rewritten when you change a few settings in the backend. You could write out your own system, for sure, but it's also nice to have something ready to go that will only get better in the future. Lastly, since ACSS works on Bricks and Oxygen (not sure what else or what they are working on), you can apply this system across different projects easy enough for a consistent approach. Just my .02

[@RyudoFanel]

@@vigilantezack ACSS locks you into another subscription model, with no real benefit (yeah, I mean, you are maybe 5 seconds faster. Woohoo!), while every one of your sites will be dependent on the plugin in the future. Another lock-in. The utility classes, fluid system, color management etc are all nice, but nothing is generated "automatically". It's basically just a CSS framework with fluid CSS (typography, spacing like padding and margin etc). You can do all of this yourself relatively easily with minimal effort, and you retain complete control over your classes. ACSS on the other hand forces the workflow of the plugin (or Kevin) on you. The moment you want to deviate from the imposed workflow, the plugin causes problems. Let's be honest: The fluid system and the color management are the only things ACSS has to offer by now (especially now that CSS Grid has been implemented in Bricks). But it is definitely NOT worth $99 per year. Not by any stretch of the imagination. At least not for Bricks. No idea about Oxygen, but I personally have no interest in it after the debacle with Breakdance. Bricks needs 2-3 more features and ACSS would be obsolete anyway: A fluid system, a better color management and a global class and variables library. The latter is on the roadmap and can theoretically, if well implemented, offer the possibility to use your own CSS framework.

[@LeoMerkel]

Here's the link from yesterdays session: kzbin.info/www/bejne/gGnYiYicjrGMn5I

[@thebigbadman04]

If the class is not highlighted yellow, its applying the css properties to the ID of the element?

[@websquadron]

Yes - just to that element. Yellow means it will apply to all that contain that class.

[@einhorn3113]

The class naming convention might not be the subject of this video, but your class naming (like ".Pad-20px") is a bit confusing to me. Nowhere else do you find capitalized classes, and what if you change your 20px to 50px ? There is another video by "WP Easy" that explains Bricks with the BEM convention.

[@websquadron]

Agreed. Using BEM is better. Best not to watch my videos that were recorded almost 2 years ago.