CSS Variables
for WordPress.
OxyProps Lite is a free and Open Source WordPress plugin bringing the Open Props Supercharged CSS Variables collection to your WordPress site.
It currently includes 351 CSS Custom Properties for Colors, Gradients, Shadows, Aspect Ratios, Typography, Easing, Animations, Sizes, Borders, Z-Index and Media Queries.
Get StartedSign up to receive news and updates!
Why Use OxyProps Lite?
It is non-prescriptive
Includes Open Props
A CSS Variables collection created and developed by World Class CSS Experts
Modular & Lightweight
Include all props or pick individual PropsPacks from the dashboard
Lightning Fast
Preserve your page load times by selecting "Inline CSS" in dashboard
Create your own components
Build your own utility classes by combining and expanding the props
--o-
This website is built with OxyProps Lite and Oxygen. Inspect the CSS and look for the signature « double-dash o ».
01
Download OxyProps Lite
Click the button to download a .ZIP file containing the latest version of OxyProps Lite.
Download ZipAlternatively, you can download the repository from Github.
Download Repo02
Upload to WordPress
Install the plugin from you WordPress dashboard Plugins > Add New or upload the unzipped folder to wp-content/plugins.
Activate the plugin from your Plugins dashboard.
03
Set-up your plugin
Choose if you want to apply OxyProps Lite Normalize, or not (default).
Choose if you want the full bundle (default) or pick individual props.
Choose if you want to inline CSS or load spreadsheets (default).
Choose if you want to keep (default) or remove Gutenberg inlined styles.
04
You're good to go!
Everything is now set-up.
You can open your site builder and apply OxyProps Lite CSS Variables wherever you want !
padding: var(--o-size-fluid-2);
font-size: var(--o-font-size-fluid-1);
animation: var(--o-animation-pulse);
font-size: var(--o-font-size-fluid-1);
animation: var(--o-animation-pulse);
OxyProps Lite vs OxyProps Pro
Which on is the best fit for you?
OxyProps Lite
If you are a CSS enthusiast, or you want to develop your CSS Skills, and if you have the will and the time to create your own custom elements, this is for you!
Free
Get OxyProps Lite 351 Open Props Design Tokens
Normalize (presets) Stylesheet
Inline CSS for better performance
Load only what you really use
Dequeue Gutenberg default styles
Exclusive OxyProps Tokens
6000+ Utility Classes
Builder enhancements
Builder custom elements
OxyProps Pro
If you want to save your precious time by using an advanced, done for you CSS fraameword loaded with productivity features, this is for you!
From 49€ Lifetime
Buy OxyProps Pro All OxyProps Lite features plus:
200+ Exclusive OxyProps Tokens
6000+ Utility Classes
Customizable color swatches
Customizable fluid typography
Built-in Light & Dark mode support
Builder Global Styles
Super useful builder context menus
Builder custom elements library
Supports Oxygen Builder
Will support Bricks Builder (Soon)
Colors
Thanks to Open Props, OxyProps Lite includes Open Color, an open-source color scheme optimized for UI development.
--o-gray-{0-9}
--o-red-{0-9}
--o-pink-{0-9}
--o-grape-{0-9}
--o-violet-{0-9}
--o-indigo-{0-9}
--o-blue-{0-9}
--o-cyan-{0-9}
--o-teal-{0-9}
--o-green-{0-9}
--o-lime-{0-9}
--o-yellow-{0-9}
--o-orange-{0-9}
Light & Dark mode management
You manage Light and Dark Modes by creating aliases (If you are not familiar with design tokens and aliases, you can watch this video)
html {
--o-surface-1: var(--o-gray-0);
--o-surface-2: var(--o-gray-2);
@media (prefers-color-scheme:dark) {
--o-surface-1: var(--o-gray-9);
--o-surface-2: var(--o-gray-8);
}
}
If you choose to load OxyProps Lite Normalize, you will get access to the following ready-made aliases, which are light / dark responsive :
--o-surface-{1-4} --o-text-{1-2} --o-link --o-link-visited
--o-surface-{1-4} --o-text-{1-2} --o-link --o-link-visited
Apply Opacity
All colors have their equivalent HSL prop in the form --o-color-{0-9}-hsl. These hsl props allow you to use CSS hsl() function in the following way.
The following example will apply a backdrop using grape 9 with a 30% opacity.
.o-overlay {
background-color: hsl(var(--o-grape-9-hsl) / 30%);
}
result
The following example will create a linear gradient from blue 5 to blue 5 with a 5% opacity.
.o-my-gradient {
background: linear-gradient(to right, var(--o-blue-5), hsl(var(--o-blue-5-hsl) / 5%));
}
result
Gradients
The Open Props library includes 30 done for you gradients
background: var(--o-gradient-{1-30});
Noises
Open Props also offers a collections of noises and noise filters
background: var(--o-noise-{1-5});
Noises 1 to 5 as background images:
Noise filters 1 to 5 combined with gradients and noises:
background: var(--o-gradient-{1-30}), var(--o-noise-{1-5}); filter: var(--o-noise-filter-{1-5});
Shadows
box-shadow: var(--o-shadow-{1-6});
Inner Shadows
box-shadow: var(--o-inner-shadow-{0-4});
Aspect Ratios
aspect-ratio: var(--o-ratio-{name});
--o-ratio-square
--o-ratio-portrait
--o-ratio-landscape
--o-ratio-golden
--o-ratio-widescreen
--o-ratio-ultrawide
Typography
Font Families
font-family: var(--o-font-{family});
Font Weights
font-weight: var(--o-font-weight-{1-9});
Letter Spacing
letter-spacing: var(--o-font-letterspacing-{0-7});
Line Height
line-height: var(--o-font-lineheight-{00-5});
Static Font Size
font-size: var(--o-font-size-{00-8});
Fluid Font Size
font-size: var(--o-font-size-fluid-{0-3});
Sizes
Static Size
margin: var(--o-size-{000-15});
Fluid Size
margin: var(--o-size-fluid-{1-10});
Reading Content Size
max-width: var(--o-size-content-{1-3});
Headline Content Size
max-width: var(--o-size-header-{1-3});
Borders
Border Size
border-width: var(--o-border-size-{1-5});
Border Radius
border-radius: var(--o-radius-{1-5});
Blobs
border-radius: var(--o-radius-blob-{1-5});
Layers
z-index: var(--o-layer-{1-5}); z-index: var(--o-layer-important);
Layer 1
Layer 2
Layer 3
Layer 4
Layer 5
Easing
Ease
animation-timing-function: var(--o-ease-{1-5});
1
2
3
4
5
Ease-In
animation-timing-function: var(--o-ease-in-{1-5});
1
2
3
4
5
Ease-Out
animation-timing-function: var(--o-ease-out-{1-5});
1
2
3
4
5
Ease-In-Out
animation-timing-function: var(--o-ease-in-out-{1-5});
1
2
3
4
5
Ease Elastic
animation-timing-function: var(--o-ease-elastic-{1-5});
1
2
3
4
5
Ease Squish
animation-timing-function: var(--o-ease-squish-{1-5});
1
2
3
4
5
Ease Steps
animation-timing-function: var(--o-ease-step-{1-5});
1
2
3
4
5
Animations
Base
animation: var(--o-animation-{animation-name});
--o-animation-fade-in
--o-animation-fade-out
--o-animation-scale-up
--o-animation-scale-down
--o-animation-slide-out-left
--o-animation-slide-out-up
--o-animation-slide-out-right
--o-animation-slide-out-down
--o-animation-slide-in-left
--o-animation-slide-in-up
--o-animation-slide-in-right
--o-animation-slide-in-down
--o-animation-spin
--o-animation-ping
--o-animation-blink
--o-animation-float
--o-animation-bounce
--o-animation-pulse
--o-animation-shake-x
--o-animation-shake-y
Combined
.slide-fade {
animation:
var(--o-animation-fade-out) forwards;
var(--o-animation--slide-out-down);
animation-timing-function: var(--o-ease-squish-3);
animation-duration: 3s;
}
Shake In
.shake-in {
animation:
var(--o-animation-shake-y),
var(--o-animation-fade-in),
var(--o-animation-slide-in-left);
}