Derick Beauregard shows how macros in HubSpot development handle theming and module management. Using macros cuts down repetitive code and makes your templates easier to maintain and update across projects.
All right. Hey everybody. Welcome to a the second part in a two part series on macros. I am joined once again by Derek of Beacon Digital, who is going to help us take this a little bit further. One step farther. If you've not checked out the first episode, I want to do that fancy like point up YouTube type thing where there'll be a link there somewhere that you can grab. Might be on that side. I don't even remember. So, yeah, go check that out if you need to. If this is a little too in the weeds for you, um, we're gonna put some meat on those bones today. Basically, the TLDR on macros is it's gonna help you keep that, keep things simple and that dry approach. So if you have a component that you're using more than once, it's probably high time to start thinking about making a macro and employing it that way. Would you agree with that, Derek?
I do, yes, definitely.
Perfect. Yeah, let's. Why don't you go ahead and share your screen and let's just show me some amazing things.
Cool. One sec. All right. Can you see it?
Love it.
Awesome. Yeah. So the first part we covered the basics. We went over how to create a macro, how to import it into a different file, and then how to add parameters to it. So one thing that's going to be missing from this one is adding parameters. Just because in this instance it's not how we're using it. But I did want to cover this because this really works well into theming, which is obviously very important in HubSpot development right now. So I'll just jump right into it. Yeah. So we've kind of stuck to a standard module in our theme. And within any given theme there's, I don't know, maybe 15, 20 modules. And each module has the same options in it. We have a header option, the body of it, and then a footer option. And then within each of those components there are standard options for spacing and width and things like that and alignment. So what we did was we broke out each one of these sections into its own macro. And now we can feed, just feed the macros into each different module. That way, if there is some global edit to the, to our overall structure, we're making it in one place, which is the ultimate goal of a macro. So. Yeah, yeah. So what I'm showing you here is what our modules looked like before we broke it out. So here's our overall section. This is the. And within the section you have our options for spacing and color and things like that, and then the header, the body of the module here, and the optional footer. So, yeah, any, any questions or should I check?
No, no. This, this is basically a lot of content here. We've got a lot going on. Adding this multiple times is going to get pretty heavy pretty quickly. And I think anyone can start to see how if you need to make a change, it suddenly becomes kind of confusing if you have to do this in 20 different places.
Exactly right. And if you miss one module, then you're not creating the consistent, the consistent feel that you should be delivering to your clients. So, yeah, perfect candidate for a macro. So I'll jump into the actual macro file now where we have everything broken out. I can kind of toggle back and forth if need be. But so these are all the components of the section. So this is us building out a background video. If we want to import a background video into a module. This is our section classes. So the top level element, our top level element within the, within the module, this creates all the classes for it and it all feeds. All of what you see here is feeding from the module fields. So those still need to be created. But this takes a piece out of it.
Right.
And as we step through here, just more options for different or more settings for different options within the module classes, blending background colors, background images. And then we have our section header component here and then our body classes. So we don't build the body as a macro because that, that's the one piece within a module that is typically unique to that module. So but we do have this, this piece of it built out with, with a macro so that we can just add our classes and globally any kind of animation we want to add. And then the footer. So this is everything you see here was really within is just slight variation of what you saw in the before macro module. Sorry, so now if I jump into our. After close these out now we see a much, a much cleaner module here. So we have our body here, which we're building out as a local macro. But this is, this is like I said, unique to each module. Okay, sorry, let me take a step back. So we're importing our file too. And then each. And now here is now the module. We've got it down to seven lines of code right here because it's all pulling in. So yeah, this has really helped us out a lot. There's been some great applications for where this, this came in handy where we decided that we wanted to make some, some bootstrap updates and things like that. And they were just made in. In one place.
Yeah. I think this is just a. This illustrates how much easier it is to, I guess, even navigate through the code. I mean, you have a very simple, what, seven lines of code right there. You can easily see where you're pulling that in from. And if you go to the macros, you'll find that specific, you know, a little snippet of code right there, that.
Right.
In one place, and you are basically good to go wherever this module is being used or that macro.
Right, right.
Yeah, yeah, yeah. I think this is a great example. Thank you for walking us through this. Are there any other things you want to do or. Because I think really, this sums up what a macro does. I feel like this is kind of the icing on the cake. Thank you, seriously, for walking through this.
Yeah, yeah, no problem. I think it's a great example because it's not overly difficult to create, but it saves a ton of time when you're building out a theme.
And I want to just. Anyone out there watching this who have their own examples, I would love for you guys to share your thoughts or maybe some problems you're having. And we're all going to be there as a community to help solve those issues and just learn from one another. Derek, thanks again for sitting down with me and doing this. This has been great. I think we'll probably be doing some more stuff in the future because it's good stuff.
Awesome. Yeah, I appreciate it. Thanks a lot.
All right. Have a good day.
Yeah. You.
