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.
Just like in OxyNinja, the classes for CSS grid layouts are extremely powerful and I highly recommend taking a look at Tailwind's documentation on CSS grid layouts to see what you can do with them. You won't regret it, I promise!
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.
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.
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!
Hi Alec - great review. Just curious how style editing works in Oxygen when using the Tailwind framework: if you edit an element style in Oxygen (say choose a colour which is not in the Tailwind pallet or simply change the padding), is that just written in standard css by Oxygen? If you make a change which is within Tailwind class parameters will it be reflected in Tailwind CSS or just in the outputted Oxygen stylesheet? Also, what about other Oxygen extensions - Oxyultimate Woo for example, would that play ball within the Tailwind framework?
Many thanks - love the look of Tailwind but still getting to grips with how it works within Oxy.
Hi Harry,
OxyMonster's Tailwind classes are integrated into Oxygen the same way that classes you create yourself within the Oxygen editor are. So for example, if you open up the .p-5 class in the editor you'll see the 20px padding settings right there in the editor, and if you change it, it'll be changed site-wide. What OxyMonster did is basically just take all of the classes from Tailwind and add them into Oxygen.
It shouldn't interfere with any other plugins. The only issue you might run into is having too many CSS classes. Google Chrome actually hits a limit at around 1300ish CSS classes where the Oxygen Editor will crash because Chrome can't handle the volume of classes. The base framework of OxyMonster adds roughly 500 classes.