All About Macros [Part 1 of 2]

All About Macros [Part 1 of 2]

Macros and variables are useful for intermediate and advanced designers looking to leverage HubSpot's HubL framework. While you may be aware of them and know generally what they do, there isn't a ton of documentation on what they are and how you should be using them.

So to start, what even is a Macro?

Per HubSpot's Designer's Documentation:

 

"HubL macros allow you to print multiple statements with a dynamic value. For example, if there is a block of code that you find yourself writing over and over again, a macro may be a good solution, because it will print the code block, while swapping out certain arguments that you pass it."

In short, macros are functions that you can use over and over, while swapping out bits of code to make them modular and dynamic.

Implementing macros always follow the same general guidelines:

  1. We declare the macro.
  2. We give the macro parameters to pass into it.
  3. We call the macro and pass in those parameters which, when passed through, are now called arguments.
  4. The macro runs.
  5. We save time and celebrate :party-emoji:

For example, I'm designing a simple blog right now and have a listing layout built out. Looks a little bland though doesn't it?


Macros-before example


Some box-shadowing and hover effects would look nice but those pesky vendor prefixes are quite annoying to write out. Rather than repetetively write the CSS styles that would accompany a project like this, we can subsitute a couple macros into our template and save us lines of code and subsequently, the time it would take to write them. In my example below, I'll set two macros and then call them in my CSS stylesheet.

What does this look like in action? 

 

Declaring the macros:

/* Declare the macro, name it, and define the parameter(s).

(1) Here we declare the macro with "macro",

(2) We name it "Transition",

(3) and we define the parameter "value" */

 

 

/* Declare the macro, name it, and define the parameter(s).

(1) Here we declare a new macro,

(2) we name it "BoxShadow",

(3) and we define the parameters "Xoffset", "Yoffset", "blur", "spreadradius", and "color" */

 


Now we have to apply it!

Right now, my stylesheet looks like this. It's 25 lines:

.jumbotron {

  box-shadow: 5px 5px 10px 5px #000;

  color: #2c3e50;

  background: #ecf0f1;

}

.row.images img {

  max-height: 400px;

  position: relative;

  width: 100%;

  box-shadow: 2px 2px 2px #000;

  transition: all 1s ease;

  -webkit-transition: all 1s ease;

  -moz-transition: all 1s ease;

  -ms-transition: all 1s ease;

  -o-transition: all 1s ease;

}

 

.row.images img:hover {

  box-shadow: 6px 6px 10px #000;

  transition: all .3s ease-in-out;

  -webkit-transition: all .3s ease-in-out;

  -moz-transition: all .3s ease-in-out;

  -ms-transition: all .3s ease-in-out;

  -o-transition: all .3s ease-in-out;

}

 

After we apply our macros we cut our code down by 32% to span only 17 lines!:

 

.jumbotron {

  ;

  color: #2c3e50;

  background: #ecf0f1;

}

.row.images img {

  max-height: 400px;

  position: relative;

  width: 100%;

 

  box-shadow: 2px 2px 2px #000 ;

;

 

  transition: all 1s ease;

  -webkit-transition: all 1s ease;

  -moz-transition: all 1s ease;

  -ms-transition: all 1s ease;

  -o-transition: all 1s ease;

;

}

.row.images img:hover {

 

  box-shadow: 6px 6px 10px #000 ;

;

 

  transition: all .3s ease-in-out;

  -webkit-transition: all .3s ease-in-out;

  -moz-transition: all .3s ease-in-out;

  -ms-transition: all .3s ease-in-out;

  -o-transition: all .3s ease-in-out;

;

}

 

This is much cleaner, and boy doesn't our blog look better!

 Blog listing

BONUS

We see several instances of colors in our code that are repeated, or that maybe we'd like to repeat moving forward. A great way to set your brand's main colors is to convert the oft-used colors into a variable. Variables are powerful because if we set some, and then use them repeatedly throughout our code but then decide later on that we may want to change out the value of our variable(s), instead of searching line after line for what we are looking for we can change that instance once and be done with it!


What is a variable anyway?

Variables are exactly what you'd expect them to be, values that you can use over and over in your code. Variables are either a single word in an expression or a attribute of a dictionary. You can store strings, booleans, integers, sequences, or create dictionaries within a single variable.

We can either use many of HubSpot's predefined variables, or we can set our own. Setting our own variable is pretty straightforward. In our case, I want to set the black color we see for our boxshadow as a variable in case we'd like to change that color later. To set a variable, its pretty straightforward:

 


Now, instead of calling on the hex color #000 three times and effectively "hardcoding" this into our CSS, we can make our code more flexible.

 

Our boxshadow macro stays the same since we might want to pass in any color for different boxshadows rather than restricting it to our new #000 variable, but our CSS will now be:

 .jumbotron {

 

  box-shadow: 5px 5px 10px 5px #000;

;

  color: #2c3e50;

  background: #ecf0f1;

}

 

.row.images img {

  max-height: 400px;

  position: relative;

  width: 100%;

 

  box-shadow: 2px 2px 2px #000 ;

;

 

  transition: all 1s ease;

  -webkit-transition: all 1s ease;

  -moz-transition: all 1s ease;

  -ms-transition: all 1s ease;

  -o-transition: all 1s ease;

;

}

 

.row.images img:hover {

 

  box-shadow: 6px 6px 10px #000 ;

;

 

  transition: all .3s ease-in-out;

  -webkit-transition: all .3s ease-in-out;

  -moz-transition: all .3s ease-in-out;

  -ms-transition: all .3s ease-in-out;

  -o-transition: all .3s ease-in-out;

;

}


And voila!

Macros-after example

Nothing should really change when we check the preview again, but that's a good thing because it means our variable worked.

Buuuut I'm not in love with the black color, so lets change our boxshadow to a bit of a nicer tone of grayish-blue black.


When we publish the CSS file and check out our preview again, all of the boxshadows should should inherit that slategray color from our variable. Nice :)

 

turn listing to slategray

 


And that's it for this edition of "All About Macros"! Next week, we will be diving in a bit deeper to show the power of macros and how we can use them in a bit more complex situations such as complex blog listing templates and more - stay tuned!