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

  Рет қаралды 4,213

Web Squadron

Web Squadron

Күн бұрын

We've held off releasing this until we'd covered some basics - and didn't want to overwhelm you.
Now we're ready to unleash the power and ease of using the Bricks CSS Class System :)
Bricks 101 Part 12 - Bricks Classes - Making your work efficient - BricksBuilder #wordpress Tutorial
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
👕 Get our Merchandise: websquadron.co.uk/merchandise
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your KZfaq Analysis: www.tubebuddy.com/websquadron
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩‍💻 Visit websquadron.co.uk

Пікірлер: 32
@fedestock1815
@fedestock1815 Ай бұрын
Thank you for this content. Really useful!!
@LeoMerkel
@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
@websquadron Жыл бұрын
Any time!
@TakuapaFriends
@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
@websquadron Жыл бұрын
Don't worry about the earlier videos. It's all about easing them in. All videos going forwards use Classes now :)
@ThomStanton
@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. 🙂
@Sinanisler
@Sinanisler Жыл бұрын
this is much more powerfull than global element styling. it is almost like a tailwind or bootstrap :)
@websquadron
@websquadron Жыл бұрын
So True :)
@GeorgeWebDevCy
@GeorgeWebDevCy Жыл бұрын
Thiis is exactly what make me love Bricks CSS classes
@websquadron
@websquadron Жыл бұрын
Hehe :) I held off doing the Classes Tutorial - but right before we hit the Hero Video, it's time to unleash :))))
@GeorgeWebDevCy
@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.
@antonichristian5845
@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
@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
@websquadron Жыл бұрын
Great point :)
@michaeltrull5788
@michaeltrull5788 3 ай бұрын
Great video
@websquadron
@websquadron 3 ай бұрын
Thanks!
@MJScottPhoto
@MJScottPhoto Жыл бұрын
One word - Webflow.
@LeoMerkel
@LeoMerkel Жыл бұрын
Here's the link from yesterdays session: kzfaq.info/get/bejne/gJ6li7iXvrK9mWQ.html
@davidwalls2304
@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
@websquadron Жыл бұрын
Absolutely yes :)
@sproksch87
@sproksch87 Жыл бұрын
Thx for this nice video. Does this also work like this with elementor?
@websquadron
@websquadron Жыл бұрын
I do need to do a version for EL when the final Flexbox is out
@sproksch87
@sproksch87 Жыл бұрын
@@websquadron i´m lookin forward for this video :)
@thebigbadman04
@thebigbadman04 Жыл бұрын
If the class is not highlighted yellow, its applying the css properties to the ID of the element?
@websquadron
@websquadron Жыл бұрын
Yes - just to that element. Yellow means it will apply to all that contain that class.
@RyudoFanel
@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
@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
@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
@websquadron Жыл бұрын
@@RyudoFanel Very useful insight.
@vigilantezack
@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
@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.
Final muy increíble 😱
00:46
Juan De Dios Pantoja 2
Рет қаралды 49 МЛН
KINDNESS ALWAYS COME BACK
00:59
dednahype
Рет қаралды 107 МЛН
A new approach to container and wrapper classes
25:27
Kevin Powell
Рет қаралды 247 М.
Bricks: Build-Your-Own Fluid Typography Framework
41:27
Dave Foy
Рет қаралды 12 М.
The Man Who Solved the World’s Hardest Math Problem
11:14
Newsthink
Рет қаралды 438 М.
Easily overlap content with CSS Grid in Bricks Builder | WordPress Tutorial
14:28
Сумасшедший бассейн с волнами в Китае
0:16
Короче, новости
Рет қаралды 3,1 МЛН
Which water gun won??
0:25
YJTOYNIKOLA
Рет қаралды 8 МЛН
35 million watched superman video
0:13
Hasan Kaval
Рет қаралды 237 МЛН
孩子多的烦恼?#火影忍者 #家庭 #佐助
0:31
火影忍者一家
Рет қаралды 45 МЛН