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
remunits
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:
- You choose a framework from the Framework dropdown
- You copy a layout or component
- Pixflow captures the original Bricks JSON
- Variables are rewritten to match the selected framework
- The rewritten JSON is copied to your clipboard
- 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
| Feature | Pixflow Framework | Framework 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.