BRX Prod is currently in Beta. While in beta we are offering 40% license discounts

Pricing

BRXProd CSS Panel

puts a full-featured CSS editor directly inside Bricks Builder. The eleven sections below cover every feature from panel controls and class management to smart suggestions, generators, and the premium CSS Patterns system.

Easy
Moderate
Advanced
Expert / Premium

  1. The Panel & Its Controls

    Easy
    Everything needed to open, position, and configure the panel itself.

    • Toggle the panel

      toolbar code icon
      Show/hide the CSS Panel from the Bricks toolbar code button.

    • Collapse / Expand

      Click the panel header or arrow button to roll the editor up or down.

    • Resize

      Drag the top edge of the panel to set its height.

    • Format CSS

      Format button
      Auto-formats the CSS in the editor for readability.

    • Detach to a window

      Pop the panel into its own floating window to position it anywhere.

    • Help modal

      Help button
      Opens an in-panel quick-reference guide.

    • Code folding

      Fold and unfold rule blocks and @media sections in the editor.

  2. Editing Surfaces

    Easy
    Choose whether the panel targets an element or the Bricks Theme Style.

    • Element CSS

      The default - edits the active Bricks element CSS.

    • Theme CSS

      Switches to your Theme Style; one entry per Bricks style.

    • Session-only choice

      The surface choice resets to Element CSS on each page reload.

  3. Selector Pills & Class Management

    Easy
    Full control over IDs, classes, and their cascade order directly in the panel.

    • Element ID & Class pills

      All IDs and classes assigned to the element appear as coloured pills at the top of the editor.

    • Editor tint cues

      The editor background tints to show which selector is active - element vs. class.

    • Reorder classes

      Drag the class pills to change their cascade order.

    • Lock / Remove / Trash

      Quick class actions: lock prevents edits, remove deassigns, trash deletes globally.

    • Rename

      double-click / caret
      Double-click the pill or use the caret menu to rename a global class.

    • Duplicate class

      caret menu
      Clone the class and all its styles to a new name.

    • Create variant class

      caret menu
      Scaffold a modifier class with the same CSS structure.

    • Copy Name

      ID pill caret
      Copy the element ID or class name to clipboard.

    • Move Styles (ID to Class)

      toolbar button
      Migrate styles from the element ID to a reusable global class in one click.

  4. Smart Suggestions

    Moderate
    Context-aware autocomplete for properties, values, variables, and CSS functions.

    • Property suggestions

      As you type, the panel shows matching CSS property names.

    • Hide superseded

      Properties already set higher in the cascade are greyed out.

    • Value suggestions

      Offers valid keyword values for the current property.

    • CSS variable suggestions

      Lists all --variables in scope as you start a value.

    • Function suggestions

      Autocompletes CSS functions like calc(), clamp(), color-mix().

    • Manual trigger

      Ctrl/Cmd + Space
      Force-open the suggestions list at the cursor position.

    • Variable suggestions in Bricks inputs

      The same variable suggestions appear inside the standard Bricks style inputs.

    • Bidirectional scoped variables

      Variables set inside a scope also appear in parent scope suggestions.

  5. TAB Shortcuts & Expansions

    Moderate
    Type short aliases and press TAB to expand them into full CSS blocks or values.

    • Root selector

      r / R
      Type r then TAB to expand :root {}, or R for html {}.

    • Property abbreviations

      Short aliases for common properties: bg, mt, pt, fw, and more.

    • Value abbreviations

      Short aliases for common values: n for none, i for inherit, and more.

    • Pseudo blocks

      ::b / :h
      Type ::b to expand ::before {} or :h to expand :hover {}.

    • Debug utilities

      Type debug to insert a red-border outline rule for quick inspection.

    • Shortcut & inline hints

      The editor shows shortcut hints inline as you type.

    • BEM child shortcuts

      r_ / R_
      Type r_ to expand .parent__child {} with the element BEM structure.

  6. Inline Editing Helpers

    Moderate
    Quality-of-life tools that speed up everyday CSS authoring.

    • Auto-semicolon

      Press Enter after a declaration and the panel inserts the missing semicolon.

    • Auto-calc helper

      TAB
      Type calc then TAB to expand a calc() expression template.

    • color-mix() hint

      TAB
      Type mix or cmix then TAB to expand a color-mix() template.

    • Smart container-query paste

      When pasting a @container block, the panel scopes it to the active element.

    • Multi-cursor editing

      Ctrl/Cmd + M
      Add multiple cursors at matching identifiers and edit them all at once.

    • Variable cycling

      up / down arrow
      Arrow keys cycle through numeric and variable values at the cursor.

    • Local variables

      --_ prefix
      Variables starting with --_ are scoped locally to the element.

    • Paste override vars

      Ctrl/Cmd + Alt + V
      Paste copied CSS as variable overrides rather than raw declarations.

  7. Linting & Validation

    Moderate
    The panel catches CSS errors before they silently break your layouts.

    • Real-time CSS validation

      Invalid properties and values are highlighted as you type.

    • Missing-semicolon detection

      A warning appears when a declaration is missing its semicolon.

    • Unclosed parenthesis backstop

      The panel catches unmatched parentheses before they silently break styles.

    • Smart false-positive suppression

      Valid but non-standard rules are allowed without false error flags.

  8. Visual Generators & Layout Helpers

    Advanced
    Generate complex CSS visually and insert clean output directly into the editor.

    • Gradient Generator

      action bar
      A visual picker that writes gradient CSS directly into the editor.

    • SVG Pattern Generator

      action bar
      Generates repeating SVG background patterns and outputs the CSS.

    • Grid / Flex layout helpers

      Quick-insert snippets for common grid and flex patterns.

    • Clean generator comments

      Generator output strips comments so you get clean, production-ready CSS.

  9. Element Integration Tools

    Advanced
    Bridge the gap between Bricks UI controls and the CSS Panel.

    • Convert UI to CSS

      Copies the Bricks UI settings for the element as equivalent CSS declarations.

    • Quick Insert

      toolbar button
      Insert a CSS declaration into the editor without opening the full panel.

    • Attribute Bar

      toolbar button
      A quick-access bar for common element attributes.

    • Breakpoint modes

      Switch the panel between desktop and responsive breakpoint views.

  10. Right-Click Context Menu

    Advanced
    Extra actions available via right-click inside the CSS editor.

    • Variablize

      right-click
      Replace a hard-coded value with the nearest matching CSS variable.

    • State variants

      right-click
      Generate :hover, :focus, and other state overrides for the selection.

    • Comment / Uncomment selection

      right-click
      Toggle a block comment around the selected declarations.

    • Paste override vars

      right-click / Ctrl+Alt+V
      Paste as CSS variable overrides from the context menu or keyboard shortcut.

    • Extract classes to globals

      right-click / Theme mode
      Move classes to the global stylesheet directly from the panel context menu.

    • Extract variables to globals

      right-click / Theme mode
      Move CSS variables into the global style from the context menu.

  11. CSS Patterns

    Expert
    Premium
    A rule-based expansion engine that turns custom shorthand into full CSS declarations.

    • The | trigger

      |pattern
      Type | anywhere in the editor to open the pattern picker inline.

    • Pattern picker button

      action bar
      Click the pattern button in the action bar to browse and insert patterns.

    • Property vs Value rules

      Patterns can target a property position or a value position separately.

    • Capture groups

      Use $1, $2 etc. in pattern templates to auto-fill from surrounding context.

    • Built-in starter patterns

      A library of common patterns ships with the plugin ready to use.

    • Import / Export rules

      Share your pattern library between sites via import and export.

    • Exclude variable patterns

      Patterns starting with -- are excluded from property-position suggestions.