OxyMonster CSS Framework For Oxygen Builder Review
By Alec Gall on October 22, 2020
Updated on October 22, 2020
Table Of Contents
What is OxyMonster?
OxyMonster is a plugin for Oxygen Builder that allows you to input part or all of a massive CSS utility class framework based on Tailwind into Oxygen quickly, easily, and modularly. This is similar to what OxyNinja does with its hybrid framework of UIkit and Tailwind.
I was fortunate to have the privilege of testing OxyMonster a few days before release, and this review will be largely based on my experiences with the beta release, though I do now have the full release version. Thank you, OxyMonster, team for the free key and the opportunity to test before release and give feedback!
So what is a CSS framework anyway? Basically, it's a huge list of CSS utility classes for efficient and consistent design. A utility class is a class meant to do one specific thing. You can sort of think of them like building blocks. You'll take a div for example, and add a class for padding, one for a shadow, one for rounded borders, and one for a background color and hey, suddenly you've got a card!
OxyMonster adds classes for pretty much anything you can think of. Anything from padding, margins, shadows, borders, colors, widths, fonts, alignments, Flexbox, CSS grid layouts, and so SO many more. Oxymonster is a super-comprehensive framework and you will seriously find classes for virtually everything. If you can think of something to make a utility class for there's a 99.999% chance that OxyMonster has already done it.
I recommend taking a look at the cheat sheet if you'd like to see a full list of all the classes available broken down into categories. Since it is very heavily based on Tailwind you can also use Tailwind's documentation if you need a better understanding of anything as their documentation is quite thorough.
OxyMonster does something interesting in that the framework comes in a modular form. There is a "base framework" which will do 99% of what you need to do, then the rest of the framework is broken down into many different subsections that you can add as you need them.
The base framework is just over 500 classes which is a lot on its own, but the full framework is almost 1400 classes. This is basically the entirety of what you would expect if you were using the full Tailwind framework.
If you're like me, when testing the plugin you might be tempted to add the entire framework all at once. Don't do that. I learned the hard way that the full framework is so big that the Google Chrome browser can't handle loading them all in the Oxygen Builder editor. This issue is known by the OxyMonster team, but there isn't much they can do about it as it is out of their hands and is a browser limitation. The team has since added a big warning to the framework module installation page explaining this. If you're using Firefox it should be able to handle the additional classes, but I don't recommend it anyway.
Long story short, you should start with the base framework and only add things if and when you need them.
Bulk Class Merging
I have to say, this feature is awesome. One of the biggest downsides to using a low-level utility framework like OxyMonster / Tailwind is that you sometimes end up with a ton of classes on a single element and often end up repeating that same massive list of classes across several elements. OxyMonster's class merging feature gives you a super easy solution to that.
In three very short steps you can combine all of the classes on an element into one class with a new name.
In the above example, I was making a simple card entirely with utility classes and the list looked something like "p-5, bg-primary, color-tertiary, rounded-md, shadow-md". Previously I was dealing with this by quickly copying all my classes from one element to another using Hydrogen's Copy Styles feature, but that still adds a ton of redundant classes and isn't best practice.
Using OxyMonster's merging feature I was able to instantly merge all five of those classes into one class that I called "mycard". Now I can simply put that one class on all the rest of my cards instead of a list of five. It's very common to have elements with this many classes on them and you'll frequently find yourself having twice as many in some cases using any utility class framework, so this merging feature is actually really awesome in my opinion.
Pros and Cons
Heavily based on Tailwind, and Tailwind is great
Huge amount of classes
Classes can be installed modularly
Class merge feature is super useful and conducive to good design practices
Class options are extremely comprehensive
There's something for everything
Installing the base framework and subsequent modules is super quick and straightforward
Lifetime license deals
There are literally so many classes that you can break the Oxygen Editor in Chrome
This is a Chrome limitation though. Not really OxyMonster's fault
It can take a little bit of time to get comfortable using it while you're trying to learn the syntax
Feels great once you've got it down though!
It's a brand new product and there are always risks associated with that
The CSS Framework is currently available for $69.99 as a standalone or $199.99 bundled with OxyMonster's design sets. Both of these options are lifetime deals. Any users of OxyMade can get the OxyMonster CSS Framework for free via a coupon you should have received via email.
Ultimately, I think OxyMonster is great. The framework is basically Tailwind which is tried and true and highly acclaimed. It has pretty much any utility class you could ever need. I absolutely love the class merging feature, and even though it's perhaps one of the minor features of the plugin, I think it's one of the best things it adds to Oxygen.
The pricing is competitive and is currently in the form of a lifetime license which is always nice.
The big question I'm expecting to start seeing is "Should I use OxyMonster or OxyNinja", and that question is going to be tough to answer. I think if you're experienced with Tailwind then OxyMonster is a no-brainer as you're going to feel right at home. The same goes for if you're just looking for a full-fledged CSS framework. If CSS frameworks are a newer concept for you or you're looking for a more user-friendly one I think OxyNinja might be the better choice. I'll probably write a whole post comparing the two at some point, so stay tuned for that!