Mortar makes building in Bricks faster and cleaner. It adds a set of focused workflow tools to the Bricks editor, each explained with a live example, so you always know what a tool does before you turn it on.

Generate BEM classes in bulk, expand CSS shortcuts into full code, convert smart values, change semantic tags, and move faster through the structure panel. Everything lives in one clean panel, and every module is optional, so you switch on only what you need.

Included modules

BEM Generator: create and rename CSS classes with BEM naming in bulk, right from the structure panel.
CSS Recipes: type a shortcut like @clickable-parent; and it expands into full CSS.
Smart Values: press Enter to turn --space-m into var(--space-m), and var(--x) * 2 into calc(var(--x) * 2).
HTML Tags: change an element’s semantic tag without leaving the structure panel.
Style Indicators: a coloured bar per element so you see at a glance what is styled via class or via ID.
Sidebar Shortcuts: a configurable quick-insert rail for your most-used elements.
Auto-Select Class: selects the class automatically after you create or rename it.
Export ID Styles to Class: move ID-level styles onto the first CSS class in one click.
Expand Children: expand or collapse an element’s entire subtree at once.

Every module follows the same clean settings panel, with a description and a live example.

Independence and trademark

Mortar is an independent project. It is 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.

Mortar for Bricks Builder