Oxygen Builder
This page will help you get started with Core Framework's Addon for Oxygen Builder, as well as the setup required for Oxygen Builder's Global Options.
Last updated
This page will help you get started with Core Framework's Addon for Oxygen Builder, as well as the setup required for Oxygen Builder's Global Options.
Last updated
The Oxygen Builder integration addon is dedicated solely to Oxygen Builder and provides many benefits such as the synchronization of classes, colors and variables.
This addon acts as a pivotal extension to the Core Framework, refining your development workflow within Oxygen Builder to be more fluid and productive. It enriches your design process, not only by rendering visible all styles applied to your elements within Oxygen Builder but also by introducing additional features designed to streamline operations.
Variable UI - Select variables from the visual UI that can be accessed by right-clicking on the input.
Variable User Interface: Effortlessly select variables via a visual interface, accessible through right-clicking on input fields.
Variable Auto-Suggestion: Experience the convenience of custom variables being automatically suggested within a bespoke auto-suggestion dropdown, organized by relevance for ease of access.
Synchronization with Core Framework Classes: Automatic alignment of Core Framework classes with Oxygen Builder's native auto-suggest feature, ensuring a seamless design experience.
Instantaneous Preview of Class and Variable Styles: Preview the impact of class and variable styles on your elements with a simple hover, facilitating immediate visual feedback.
Theme Mode Toggle: Effortlessly switch between dark and light themes using the toggle provided in the top bar, enabling diverse visual explorations.
You will need to have purchased the Oxygen Builder Integration addon in order to make use of it in Core Framework.
With Core Framework installed on your WordPress installation, kindly navigate to Core Framework → Addons and enter your license key for the Oxygen addon. Don't forget to click 'Save Changes'.
Your license key is located on your dashboard and you will need to click 'View' next to the Oxygen Builder Integration addon.
While the integration addon is not mandatory, its adoption is strongly advised to enrich your development experience. The benefits of utilizing this addon include:
Elimination of the need to refresh the front-end to observe style changes, as all modifications are visible within Oxygen Builder.
Real-time updates to elements upon hovering over auto-suggestions, allowing for a visual pre-assessment before final application.
Simplification of the process to apply classes and variables, reducing it to as few as two clicks.
Direct toggling of dark/light themes from within the Oxygen Builder, as opposed to navigating through the Core Framework interface.
In summary, the Oxygen Builder Integration addon is a highly recommended tool that not only enhances your workflow but also significantly accelerates the development process by providing a more intuitive and efficient design environment.
This addon is available at https://coreframework.com/marketplace/oxygen-builder-addon
Oxygen offers an import feature where you can import your global styles. Simply use our JSON provided below to quickly set up your global styles for Oxygen. Kindly navigate to Oxygen -> Export & Import -> and paste the JSON into the Import Global Settings box.
Please right click on the file below, and choose 'Save Link As' to download it.
You can leave the Import Global Colors toggle unchecked.
Let's set up the Global Styles in Oxygen to inherit the variables of Core Framework. We will list only the necessary styles below, as the others (such as colors) will be inherited automatically.
Font Size: Please remove all instances of font-sizes, as these will be applied automatically since they're set up as h1, h2, h3 etc. in Core Framework.
Font Weight: blank
Color: var(--text-title)
Font Size: var(--text-m)
Font Weight: blank
Line Height: 1.6
Color: var(--body-text)
Color: var(--primary)
When setting your breakpoints in Oxygen Builder, it is important to make some necessary changes to Core Framework's breakpoints. We will explain this below:
Please set your breakpoints in Core Framework relative to Oxygen Builder minus 1px. This will ensure that your elements will be displayed correctly when editing in Oxygen Builder. For example, if the page width is set to 1400px in Oxygen Builder, then please set this to 1399px in Core Framework. This is the same for every breakpoint. Please see the screenshot below which matches the settings given here:
Page width: 1400px
Tablet: 992px
Landscape: 768px
Portrait: 480px
Core Framework breakpoints to reflect the above settings:
To edit the breakpoints in Core Framework, select a breakpoint first and then click on the 'Edit current media query' button. Once you have changed the value, click on the green 'Apply' button. Don't forget to then click 'Save changes'.
Section Container Padding (top, right, bottom, left): var(--space-2xl), var(--space-s), var(--space-2xl), var(--space-s)
Columns Padding: default (you can change this if you make use of Oxygen's Columns element, but we would recommend you use the grid classes from Core Framework instead).
