Pixflow plugin is availableView changelog
22 new items droppedView changelog
Style generator is now liveTry it out

4. Using Framework Mapping (Copy & Paste Only)

Framework mapping allows you to use Pixflow layouts and components without adopting the Pixflow framework.

Instead of requiring Pixflow’s variable system, Pixflow can rewrite variables at copy time so that copied layouts match the framework you already use.

This system exists to give you maximum flexibility without increasing maintenance overhead or fragmenting the Pixflow library.

What Framework Mapping Is

Pixflow layouts and components are authored using Pixflow-native variables.

Framework mapping translates those variables at the moment you copy, so the pasted layout uses:

  • Your framework’s native variable names
  • Or fully static CSS values (Raw CSS)

The original Pixflow layout is never modified or duplicated.

Pixflow remains the single source of truth.

When to Use Framework Mapping

Framework mapping is ideal when:

  • You already use a framework such as:
    • ACSS
    • Advanced Themer
    • Core Framework
  • You want Pixflow layouts to integrate cleanly with existing sites
  • You do not want to import or maintain Pixflow theme styles
  • You are mixing Pixflow layouts with other libraries
  • You want copied layouts to follow your existing design system

If you want a fully managed Pixflow design system, use the Pixflow framework instead.

Supported Framework Targets

When copying from the Pixflow website, you can choose from the following mapping targets:

  • ACSS (versioned)
  • Advanced Themer (default variables)
  • Core Framework (default variables)
  • Raw CSS

Raw CSS

Raw CSS outputs:

  • Fully static values
  • No variables
  • No clamp()
  • No rem units

This option is intended for users without any framework or design token system.

How Framework Mapping Works

Framework mapping is applied only at copy time.

The process is:

  1. You choose a framework from the Framework dropdown
  2. You copy a layout or component
  3. Pixflow captures the original Bricks JSON
  4. Variables are rewritten to match the selected framework
  5. The rewritten JSON is copied to your clipboard
  6. You paste it into Bricks Builder

Pixflow does not store rewritten layouts and does not create framework-specific variants.

Copy Methods That Support Mapping

Framework mapping works with:

  • Quick Copy
  • Rename & Copy

The selected framework applies to both methods.

What Framework Mapping Does Not Do

Framework mapping does not:

  • Modify Pixflow’s stored layouts
  • Add or import any theme styles
  • Install variables, classes, or colours in your site
  • Create or manage design tokens
  • Apply to Remote Templates

It only affects the copied output.

Important Limitation: Copy & Paste Only

⚠️ Framework mapping works only when copying from the Pixflow website.

It is not available for:

  • Remote Templates
  • Direct insertion inside Bricks Builder

Why Remote Templates Are Excluded

Remote Templates require:

  • A shared, predictable variable system
  • Consistent token availability across sites
  • No per-user transformation at import time

Because of this, Remote Templates always use the Pixflow framework.

This limitation is intentional and ensures stability and reliability.

Framework Mapping vs Pixflow Framework

FeaturePixflow FrameworkFramework Mapping
Uses Pixflow variables
Requires Pixflow theme styles
Works with Remote Templates
Works with Copy & Paste
Integrates with existing frameworks
Style Generator & colour schemes

Best Practices When Using Framework Mapping

  • Ensure your target framework is already installed and configured
  • Treat copied layouts as native to your system
  • Avoid mixing Pixflow framework styles with mapped layouts
  • Use Rename & Copy when creating long-term variants
  • Manage all design changes using your framework’s tools

Framework mapping is designed to fit into your workflow, not replace it.

Summary

Framework mapping allows Pixflow layouts and components to be used:

  • Without importing Pixflow styles
  • Without changing your existing design system
  • Without duplicated layout libraries

You choose the framework.
Pixflow adapts at copy time.

If you want a fully managed, Pixflow-native design system, use the Pixflow framework instead.

Hidden
Contents