OxyMade Review: Amazing Tailwind-Based Framework/Design Set For Oxygen Pros

Published: 1 month ago

This article will be reviewing the OxyMade Framework and design set offering for Oxygen Builder. As an agency, we have been using this tool for the past couple of projects and absolutely love it.

In this article, we will detail how we use it to save tons of time, create consistent websites, and augment our workflow to be more efficient. We're going to take a look at both the framework and the design sets, as well as the back end dashboard that OxyMade has to offer to its users.

Finally, we will take a look at the company itself, the support they offer, the frequency and gravity of the updates, as well as the pricing of OxyMade. This article is meant to be an all-in-one source of information related to OxyMade which should help you make an informed buyers decision.

Graphical user interface, website

Description automatically generated

Without any further ado, let's get into our review of the OxyMade Framework and design set collection for Oxygen Builder.

Why Use A Framework In Oxygen Builder?

The draw of this product will differ between the people who use it.

More professional web design agencies that build websites from scratch will probably enjoy the framework a lot more than the design set library. Somebody looking to build a quick and professional website with Oxygen Builder for their company may be more focused on the design sets.

As an agency, the framework that this tool has to offer is incredible. It consists of hundreds of utilities CSS classes for spacing, colors, sizing, aspect ratios, and more – and is based off the popular Tailwind CSS framework. We will get into the specifics in the next section of this article, but let's first talk about why frameworks are so beneficial!

Tailwind CSS IntelliSense - Visual Studio Marketplace

Personally, I tried the Tailwind framework one hard coding websites and just didn't really like it. Not sure why, but the second time I came back to it using OxyMade (of course, it's not the raw Tailwind framework, instead it is modified for Oxygen Builder), I absolutely loved it.

Let's talk about Tailwind compared to other CSS frameworks such as Bootstrap really quickly. The ideology behind the Tailwind CSS framework is a bit different when compared to older offerings like Bootstrap. This, Foundation, and Bulma all can be classified as legacy UI kits.

Instead of following this mold, Tailwind is a utility class framework. That means that it doesn't have a predesigned theme or components, instead it has several utility classes that you use to achieve consistent responsive design throughout your website. Some people (like myself when I first tried Tailwind on a hard coded website) don't like that the HTML markup can get unwieldy if you're using a ton of CSS classes to define things like height, with, aspect ratio, margin, and padding.

For example, we could have a div like so (using OxyMade classes): <div class=”mb-6 p-6 w-full center text-left text-xl”></div>

The following code will set the padding, with, height, and margin. It will also use flex to center elements within.

I really enjoy this OxyMade Framework, but it's worth noting that using any type of framework with the Oxygen Builder is a massive timesaver and something that should be adopted into any professionals workflow.

There's a reason why people don't create CSS styles from scratch one hard coding websites. Oxygen Builder is the only page builder that will allow you to use a framework such as OxyMade or manually import classes yourself (using Swiss Knife), and apply them to specific elements.

Therefore, it becomes the only page builder in the WordPress ecosystem with that class management feature, meaning you can use frameworks with it and get a much more professional consistent product at half the time!

Adopting any framework into your workflow when creating websites with Oxygen Builder will lead to a more efficient build that's very consistent. Instead of going into the advanced settings for each individual element on Oxygen and setting the same things over and over again, you just use classes which are already created to be responsive.

If you need to tweak individual elements, you can simply override them by using the native Oxygen Builder styling system and applying it to the ID of that specific element.

That's why you want to use a framework. Now, let's take a look at the OxyMade Framework, and show you all the benefits that come with it.

OxyMade Framework Review

As mentioned before, this is a well featured framework based off Tailwind. It comes with a collection of utility classes that allow you to manipulate the padding, sizing, spacing, and more by simply adding and removing these utility classes to elements.

While there are a lot of CSS classes to get your head around, you will pretty quickly learn the most popular ones like margin, flex, padding, and sizing. There's also a very easy to use CSS cheatsheet which lists all the classes included in this framework.

Graphical user interface, application, Teams

Description automatically generated

After using this framework to create several websites on Oxygen Builder, I've never had the need for an additional class. It really has everything that you need to create a consistent site. One of the best things is that the margin, padding, and gap for CSS grid are all the same. For example, mb-8 p-8 and gap-8 will all result and a consistent look throughout those elements.

Additionally, we can set the sizing of text. Like every single class included in this framework, the sizing is completely responsive and fluid. As the screen size get smaller, the text will as well. As long as you use the framework for the sizing of all text and elements, the website will proportionally shrink, meaning that you barely need to do anything to create a responsive website with OxyMade and Oxygen.

There are many iterations of these type of classes, but due to the simple naming system, it's very easy to remember what class to use wear. Simply match up the numbers and you're good to go.

How It Works

When you install the framework on your website, OxyMade will import several classes into the builder as well as two custom stylesheets. On updates, these stylesheets and classes are overwritten with the new changes.

A picture containing graphical user interface

Description automatically generated

After installing, you then have access to all of the classes that the framework has to offer by simply typing them into the custom selector field in the builder:

A screenshot of a phone

Description automatically generated with medium confidence

Once you have applied the class, the styles are also applied. This tool also features a helpful class lock system, meaning that you won't accidentally make changes to a framework class.

A screenshot of a phone

Description automatically generated with medium confidence

Color System

While around 80% of the classes that we use are intended to space and size elements, the rest are to set colors. This is a massive selling point of the OxyMade Framework, and one that allows you to easily switch color schemes. As a digital agency, this is very helpful.

Our clients don't need to make decisions on the color scheme until the end of the project. In fact, when the website is built, we can switch color schemes out, and send them screenshots of various ideas. That's because this color system is very modular al intended to do just that.

Graphical user interface, text

Description automatically generated

Like everything with a utility focused framework, colors are applied to elements with classes. You can use classes to color the background of sections and divs, font colors, and more. You can also use the handy OxyMade color system which is present on the backend builder; Toggle the color panel, click on the color that you want to use, and paste the output into the color field in the Oxygen Builder settings.

Here is an example of what that paste would look like:

var(--primary-color)

This color system uses CSS variables within the CSS classes that are used to apply color globally. On the WordPress back end settings page for OxyMade, we’re then able to change our color palette. Any changes made here will be applied to the front end of the website as we are using CSS variables.

Graphical user interface, text, application

Description automatically generated

That means that you have central management of all of your colors in one place, an easy way to implement them into your website, and global changes if you need them. Additional features that make my agency happy include the ability to import and export these colors, use predefined skins, and even edit the Oxygen native colors (which is something that we don't actually use when OxyMade is installed because this system is far superior to that one).

Responsive/Fluid Fonts And Spacing

We mentioned this above, but it's worth reviewing: all of these spacing classes an font size in class is included in the OxyMade Framework are fluid and responsive. That seriously minimizes the work that you need to do to get a desktop website working well on a mobile device. Instead of setting the font size for each individual breakpoint within Oxygen, if you use the heading and text utility classes, they are already fluid and responsive.

For example, a class for large text would look like this:

Font-size: min(max(3.9rem, calc(3.9rem + ((1vw - 0.32rem) * 2.625))), 6rem)

This fluid and responsive design applies to the padding, margin, CSS grid, and more:

Graphical user interface, text

Description automatically generated

Other Items

The framework comes with additional features which are present on the OxyMade settings page in the admin back end.

Graphical user interface, text, application, email

Description automatically generated

You can reset Oxygen defaults, reset back to before you installed this plugin, and manage front end style sheets.

Graphical user interface, text, application, email

Description automatically generated

You can manage CSS classes and folders.

Graphical user interface, text, application, email

Description automatically generated

You can also manage modules and power tools. This includes a tool that allows you to lock the utility classes and merge classes. Another tool that allows you to change utility classes to ID's. Another tool that allows you to paste code taken from the OxyMade design set preview website into the site.

One final thing, which doesn't need its own section, but should be mentioned is the fact that there are a ton of hover styles that are very easy to add to elements. Simply choose the hover style, select the element that you want the hover style to be applied to, and click OK.

That concludes the framework section of this review. It is by far our favorite feature of this tool and has saved us hours when it comes to building websites. The consistency as well as the responsiveness of all of these classes make it very easy to create professional looking websites in a short amount of time.

It takes a bit of getting used to especially if you aren't familiar with the utility focused CSS framework called Tailwind, but once you begin to memorize the classes an understand the ideology behind how this is made to work, you will be incredibly impressed.

A Look At OxyMade Blocks and Design Sets

The second of the two major features that you will get access to when purchasing OxyMade is the blocks and design sets. These are pre-made elements for Oxygen Builder that utilizes the CSS framework. You can take these blocks and import them directly into your Oxygen website.

Graphical user interface

Description automatically generated

For somebody looking to create a high quality professional looking website utilizing this CSS framework, but wants to save time or doesn't know where to get started, these design sets are made for you.

Compared to other offerings, the sheer volume of components that you'll get with this purchase showcases the value of OxyMade. There are over 25 categories of over 1000 individual blocks which can be used on the Oxygen website.

There are eight major sets each of which encompasses a different theme. For example, there's one for software as a service websites/startups, and another for restaurants.

Something that we haven't used, but a unique feature that isn't found anywhere else is the OxyMade page builder. It allows you to browse through all elements in the mega design set, drag and drop them on to a page, and then copy and paste this code into your Oxygen Builder. With this app, you can create complete pages ready to go - pretty neat.

Graphical user interface

Description automatically generated

As an agency, we typically design custom sites for our clients. However, for some personal projects I've used these blocks to create a good foundation for my website, which I'll then edit and modify to match my design language and direction of the website. I could see these design sets being used by those looking to implement ready built structures on the web sites and added them as needed, instead of building everything from scratch.

All of these blocks are completely responsive and ready to go. You could simply throw three or four sections together, change the text, change the global colors, and have a custom website ready to go live in mere minutes.

OxyMade Support & Docs

The support and documentation that this company offers for their OxyMade Framework and design sets is unparalleled. The primary support channel is a Facebook group, which means that we've seen first hand how quickly the team responds to questions.

We also really like the fact that they are listening to customer suggestions and requests. For example, a CSS purge feature was requested several months ago, and properly implemented.

The documentation for this product as well as CSS cheatsheet are easy to understand, well designed, and simple to use. There aren't many things to go wrong on utilizing a framework. As long as it imports all the CSS classes, you should be good to go. The same goes for the design set. There is a specific way of incorporating them on your website, but the directions are clear, and as long as you follow them you'll be up and running in a few minutes.

OxyMade Developers and Team

We will cover this in more detail when we get to the pricing section of this review, but this is offered as a lifetime deal. When products have lifetime deals, it's important to understand and trust the team and company behind it.

The developers and team behind this tool are well respected members of the community, offering high quality support and an incredible product. We've been back and forth with the founder of the company, and trust him too continue improving the framework and features of this offering well into the future.

OxyMade Pricing

With that said, let's take a look at the pricing of this tool:

Graphical user interface, application

Description automatically generated

OxyMade gives you two options when purchasing their product. The first option comes in at $149. This gives you lifetime access to all design elements included in the megaset, as well as the framework, ability to install it on unlimited websites, and future updates to this individual set.

The second option comes in at $229 and gives you access to the framework as well as all design sets, priority support, lifetime updates, and the ability to install on unlimited websites. This also includes the power modules (for the framework), while the first option doesn't.

When purchasing, you have the ability to pay up front or break the charge into a installment plan. This makes it a bit more accessible to somebody who may just be beginning with the Oxygen Builder.

You’ll also the support, mentioned above, a 14 day money back guarantee so you can buy with confidence, and a secure checkout.

The question now comes down to: “is it worth it?”. For us, this is a resounding yes. And, I think it's a resounding yes for both agencies and individuals. If you're building a single website you will save yourself a ton of time by using the prebuilt design sets and then changing the styling and text. This gives you an incredible base to build a website from. It's very easy to find a design set or element that you like and then add it to the Oxygen site.

If you are an agency, the framework will save you literal hours every single day. Any framework used with Oxygen is a good idea, but the Tailwind approach that OxyMade takes is unique and helpful. In the beginning of Tailwind, I did not like this approach. Now, I cannot live without this approach.

The framework comes with every single class you will possibly need and more, is very easy to remember due to the simple naming structure, and ever improving. The color system, CSS purge, and additional features that are getting added every month simply continue to elevate this product to one of our favorites.

The community also thinks this to be true. Whenever asking about the most important purchase somebody can make after buying the Oxygen Builder, this and hydrogen pack are the first two and most popular answers.

OxyMade VS Competition

There are two major frameworks/design sets for Oxygen Builder. The first is OxyMade, and the second is OxyNinja. I recommend reading our OxyNinja review for more info on that product. If you have the budget, my suggestion is to purchase both. I think that OxyMade is an incredible system for creating standard websites on Oxygen, but it's lacking when it comes to custom elements (OxyNinja has an incredible and powerful slider) and WooCommerce design sets.

On the flip side, the framework that OxyMade has to offer is a lot better than the one that comes with OxyNinja.

Our Final Thoughts

There's a reason why this product is one of the most recommended ones in the Oxygen Builder official Facebook group. That's because it is an incredibly high quality tool that is consistently updated and offered as a lifetime deal. The framework will save you a ton of hours and help you build consistent well designed, responsive websites. The design sets are based on the framework and will save you a ton of time in terms of laying out structure for website which you can then manipulate by changing the global colors, fonts and additional variables.

I strongly suggest you go and check out the OxyMade website, where you can preview the demos of the design sets, take a look at the CSS cheat sheet, and make a decision for yourself. If you have any additional questions regarding OxyMade, feel free to reach out in the comments section below. We've spent over 30 build hours using this framework for two website projects so we are pretty familiar with the ends and outs of it.

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Chris Tucker
Chris Tucker
1 month ago

Oxymade is what really pushes Oxygen Builder to the top for quickly deployed profeesional websites. Agreed OxyNinja can be really powerful for Woocommerce. Add Hydrogen and nothing really competes in the Oxygen community. I do like Editor Enhancer for more complex/large builds. Great article!

Travis
Travis
24 days ago
Reply to  James LePage

Editor Enhancer is better than Hydrogen, IMO. 100% worth it.

Josh Olmstead
Josh Olmstead
1 month ago

Looks like they have an option to purchase just the framework for $69. I'm guessing that's the better purchase as an agency where most of design is bespoke anyway?

IsoGroup- Web Dev/Design, WordPress and More
In The Spotlight
OxyMade
$149 • v

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

In The Spotlight
OxyMade
$149 • v
A relationship driven website creation company.

Connect

© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram