Mortar for Bricks Builder

Description

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), var(--x) * 2 into calc(var(--x) * 2), 20ctr into 1.25rem and 20cte into 1.25em (px to rem or em). It also works in the Custom CSS code editor: type a value and press the semicolon key to expand it.
• 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: activates the first existing, unlocked global class when you select another element. Bricks 2.4 provides a native first-class option.
• 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.
• Editor Theme: colour the Bricks builder to match your brand. Pick your accent and surface colours, with presets, your own saved palettes and one-click apply. The Custom CSS code editor follows your theme too, with a dark, readable colour scheme.

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.

Technical details