Monster color system

We have released 3, 4 updates in the last 7 days with the following features, enhancements and bug fixes.

Monster color system - Alternative to Oxygen's global color system

Monster color system:Starting now, we will use Monster color management system for all our kits.This is a very good/big update and you'll have no problems with colors when using different design kits.

Why this update is important?
As we have many design kits in our product, most of the times, based on our users feedback, people usually want to use multiple design kits in a single website.

Before this update, every design kit, even those from Oxygen default kits, core or our own kits, created its own global color set and a few colors for that kit to function properly.

As a result, the global color system usually becomes too crowded and turns the design system hard to maintain properly.

And we use colors in our classes such as color-primary, bg, bg-primary, and when we don't have a particular color in the global color system, it turns everything bad and awkward.

To resolve this issue and also prepare the path for bright future plans, we have spent a lot of money, time, and effort to customize each and every block with a Monster color system.

Solution:

Now, no matter what designs/design sets you use with our kits, our blocks will have no issues with colors. Additionally, we created a simple color palette generator to create different color palettes easily. The color palette generator will be improved over the next few weeks.

These are based on css variables, so these colors wont be available in your default Oxygen global colors, our css classes use our colors, so again, there will be no conflict with Oxygen's global colors.

Colors area inside the plugin:This update will help us to develop better sites, with better functionality.

This is the 1st of a series of updates we are planning to improve the workflow. You can see, install, modify colors from

Your website -> oxyMonster Framework plugin -> colors page

Here you can see a few important areas.

1. Default palettes

Here at first, you will see full install button, and when you click on it it will install full kit settings, colors & all the extra classes that kit has. Once you clicked on full install, you wont see the full install button again and you will see 3 icon buttons which are for

colors -> This will install only the colors that kit has. Colors are saved in a custom css file in your wp-uploads directory.
Settings -> This will install only the global settings that kit has. Like, Headings, fonts, basics, and anything under global settings in Oxygen editor.
Extras -> This will install only the extra classes that kit offers. Like, buttons, cards, avatars, icons etc.

You can use these above 3 buttons to reimport any of the settings that kit offers. If you install the full install, you don't need to import these individual imports unless if you see any issue.

2. Edit global colors

Now we are saving global colors as CSS vars and saving them in a separate css file (monstercolors.css) which loads in the Oxygen editor and also in the frontend. This file contains the colors we are using here.

Whatever you edit here, will be saved in the mentioned css file.

3. Import / Export Colors:

Now you can import export your colors between sites. And also you can import colors from our generator by pasting the colors in the import colors area.

4. Color palette generator V1:

Visit our color palette generator here: https://try.oxymade.com/color-palette-generator

Click on the Colors customizer button in the bottom of your browser and select colors as you want in the slider area and scroll down to copy the colors in the slider. Once you are done with customizing and copy the colors you will be greeted with a success modal.

Now you go back to the colors page in our plugin and paste the copied code into the colors importer. Best thing is you can use our colors for any of our kits as we used same color system for all the kits.

Using color palette generator

5. Colors panel in the editor:

Using colors panel inside Oxygen editor

We are introducing color panel in the Oxygen editor to pick, copy/paste colors in the editor anywhere. You can just use our colors like regular colors anywhere, even in the code block.

With this update all the updates related to colors are over. Feel free to play with the plugin and the colors and hope you will love this new Monster colors update.

Plugin Improvements:

We have added a clear get started guide on the plugin's welcome screen and removed a few functions to clear the confusion.

We have modified our plugin to delete a few features we think are unnecessary at this point to reduce the friction. And also we have modified the interface to make it easy for everyone to get started with our framework.

Removed the Full framework option as we think that is unnecessary at the moment and will be introduced again with better options, better compatibility with better performance. For now the base framework is what most of the sites ever need.
Added browser prefixes to our grid classes for better browser compatibility.
Updated all our px values to REM for better future features implementation.
Now you can Install kit specific color palettes, global settings & custom framework classes from Colors page in the plugin.
Removed our style sheet for now as that is unnecessary at this point.
Hiding the license key behind ***** after the license activation.

How to upgrade in an existing site using our kits / framework:

Update the plugin first to the version 0.29.
Re install the framework from the welcome page.
Go to colors page in the plugin and install one of the default color palette from there.
Go to your Oxygen global colors area and match the colors between Monster colors.
You should be all good.

Upgrade video

How to install a fresh installation:

Install and activate the plugin.
Go to welcome screen and Install the base framework.
Go to colors page and install the kit you want to use.
Add the domain to our dashboard in our site & get the key.
Add the site key in your site library.
Start using our kits in the Oxygen editor as you want.
That's all.

Design Kits Quality & Optimization Update:

Background images to <img> Update:

We have converted all background images to regular images with <img> tags.
This is particularly helpful if you want to add ALT text, add external JS or anything to the images.
Better for SEO, visibility & the speed.

All kits are updated to be compatible with REM units instead of px already.

PS: We are still working to ensure the quality and compatibility and if there are any issues, everything will be fixed in next 24 hours.

-- Please report any bugs, issues.