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
consistency
framework
modularity
modularity
oxygen developers
friendly
friendly
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 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 Agency
Lifetime
UNLIMITED Websites
Lifetime Updates
Lifetime Support
One time payment
99 €
buy nowOxyProps Personal
Yearly
ONE Website
1 year of Updates
1 year of Support
Cancel Anytime
29 €/year
subscribe nowOxyProps Agency
Yearly
UNLIMITED Websites
1 year of Updates
1 year of Support
Cancel Anytime
49 €/year
subscribe nowOxyProps Pro
Yearly
FIVE Websites
1 year of Updates
1 year of Support
Cancel Anytime
39 €/year
Subscribe nowWhy 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.
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.
:where (figure) {
display: grid;
gap: var(--o-size-2);
place-items: center;
}
:where(figure) > :where(figcaption) {
font-size: var(--o-font-size-1);
}
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 »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.
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..
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.
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.
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.
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.
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