Mortar for Bricks Builder

Mortar adds practical workflow tools to Bricks Builder: manage BEM classes, test responsive layouts, write CSS faster and work directly from the structure panel.

Each tool is explained in the Mortar settings panel with a description and a live example, so you can choose what fits your workflow.

Included modules

• BEM Generator: create and rename BEM classes in bulk. Review the element hierarchy and proposed changes before applying, with nested block detection and protected component instances. Your default All/None selection is saved per user across browsers.
• Viewport Resizer: test responsive layouts with a canvas-width slider, breakpoint markers and a reset control. Use Bricks’ native width field for precise values.
• CSS Recipes: create, edit and manage reusable CSS shortcuts. Customize, disable or restore the included recipes, with changes shared across your site.
• Smart Values: convert CSS variables, calculations and pixel-to-rem values as you type, including in the Custom CSS editor.
• HTML Tags: change semantic HTML tags directly from the structure panel, including when editing component definitions.
• Style Indicators: see which elements have styles applied through classes or element IDs.
• Sidebar Shortcuts: add frequently used elements through a configurable quick-insert rail.
• Auto-Select Class: automatically select an element’s first existing, unlocked global class. Bricks 2.4 also provides a native first-class option.
• Export ID Styles to Class: move ID-level styles to the first CSS class in one click.
• Expand Children: expand or collapse an entire subtree at once, including inside component definitions.
• Editor Theme: customise the builder’s accent and surface colours with presets and saved palettes. The Custom CSS editor follows your theme too.

Requirements

Mortar requires Bricks Builder and runs inside its editor.

Independence and trademark

Mortar is an independent project, not affiliated with, endorsed by or sponsored by Bricks Builder or its makers. “Bricks” is a trademark of its respective owner and is used here only to describe compatibility.