Conditional CSS in Bricks based on Post Meta

In the Bricks Facebook group a user asked:

Hi, how do you normally control margin, padding and font-size using dynamic data? I'm looking for the best workflow to accommodate these rather unusual scenarios.

This Pro tutorial covers two ways this can be done in Bricks.

• Using style attribute and adding the CSS inline
• Registering a blank custom stylesheet, enqueuing it, building the CSS string with property values from post meta, and using wp_add_inline_style() to push the CSS from the string into the enqueued stylesheet.

Sample Scenario

ACF Field group: Page Fields

When a specific Page is being edited:

Method 1: Using style attribute and adding the CSS inline

Add a style attribute for the element, say a Button like this:

font-size: {acf_button_font_size}rem; padding: {acf_button_vertical_padding}em {acf_button_horizontal_padding}em

Method 2: wp_add_inline_style() to a custom stylesheet

Select the Button element → STYLE → CSS → CSS classes: btn--lg

Add the following in child theme's functions.php (w/o the opening PHP tag) or a code snippets plugin: