Get Started

Oxygen Sync

Seamless integration with Oxygen's variable system, selectors, and components.

OxyMade seamlessly integrates with Oxygen page builder, syncing variables, selectors, and components for a unified design workflow.

Overview

OxyMade syncs with Oxygen to provide:

  • CSS Variables - Available in Oxygen’s variable picker
  • Selectors/Classes - Organized in Oxygen’s class picker
  • Components - Pre-built elements in Oxygen’s library
  • Real-time Updates - Changes reflect immediately

Variable Syncing

What Gets Synced

  • Color palette variables (60+ colors)
  • Spacing variables (24+ values)
  • Typography variables (sizes, weights)
  • Border radius variables
  • Section spacing variables
  • RGB value variables

How to Sync

Initial Sync

  1. Complete the OxyMade setup wizard
  2. Click Install Variables in Step 2
  3. Wait for sync confirmation
  4. Variables appear in Oxygen

Manual Re-sync

  1. Go to OxyMade > Settings
  2. Click Sync Variables with Oxygen
  3. Choose sync mode
  4. Confirm the sync

Sync Modes

ModeDescriptionUse When
Add NewOnly adds missing variablesDefault, safest option
UpdateUpdates existing + adds newAfter making changes
ReplaceReplaces all variablesFresh start needed

Using Variables in Oxygen

After syncing, access variables in the Oxygen builder:

  1. Select any element
  2. Click a property (color, spacing, etc.)
  3. Click the variable icon {x}
  4. Find OxyMade variables by collection:
    • OxyMade Colors
    • OxyMade Spacing
    • OxyMade Typography

Or type directly:

{var-primary}
{var-s8}
{var-text-lg}

Selector Syncing

What Are Selectors?

Selectors are pre-defined CSS classes that apply styling. OxyMade provides 200+ utility classes.

Selector Collections

Classes are organized in collections:

CollectionContents
OxyMade SystemRoot utilities
OxyMade LayoutDisplay, position
OxyMade ColorsColor utilities
OxyMade TypographyFont utilities
OxyMade SpacingMargin/padding
OxyMade Section SpacingSection utilities
OxyMade RadiusBorder radius
OxyMade FlexboxFlex utilities
OxyMade GridGrid utilities
OxyMade BordersBorder utilities
OxyMade EffectsShadow, opacity
OxyMade RGB ValuesRGB variables

How to Sync Selectors

  1. Go to OxyMade > Settings
  2. Complete Step 5: Sync Selectors
  3. Click Sync Selectors with Oxygen
  4. Classes appear in Oxygen’s class picker

Using Selectors in Oxygen

  1. Select an element
  2. Open the Classes panel
  3. Click Add Class
  4. Search for OxyMade classes or browse collections
  5. Click to apply

Multiple classes can be combined:

flex items-center justify-between gap-4

CSS File Injection

OxyMade injects its CSS framework automatically:

  • /assets/oxymade-framework.css - Full framework
  • Loaded on frontend when CSS is enabled
  • ~49KB uncompressed (minified in production)

Component Syncing

What Are Components?

Pre-built design elements ready to use in Oxygen:

  • Buttons
  • Cards
  • Navigation
  • Forms
  • And more (based on design set)

How to Register Components

  1. Complete Step 6: Register Components
  2. Choose local or remote components
  3. Click Import Components
  4. Components appear in Oxygen’s element library

Using Components

  1. Open Oxygen Builder
  2. Click Add Element
  3. Find OxyMade category
  4. Drag component to canvas
  5. Customize as needed

Real-time Sync

Enable Auto-Sync

For immediate updates when you make changes:

  1. Go to OxyMade > Settings
  2. Enable Sync with Oxygen toggle
  3. Changes now auto-sync

Rate Limiting

Auto-sync is rate limited:

  • Maximum 10 syncs per minute
  • Prevents performance issues
  • Queues excess changes

When to Use Auto-Sync

Enable when:

  • Actively designing
  • Tweaking colors
  • Testing changes

Disable when:

  • In production
  • Making bulk changes
  • Importing/exporting

Oxygen Builder Integration

Toolbar Button

OxyMade adds a button to the Oxygen toolbar:

  1. Open Oxygen Builder
  2. Find the OxyMade button in the toolbar
  3. Click to open the color panel
  4. Make quick color adjustments

Color Panel

The in-builder color panel provides:

  • Primary color picker
  • Live shade preview
  • Quick save/reset
  • Sync toggle

Spacing Picker

Interactive spacing selection:

  • Visual scale preview
  • Click to copy variable
  • Quick insertion

Breakpoint Mapping

OxyMade breakpoints map to Oxygen’s system:

OxyMadeOxygenWidth
baseBaseAll
smphone_portrait≥480px
mdphone_landscape≥640px
lgtablet_portrait≥768px
xltablet_landscape≥1024px

Responsive classes use these breakpoints:

grid-cols-1 lg-grid-cols-3

Best Practices

Initial Setup

  1. Choose your design set first
  2. Sync variables (Add New mode)
  3. Sync selectors
  4. Register components
  5. Test in the builder

Making Changes

  1. Disable auto-sync for bulk changes
  2. Make all your adjustments
  3. Re-sync when ready
  4. Test thoroughly

Production Workflow

  1. Keep auto-sync disabled
  2. Make changes in staging
  3. Sync and test
  4. Deploy to production

Avoiding Conflicts

  • Use unique variable names for custom vars
  • Don’t manually edit Oxygen’s var database
  • Backup before major syncs
  • Document custom overrides

Troubleshooting

Variables Not Showing

  1. Verify sync completed successfully
  2. Check Oxygen’s global settings
  3. Clear Oxygen’s cache
  4. Refresh the builder

Selectors Not Available

  1. Confirm selectors were synced
  2. Check the class picker
  3. Search by exact class name
  4. Re-sync if needed

Components Missing

  1. Verify component registration
  2. Check your license status
  3. Try remote import
  4. Clear Oxygen’s cache

Sync Errors

  1. Check PHP error logs
  2. Verify file permissions
  3. Ensure Oxygen is active
  4. Try manual sync

Breakpoint Issues

  1. Verify breakpoint class format
  2. Check Oxygen’s breakpoint settings
  3. Test at each viewport size
  4. Use browser dev tools