OxyProps

OxyProps is the ultimate companion for WordPress developers and designers working with Oxygen Builder and Bricks Builder. By bridging the gap between advanced CSS workflows and visual page building, this plugin empowers you to create highly consistent, responsive, and performance-optimized websites without the tedious manual coding. Whether you are building complex layouts or managing global design systems, OxyProps streamlines your process by integrating a powerful CSS framework directly into your builder’s interface.

Key Features

• Modern CSS Framework Integration: Leverage the power of Open Props‚Äîa comprehensive collection of high-quality web design tokens‚Äîto ensure your site’s design is consistent, scalable, and modern.
• Smart Context Menus: Eliminate the need to memorize or manually type CSS property names. Access relevant props and utility classes directly within your builder‚Äôs fields with a simple, intuitive click.
• Light & Dark Mode Support: Design for multiple color schemes simultaneously. OxyProps provides logical color systems that allow your site to switch between light and dark modes out of the box, ensuring a polished look in any environment.
• Utility Classes Library: Speed up your development with a robust library of utility classes built on top of the CSS custom properties, allowing you to style elements rapidly without fighting against framework defaults.
• Advanced Custom Elements: Gain access to a suite of custom elements, including an expansive library of over 150,000 SVG icons and dynamic content generators, to enhance your pages with interactive and functional components.
• Performance-First Design: Built with clean code and zero-specificity rules, OxyProps ensures that your styles remain easy to manage and your website remains lightweight and fast.

Use Cases / Who It’s For

OxyProps is designed for professionals who demand efficiency and precision in their web development workflow. It is an ideal solution for:

• Web Designers: If you want to translate complex design visions into reality without being slowed down by technical limitations, OxyProps provides the tools to maintain visual consistency across every page.
• WordPress Developers: For those who prefer a class-first, code-like workflow, this plugin brings the power of CSS custom properties directly into the visual editor, significantly reducing the time spent on repetitive styling tasks.
• Agencies: Agencies managing multiple client projects will benefit from the standardized design system, which makes it easier to maintain, update, and scale websites while ensuring high-quality output every time.

Setup / How It Works

Getting started with OxyProps is designed to be a seamless experience that integrates directly into your existing builder workflow:

1. Installation: Install and activate the plugin on your WordPress site. The plugin intelligently detects whether you are using Oxygen Builder or Bricks Builder and adapts its interface accordingly.
2. Global Configuration: Use the plugin dashboard to define your design tokens, such as color palettes, typography settings, and spacing, creating a global blueprint for your site.
3. Visual Building: As you work within your page builder, use the enhanced context menus to apply props and utility classes directly to your elements.
4. Refinement: Toggle between light and dark modes within the builder UI to preview your designs in real-time, ensuring your site looks perfect regardless of the user’s system preferences.