Great video and use case for interactions! Love your teaching style, so clear and easy to follow. Tailwind: Please do not encourage folks to use tailwind in a page builders. Its a utility first framework built to be used with code editors NOT page builders. Since page builders do not have multi line editing, a site with more than a few pages would turn into a nightmare to scale using tailwind. That said, I do thinkTailwind is a powerful framework and can speed up dev time, but only if you are developing in a code editor. Example at 10:45 when you forgot to apply the color to the labels and needed to copy paste classes. Imagine you had not noticed that and used those cards all over your site. You now have to copy/paste this 20, 30 times across multiple pages, assuming you can remember where everything is...yikes. A more realistic example is a client want those labels blue instead of grey…. Since you used a utility class, you now have to spend so much time finding and replacing them all. Not trying to be a downer on Tailwind… just warning others who might be considering using it with page builders. I recommend using a framework built with page builders in mind (which means they leverage variables to style custom classes).
I'm definitely jumping into Tailwind and Bricks as an experiment and it's early days. I'll document how it works and what I find along the way in my vids so others can see if its a good choice or not over time. If anything, maybe I can show why it isn't a good choice There's a few things I've stumpled upon that aren't too far off being released that are centered around using tailwind in bricks that I am keen to try out.
I would recommend you familiarize yourself with BEM. So you can avoid DRY (DON'T REPEAT YOURSELF) An example is when you created the four columns at 5:25 you should be applying classes to those, then styling the class with variables. This will hep with scalability and maintainability. Because when you need to change the a single thing like spacing for example, you'll be applying a new class to all of those columns which is very repetitive.
Brilliant tutorial. It is not just a simple overview but an advanced one. I learn a lot since I hardly understand all the terms and relations within class, attribute etc. Thank you so much for your work.
If you're using this new Interactions feature or TailwindCSS, let me know how you're finding them in the comments below! Also, here's a link to the plugin I use to integrate the TailwindCSS CSS framework into Bricks Click Here 👉 wagepirate.com/go/winden?campaign=youtube-bricks-builder-interactions
Holy smokes! I'm gonna have to up my game to follow your fast-paced teaching style. This lesson would have taken the average guy 4X the amount of time to cover this much information. Great job.
Yeah BEM naming would save you some time even in this example and if this was a larger site it would be a huge mess to update things using tailwind. BUT I'm commenting because I have my framework that I've adopted after ACSS ended up being a mess. The nice thing about tailwind is they give you the values. I've adopted some of their variables and other sizing into my framework in Advanced Themer. And some utility classes are still nice to have.
@@GrantAmbrose The easy answer is it's glitchy. The global colors were coming in and out. Like they wouldn't update in the menu properly which were live and which weren't which would then bug out where those colors were. It would be fine on one install but not on another. Given everything else going on it just wasn't worth the gamble when I'm doing client sites! And advanced themer has pretty much everything I need since I already have my own framework laid out.
Great video! Are you using Winden? Nintu? Could you make a video showing how you set up your Tailwind setup in Bricks? I like the idea of designing first for handheld. Please continue to study this and make a video about this.
I have Winden and Nintu. Before I dive deeper into it I am waiting for the "Bricks Plain Classes" plugin to be released. Hopefully soon. I cover it in the Tailwind video if you're curious. There is a chapter marker that mentions it so you can go to that point directly and see what it is. But 100% I want to focus more on the CSS framework videos in the near future
Nice tutorial. I am also very excited about this new feature. Finally, native JavaScript events support. Something is broken with your style in the builder?
Oh yeah, I’m not sure why that’s happening. It’s Been that was for a while now lol I thought maybe it was a bug with the beta or something. You don’t have this issue I guess?
@@GrantAmbrose No maybe a custom builder style you're using? Like the series… following for more Winden and Tailwind stuff and the interactions are awesome!
Gday Grant, do you have a link for the multiste Bricks yet? gona pull the trigger today, and thought as you go a long way in putting such good instuctional videos i would show some thanks 😀
Wow thanks! They don’t have an affiliate program until early next year the last I heard, so please go ahead - but thank you for checking, that’s really cool!
you would need to create your own php function, but it is definitely doable and not too difficult. Look into the "echo" function that you can use in conditions
Hey Grant This is great, really speed things up. I am redesigning my website in bricks, whew dusting off code knowledge since relying on beaver builder so much. Do you have to add a plugin to make brick tailwind css or does it just pick it up ?
You're going to have a lot of fun with Bricks and Tailwind if you get the time to test it out. It's a lot different to use Beaver but I've actually found that the two are reigniting my interest in CSS and frontend design overall (something I haven't enjoyed for years).
I am thinking of picking up Oxyprops and giving it a go too so I can get a feel of how it works. I do like that tailwind is popular outside of WordPress so the skills I learn using it seem a bit more expandable career wise, but I think I need to build some more stuff with these things to see how they go as I'm new to the whole CSS framework thing - hope that helps!
@@GrantAmbrose thanks, Im new into as well and ACSS seems to be good too. But both are for Wordpress only. Its a good point of view regarding Tailwind which also works outside of Wordpress, good input!
@@GrantAmbrose Yeah, Bricks is turning into a cult around ACSS… I like that you're doing Tailwind as it shows how to use it nicely. There is still a big gap on educators in the Bricks Community for that topic! Specially as it is something that one can use in other areas later on or when being part of a team that does React or Vue with Tailwind.
In this example, I was playing around with Tailwind CSS as the css framework, which only uses divs and css classes. If I were just using normal bricks, I would have used sections / containers. The video I just published today explains it in more detail if you're curious - thanks!
how to bricks filter with show celebrities birthday on today , how it is display in single page like today celebrity birthday/ this week/ month celebrity post filter by date of birth of today event how to display with briks builder
Great video and use case for interactions! Love your teaching style, so clear and easy to follow.
Tailwind: Please do not encourage folks to use tailwind in a page builders. Its a utility first framework built to be used with code editors NOT page builders. Since page builders do not have multi line editing, a site with more than a few pages would turn into a nightmare to scale using tailwind. That said, I do thinkTailwind is a powerful framework and can speed up dev time, but only if you are developing in a code editor.
Example at 10:45 when you forgot to apply the color to the labels and needed to copy paste classes. Imagine you had not noticed that and used those cards all over your site. You now have to copy/paste this 20, 30 times across multiple pages, assuming you can remember where everything is...yikes. A more realistic example is a client want those labels blue instead of grey…. Since you used a utility class, you now have to spend so much time finding and replacing them all.
Not trying to be a downer on Tailwind… just warning others who might be considering using it with page builders. I recommend using a framework built with page builders in mind (which means they leverage variables to style custom classes).
I'm definitely jumping into Tailwind and Bricks as an experiment and it's early days. I'll document how it works and what I find along the way in my vids so others can see if its a good choice or not over time. If anything, maybe I can show why it isn't a good choice
There's a few things I've stumpled upon that aren't too far off being released that are centered around using tailwind in bricks that I am keen to try out.
It depends. One option is using @apply, which can be pretty powerful in its own right. All depends on how you work with utilities.
ACSS is a much better option
I would recommend you familiarize yourself with BEM. So you can avoid DRY (DON'T REPEAT YOURSELF) An example is when you created the four columns at 5:25 you should be applying classes to those, then styling the class with variables. This will hep with scalability and maintainability. Because when you need to change the a single thing like spacing for example, you'll be applying a new class to all of those columns which is very repetitive.
Thanks! I will take a look at that
Webflow vibes 😍go Bricks!
Brilliant tutorial. It is not just a simple overview but an advanced one. I learn a lot since I hardly understand all the terms and relations within class, attribute etc. Thank you so much for your work.
Glad you enjoyed it and thanks for the great comment
If you're using this new Interactions feature or TailwindCSS, let me know how you're finding them in the comments below!
Also, here's a link to the plugin I use to integrate the TailwindCSS CSS framework into Bricks
Click Here 👉 wagepirate.com/go/winden?campaign=youtube-bricks-builder-interactions
Holy smokes! I'm gonna have to up my game to follow your fast-paced teaching style. This lesson would have taken the average guy 4X the amount of time to cover this much information. Great job.
Thanks!!
Yeah BEM naming would save you some time even in this example and if this was a larger site it would be a huge mess to update things using tailwind. BUT I'm commenting because I have my framework that I've adopted after ACSS ended up being a mess. The nice thing about tailwind is they give you the values. I've adopted some of their variables and other sizing into my framework in Advanced Themer. And some utility classes are still nice to have.
Why did ACSS become a mess?
@@GrantAmbrose The easy answer is it's glitchy. The global colors were coming in and out. Like they wouldn't update in the menu properly which were live and which weren't which would then bug out where those colors were. It would be fine on one install but not on another. Given everything else going on it just wasn't worth the gamble when I'm doing client sites! And advanced themer has pretty much everything I need since I already have my own framework laid out.
Great tutorial, Thanx
Great video. But Automatic CSS and BEM for me when it comes to using CSS in a WordPress ecosystem, namely Bricks and Oxygen.
thank you for your comment Gavin. I'll try ACSS one day soon, I just need the time but it sounds like I need to give it a go for sure
Thanks mate. You gained a fan.
thanks!!!
Good job Grant !
never used bricks builder but after this video i feel like i'd be pretty good at it
hehe thanks! give it a go, it's awesome!
Great video! Are you using Winden? Nintu? Could you make a video showing how you set up your Tailwind setup in Bricks? I like the idea of designing first for handheld. Please continue to study this and make a video about this.
I have Winden and Nintu. Before I dive deeper into it I am waiting for the "Bricks Plain Classes" plugin to be released. Hopefully soon. I cover it in the Tailwind video if you're curious. There is a chapter marker that mentions it so you can go to that point directly and see what it is. But 100% I want to focus more on the CSS framework videos in the near future
What a tutorial !
Thanks a lot.
Glad you liked it and thank you for taking the time to leave a comment
Thanks for providing excellent instructions.
thanks!
Please do more tailwind videos, we need that!
That's epic! Bricks 🔥
Have you researched ACSS vs Tailiwind?
Not yet, over time I should get to testing it but I am only just starting with it all. Are you using it?
This is very cool - thx for the super clear demo. I'm assuming we could also do some nice transitions, with easing, to the interactions?
thanks! Hmm I haven't tried so not sure on that one
Nice tutorial. I am also very excited about this new feature. Finally, native JavaScript events support. Something is broken with your style in the builder?
thanks Max! Which part in the builder was broken? :S
@@GrantAmbrose 0:25 when you hover the font becomes black?
Oh yeah, I’m not sure why that’s happening. It’s Been that was for a while now lol I thought maybe it was a bug with the beta or something. You don’t have this issue I guess?
@@GrantAmbrose No maybe a custom builder style you're using? Like the series… following for more Winden and Tailwind stuff and the interactions are awesome!
Gday Grant, do you have a link for the multiste Bricks yet? gona pull the trigger today, and thought as you go a long way in putting such good instuctional videos i would show some thanks 😀
Wow thanks! They don’t have an affiliate program until early next year the last I heard, so please go ahead - but thank you for checking, that’s really cool!
Nice tutorial! Thanks 😊 One question: Is there a way to disable the option to click on it, if it's already active?
you could apply a new CSS class on click and then in your CSS change the cursor for that class to not be a pointer?
IS there a way to hide an element based on page views using conditions in bricks
you would need to create your own php function, but it is definitely doable and not too difficult. Look into the "echo" function that you can use in conditions
Hey Grant
This is great, really speed things up. I am redesigning my website in bricks, whew dusting off code knowledge since relying on beaver builder so much. Do you have to add a plugin to make brick tailwind css or does it just pick it up ?
Sorry, I see you have already covered that.
You're going to have a lot of fun with Bricks and Tailwind if you get the time to test it out. It's a lot different to use Beaver but I've actually found that the two are reigniting my interest in CSS and frontend design overall (something I haven't enjoyed for years).
What do you think about the other frameworks like ACSS and Oxyprops? Does Winden/Tailwind has more benefits/feautures?
I am thinking of picking up Oxyprops and giving it a go too so I can get a feel of how it works. I do like that tailwind is popular outside of WordPress so the skills I learn using it seem a bit more expandable career wise, but I think I need to build some more stuff with these things to see how they go as I'm new to the whole CSS framework thing - hope that helps!
@@GrantAmbrose thanks, Im new into as well and ACSS seems to be good too. But both are for Wordpress only. Its a good point of view regarding Tailwind which also works outside of Wordpress, good input!
@@GrantAmbrose Yeah, Bricks is turning into a cult around ACSS… I like that you're doing Tailwind as it shows how to use it nicely. There is still a big gap on educators in the Bricks Community for that topic! Specially as it is something that one can use in other areas later on or when being part of a team that does React or Vue with Tailwind.
Any reason why you do not use native sections and containers?
In this example, I was playing around with Tailwind CSS as the css framework, which only uses divs and css classes. If I were just using normal bricks, I would have used sections / containers.
The video I just published today explains it in more detail if you're curious - thanks!
How can i make these ease-in instead of just appearing instantly? Ive tried messing with the "CSS > Transition" value with no luck so far
I’m not sure to be honest :s
how to bricks filter with show celebrities birthday on today , how it is display in single page like today celebrity birthday/ this week/ month celebrity post filter by date of birth of today event how to display with briks builder
You don't speak about javascript functions.
What would you like me to cover? JS isn't my strongest skill
Automatic CSS is a better solution in my opinion but it is not open source.
ACSS is better trust me
Have you by chance used both ACSS and Oxyprops? They're two that are on my list to look at
Stopped watching on 'we are gonna use Tailwind'
what framework are you using yourself?
@@GrantAmbrose no framework, i have a set of custom rules which i reuse project after project