Pixflow can be used in multiple ways, depending on how you prefer to work with layouts and design systems.
This section applies only when you choose to use the Pixflow framework — Pixflow’s own variable-driven design system — inside Bricks Builder.
If you are using framework mapping (ACSS, Advanced Themer, Core Framework, or Raw CSS via copy & paste), this section does not apply.
What the Pixflow Framework Is
The Pixflow framework is a complete, variable-driven design system built specifically for use with Bricks Builder.
It provides:
- A predefined set of global design tokens
- Consistent naming across colours, typography, spacing, borders, and surfaces
- A scalable foundation for layouts, components, and UI elements
- A design-system-first approach using global variables rather than element overrides
When using the Pixflow framework:
- Pixflow layouts and components reference Pixflow’s variables directly
- Theme Styles, global colours, and typography must be installed
- Visual changes are made by adjusting shared values, not individual elements
When You Should Use the Pixflow Framework
Using the Pixflow framework is recommended when:
- You want a fully managed design system
- You prefer a Pixflow-first workflow
- You are using Remote Templates inside Bricks Builder
- You want global visual changes to cascade automatically across the site
- You plan to use Pixflow’s Style Generator and secondary colour schemes
If you prefer to keep your existing framework (ACSS, Advanced Themer, Core Framework) and only copy layouts, consider using framework mapping instead.
What This Section Covers
The following documents explain how to use Pixflow specifically with the Pixflow framework:
Importing & Updating Pixflow Framework Styles
Learn how to install and update Pixflow’s base theme styles, variables, classes, and colour tokens.
This step is required when:
- Using Remote Templates
- Copying layouts with the Pixflow framework selected
How to Apply Secondary Colour Schemes
Secondary colour schemes allow you to create distinct colour environments within a page while preserving hierarchy, contrast, and accessibility.
These schemes:
- Rely on Pixflow’s colour variables
- Apply at the container or section level
- Are part of the Pixflow framework only
Using the Pixflow Style Generator
The Pixflow Style Generator allows you to generate and manage a complete design system using global variables.
It enables:
- Rapid design iteration
- Global colour and typography control
- Safe regeneration of styles at any stage of a build
The Style Generator works only with the Pixflow framework and its base theme styles.
Important Scope Clarification
- This section applies only when using the Pixflow framework
- It is not required when using framework mapping via copy & paste
- Framework mapping does not use:
- Pixflow colour schemes
- Pixflow style generation
- Pixflow theme styles
Remote Templates always require the Pixflow framework.
Framework mapping is available only when copying from the website.
Summary
The Pixflow framework provides a powerful, scalable design-system workflow for Bricks Builder.
If you choose this approach, the documents in this section will guide you through:
- Installing Pixflow’s framework styles
- Structuring colour environments
- Managing global design changes safely
If you prefer to use Pixflow layouts with your own framework, refer instead to the framework mapping and copy-paste documentation.