Core Framework
HomeChangelogDashboard
  • 📖Introduction
    • 📝 Overview of Core Framework
    • 💁🏼‍♂️ Target Audience
    • 🔍 Navigation of the Documentation
  • 🚀Getting Started
    • Getting Started with Web App and WordPress
    • Initial Setup and Configuration
    • Video tutorial: First-time setup walkthrough
    • OxyNinja Users
  • 🧩Builder Integrations
    • Overview
    • Oxygen Builder
    • Bricks Builder
    • Gutenberg
  • Figma
    • Getting Started with Figma
    • Create and Manage Variables
    • Editing Elements
  • 💻Navigating the UI
    • Color System
    • Typography
    • Spacing
    • Components
    • Utility Classes & Vars
    • Breakpoints
    • Manage project
    • Remote Import
    • Preferences
  • 📒How to Use
    • Dark Mode
    • Grid System
    • Filters
  • 🎯Marketplace
    • Buying Products
    • Become an Author
    • Author Guidelines
  • 👕Official UI Kits
    • Blocks
    • CoreKit
    • Violet
    • WooCore
    • Style Guide
    • OxyNinja Icons
  • Official Templates
    • Agency
    • Real Estate
  • 🔨Troubleshooting
    • Common Problems
    • FAQ
  • 📖Changelog
    • Changelog
    • Feature Requests
  • Development
    • CoreFramework\Helper
Powered by GitBook
On this page
  • Oxygen Builder Integration Addon
  • Video Showcase
  • All Features
  • Installation
  • Is the Oxygen Builder Integration Essential?
  • Oxygen Builder Styles Setup
  • Option #1: Import Our Blueprint
  • Option #2: Manual Setup
  1. Builder Integrations

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.

PreviousOverviewNextBricks Builder

Last updated 6 months ago

Oxygen Builder Integration Addon

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.

Video Showcase

All Features

  • 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.

Installation

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'.

Is the Oxygen Builder Integration Essential?

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.

Oxygen Builder Styles Setup

Option #1: Import Our Blueprint

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.

Option #2: Manual Setup

Global Styles

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.

Headings

  • 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)

Body Text

  • Font Size: var(--text-m)

  • Font Weight: blank

  • Line Height: 1.6

  • Color: var(--body-text)

Links

All

Color: var(--primary)

Width & Breakpoints

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'.

Sections & Columns

  • 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).

You will need to have purchased the in order to make use of it in Core Framework.

Your license key is located on and you will need to click 'View' next to the Oxygen Builder Integration addon.

This addon is available at

Oxygen Builder Integration addon
your dashboard
https://coreframework.com/marketplace/oxygen-builder-addon
🧩
Oxygen Builder Addon Showcase
4KB
oxygen-global-styles.json
This JSON will help you quickly set up your Oxygen Global Styles.
The Variable UI Showing the Core Framework Color System in Oxygen Builder
The first 3 headings setup.
Page cover image