Skip to Content
OxyProps 1.3 is now available! 

Experience the power of CSS Custom Properties right in Oxygen Builder

  • Built with Open Props, high quality web design tokens
  • Adding features to Oxygen enhancing your quality of life
  • With a utility classes framework leveraging custom props
  • And a growing library of custom Oxygen components
design
consistency
framework
modularity
oxygen developers
friendly
OxyProps In Oxygen Builder screenshot in a computer frame

Meet OxyProps

Your CSS Custom Properties & Utility Framework for Oxygen Builder

Save time, save money!

OxyProps will help you save time in your process. This means more time you can dedicate to value added activities billed to your clients.
Check if your time is worth the investment :
OxyProps costs less than 0.21€ per workday !
(based on agency lifetime plan, 20 workdays per month, 2years of use)

Your Inputs

Your hourly rate:

€/h

Your Oxygen workhours:

h/day

Your ROI

Wow! Your investment in OxyProps will break-even when you save as little as:

seconds/workday

Your Savings

Let's assume you will save only 1 minute of your precious time per working hour thanks to OxyProps. This is a recurring saving of:

€/year

Start Building Today!

Choose the plan that is right for you and start building awesome Websites with Oxygen and OxyProps
lifetime
yearly
OxyProps Personal
Lifetime
    ONE Website
    Lifetime Updates
    Lifetime Support
    One time payment
49 €
buy now
OxyProps Agency
Lifetime
    UNLIMITED Websites
    Lifetime Updates
    Lifetime Support
    One time payment
99 €
buy now
OxyProps Pro
Lifetime
    FIVE Websites
    Lifetime Updates
    Lifetime Support
    One time payment
69 €
buy now
OxyProps Personal
Yearly
    ONE Website
    1 year of Updates
    1 year of Support
    Cancel Anytime
29 €/year
subscribe now
OxyProps Agency
Yearly
    UNLIMITED Websites
    1 year of Updates
    1 year of Support
    Cancel Anytime
49 €/year
subscribe now
OxyProps Pro
Yearly
    FIVE Websites
    1 year of Updates
    1 year of Support
    Cancel Anytime
39 €/year
Subscribe now

Why is OxyProps the best match for you ?

Wether you're a business owner building your first website, or an experienced Oxygen Developper looking for efficiency and time saving, OxyProps has your back.
01

A Powerful Color System

Oxyprops makes managing your website colors and color schemes a piece of cake.
From your plugin dashboard, select from 9 Canvas, and 18 Brand, Links, Visited Links pre-built color swatches.
When you design, simply use OxyProps logical colors (also made available as Oxygen Global Colors). Your design will automatically adapt to light & dark, or any color scheme you choose.
OxyProps plugin dashboard screenshot showing the choice of UI colors
OxyProps Screenshot showing a context menu with all available props for a size field value.
02

Less typing, props are available with a simple click

Have you ever tried to use custom properties but got stuck searching endlessly for the correct syntax, or loosing time typing and typing again the prop name in Oxygen value fields ?
Forget about it! OxyProps smart context menu makes relevant props for a specific field available with a simple click .
03

Rely on OxyProps Default Settings

Do you need to be up and running fast for your new website project ? Then leverage OxyProps default Global Settings for Oxygen.
When activated, OxyProps will overwrtite your Oxygen Global Settings using OxyProps Custom Properties for every setting from fonts stacks through  fluid typography to colors and spacing.
You get a fully responsive settings blueprint that you can tweak to your liking.
OxyProps Screenshot showing default settings applied to Oxygen Global Settings
:where (figure) {
display: grid;
gap: var(--o-size-2);
place-items: center;
}

:where(figure) > :where(figcaption) {
font-size: var(--o-font-size-1);
}
04

No need to fight the framework

Did you ever use a CSS framework, and then spent hours trying to style an element fighting against the framework defaults built with extreme specificity or even !important rules?
OxyProps is built with Zero Specifity Rules so you can always easily apply your custom styles at a local level.

OxyProps covers all design aspects

The range of properties and utility classes offered by OxyProps is wide and will grow further with future versions.

Colors

As OxyProx is built on top of Open Props , it also includes Open Color, an open-source color scheme optimized for UI development.
Preview »

Colors Schemes

OxyProx Automatically Adapts to your website visitor Light or Dark  preference.
Enjoy our schemes switcher.
Preview »

Layouts

Our layout props and classes will help you design your prefered layout in no time.
Most of them are built to be naturally responsive!
Preview »

Gradients

OxyProps Gradients can be used as background or text gradients.
Combine them with noise and filters for enhanced visual effects.
Preview »

Shadows

A selection of Inner and outer box shadows of several strengths to bring depth in your designs.
And they adapt to light and dark modes!
Preview »

Aspect Ratios

Easily give an element the aspect you wish without messing with heights.
Available with or without object-fit: cover.
Preview »

Typography

A helpful set of props to style your texts. Fluid and static font sizes, leading and tracking, text orientations, and other typography properties, all ready to use.
Preview »

Easing

You will find the familiar ease, ease-out, ease-in, and ease-in-out timing functions available in 5 strengths. But also extra easings that mimic physics!
Preview »

Animations

Get premade keyframe effects to use as is or combined in your own animations.
OxyProps utility classes allow you to target normal, active and hover states.
Preview »

Sizes

No px here, relative units all the way.
Available as fixed of fluid sizes.
Preview »

Borders

Everything you can need to style borders : width, corner radius,  round radius, conditional radius, and a selection of blobs.
Preview »

Z-index

Take control over the third dimension with Layers props and classes that bring all the z-index values you could possibly need!
Preview »

Media Queries

Currently ahead of the CSS spec, Open Props brings to OxyProps  named media queries with the @custom-media syntax. Not yet supported by browsers but ready for the future of CSS!
Preview »

Buttons

OxyProps includes utility classes to convert your Oxygen text links to button.
Combine them with colour props and animation props for awesome visual effects.
Preview »

Cards

2 sets of cards utility classes matching your colour theme using surfaces and shadows to add depth to your design.
Solid cards, like this one, and glass cards for a glassmorphism effect.
Preview »

Want to know more ?

And why wouldn't you ? Here are additional informations to help you clearly understand OxyProps.

What is OxyProps ?

OxyProps is a WordPress plugin that adds a CSS custom properties collection, a Utility Classes framework, Custom Components, and Oxygen Builder Context menu for lightning fast access to the custom properties. It allows you to build consistent design, use light, dark and colour schemes, and save time in your development process..

What OxyProps is NOT ?

OxyProps is not a pre built design set. You will not get a library of sections, pages, headers and other blocks. OxyProps is also not an Oxygen UI enhancement, except for the context menu which is there to give you instant access to the props in oxygen value fields. We like to use OxyProps together with Hydrogen Pack and Recoda Workspace for the perfect combo.

Do I need Oxygen Builder to use OxyProps

Yes you do. Even if you can access the props and utility classes loaded by OxyProps in any WordPress environment, the integration features only work inside Oxygen Builder, and the props and framework CSS has been carefully designed for the Oxygen way to output code.

Will other builders be supported in the futur ?

Many users did ask, so the Bricks version of OxyProps (BricksProps) is currently under development. No ETA! The vast majority of the framework already works well with Bricks. Light and dark modes are also supported. Check BricksProps.com.

There is currently no plan to port OxyProps to other page builders. That being said, it depends on the community. So, we may consider supporting other builders one day. You can suggest your favorite one on OxyProps Feedback Site.

You say OxyProps is built with Open Props. What is Open Props ?

Thanks for that very good question ! Open Props is an Open Source collection of web design tokens in the form of CSS Custom Properties. You can access Open Props repository on GitHub. OxyProps uses Open Props and extends it with additional custom props and a utility classes framework using the props.

If Open Props is Open Source, why should I purchase OxyProps ?

Even if you choose not to purchase OxyProps, we strongly encourage you to give Open Props a try. OxyProps was build from our extensive usage of Open Props in Oxygen since it was released in novembre 2021. Oxyprops adds additional props to extend the core set, a large utility classes library built on the prop collection, Oxygen AddOns to make the props available right in Oxygen Builder, and will first save you hours of troubleshooting, and the hours of searching and typing.
Didn't find your answer ? Still have questions ?
Contact-us