Holy f, thanks!! I was changing my elements one by one when I needed to change a color lol, now they are all attached to the same class I defined. Thanks a lot.
thats awesome! if you have class like .icon where all styles are dark, you can create a modifier class like .icon--light for icons you want to have a lighter color variation. or a different approach would be something like .container--dark .icon{ color: white; } .container--light .icon{ color: black; } the best part about classes is you can always go change the style in one single place instead of all over your site. cheers mate.
@@aperturedigitalmarketing yes, thanks!! your video opened my mind and did something similar as you said for buttons :D .button-light and button-dark much easier to work after defining it !
Thanks for this video. I use ACSS and Frames also and had a question about your workflow. I'm relatively new to these tools (including Bricks) so trying to lock down a workflow that's good for me. Anyway here is the issue for me so far (let's forget I have AT for now). I import a Frames template, then I rename the classes to fit my project. All good. The problem is, on another page if I import that same template, what gets put on the page is the template with the newly renamed classes from the other page, NOT the class names that came with the template. So now I have two pages that are using the same template, and have all the same classes applied. This may be good or bad depending on your design. In my case it's usually bad - I want each template I import to be independent of other templates in many cases. If I use AT's Class Converter, and I set a new class name for my template, is it simply renaming the classes that are already there, or is it creating new classes and copying the styles over? If it's the first, it is not very useful to me because I'll have the same issue with multiple template instances having the same classes applied. If it copies the styles over, then I have a template on a page that is independent of any other on the site. Wondering how you handle this type of situation in your workflow? TIA
If you use AT component class manager to duplicated the class, it creates brand new classes and brings over the styles. AT is is the best thing ever. Right click the element in the structure panel, select component class manager. Then, select bulk actions and choose duplicate. Hope this works for you!
Excellent, thank you. I love Bricks but think the template import logic is terrible. It should ask you what you want to do with the classes on import - create new classes or don't create new classes. It looks like Bricks used to append "__imported" if there are duplicate class names but it doesn't do this anymore. I understand the benefit of having it both ways which is why I think it ought to ask.
@@robk72 I agree with you there, not much flexibility. I think the components feature may solve this. With components you should be able to do exactly what you're describing. That should be released this quarter in beta.
I use ACSS on all my sites because it's the most complete framework out of the box. Using it speeds up development immensely. But no, you don't have to have it. Bricks Forge has a small framework that comes with it. Advanced Themer can build out a CSS framework but you have to build out all the styles and rules yourself.
I see you have ACSS also.. I'm wondering if this method could be used to move (better yet, rename) ACSS / Frames styling to something else without breaking? I like to have all of my naming convention based on the project's name itself.
Yes. my workflow is to import a frame from Frames and then use a different AT tool to bulk rename. In the class manager, you can bulk rename classes. Super easy and intuitive!
@@hariswami4827 I believe my workflow is going to change after the Bricks components are released. I'll do a video on the topic once I get a handle around components. Right now, my preferred ACSS/Frames workflow is to import the frame into a section template. Then I rename the classes using AT using my own naming conventions. If the Frames template is a global template, I insert it where I need to using the template component. If the Frame is going to be unique, I'll insert it on the page and assign new class names where appropriate using the BEM -- modifier.
Holy f, thanks!! I was changing my elements one by one when I needed to change a color lol, now they are all attached to the same class I defined. Thanks a lot.
thats awesome! if you have class like .icon where all styles are dark, you can create a modifier class like .icon--light for icons you want to have a lighter color variation.
or a different approach would be something like
.container--dark .icon{
color: white;
}
.container--light .icon{
color: black;
}
the best part about classes is you can always go change the style in one single place instead of all over your site.
cheers mate.
@@aperturedigitalmarketing yes, thanks!! your video opened my mind and did something similar as you said for buttons :D .button-light and button-dark much easier to work after defining it !
Video starts at 1:00
Thanks for this video. I use ACSS and Frames also and had a question about your workflow. I'm relatively new to these tools (including Bricks) so trying to lock down a workflow that's good for me.
Anyway here is the issue for me so far (let's forget I have AT for now). I import a Frames template, then I rename the classes to fit my project. All good. The problem is, on another page if I import that same template, what gets put on the page is the template with the newly renamed classes from the other page, NOT the class names that came with the template. So now I have two pages that are using the same template, and have all the same classes applied. This may be good or bad depending on your design. In my case it's usually bad - I want each template I import to be independent of other templates in many cases.
If I use AT's Class Converter, and I set a new class name for my template, is it simply renaming the classes that are already there, or is it creating new classes and copying the styles over? If it's the first, it is not very useful to me because I'll have the same issue with multiple template instances having the same classes applied. If it copies the styles over, then I have a template on a page that is independent of any other on the site.
Wondering how you handle this type of situation in your workflow?
TIA
If you use AT component class manager to duplicated the class, it creates brand new classes and brings over the styles. AT is is the best thing ever.
Right click the element in the structure panel, select component class manager. Then, select bulk actions and choose duplicate.
Hope this works for you!
Excellent, thank you. I love Bricks but think the template import logic is terrible. It should ask you what you want to do with the classes on import - create new classes or don't create new classes. It looks like Bricks used to append "__imported" if there are duplicate class names but it doesn't do this anymore. I understand the benefit of having it both ways which is why I think it ought to ask.
@@robk72 I agree with you there, not much flexibility.
I think the components feature may solve this. With components you should be able to do exactly what you're describing. That should be released this quarter in beta.
What a find you are! Thank you! Please do a tut on CTT,s in Bricks
Great Class! you should make a playlists of short videos like this about the most essential features of AT
Done.
Thanks for sharing!
Thanks for watching!
This is why you should use Automatic CSS with combo utility classes. Never add styling on the ID level!
Yea styling using BEM was kind of the point of the video and the Class Converter from Advanced Themer. I guess you didn't watch much of it.
So with Bricksforge and Advanced Themer do you need ACSS? I just picked up both AT and BF
I use ACSS on all my sites because it's the most complete framework out of the box. Using it speeds up development immensely.
But no, you don't have to have it.
Bricks Forge has a small framework that comes with it.
Advanced Themer can build out a CSS framework but you have to build out all the styles and rules yourself.
I see you have ACSS also.. I'm wondering if this method could be used to move (better yet, rename) ACSS / Frames styling to something else without breaking? I like to have all of my naming convention based on the project's name itself.
Yes. my workflow is to import a frame from Frames and then use a different AT tool to bulk rename. In the class manager, you can bulk rename classes. Super easy and intuitive!
It would be nice if you could show how you use ACSS and frames with AT. After you move the classes from frames do you deactivate frames and ACSS?
@@hariswami4827 I believe my workflow is going to change after the Bricks components are released. I'll do a video on the topic once I get a handle around components.
Right now, my preferred ACSS/Frames workflow is to import the frame into a section template. Then I rename the classes using AT using my own naming conventions.
If the Frames template is a global template, I insert it where I need to using the template component. If the Frame is going to be unique, I'll insert it on the page and assign new class names where appropriate using the BEM -- modifier.
Hi, I hope you don't mind but I put a link to this video in Online Documentation Advanced Themer. Let me know if you disagree and I will remove it.
That's fine with me, thanks!
curious, what are you using to record your tutorials?
The software is called Screen to Video.
oh wow, I have that too, how are you liking it thus far?@@aperturedigitalmarketing