Modules

Introduction to our Power Modules

Modules are simple tools which enhance the way you work with the Oxygen editor.

We have a few simple modules in our plugin to make your work flow better with our framework.

Modules overview
Modules overview

We have the following modules:

1. Merge classes:

Merge classes is the most popular and very useful utility when you work with a utility framework like ours.

It helps you to merge multiple utility classes and make them a single class to quickly use that single class anywhere you want to use it.

Find more info about Modules →


2. Blogzine typography and color sync with the Gutenberg:

Merge classes is the most popular and very useful utility when you work with a utility framework like ours.

It helps you to merge multiple utility classes and make them a single class to quickly use that single class anywhere you want to use it.

Find more info about Blogzine typography →


3. Auto dark mode toggle:

Merge classes is the most popular and very useful utility when you work with a utility framework like ours.

It helps you to merge multiple utility classes and make them a single class to quickly use that single class anywhere you want to use it.

Find more info about Darkmode settings →


4. Utility class locking:

Utility classes remains same regardless of your design. Generally, you should not edit utility classes. So we have locked down the option to edit class properties when you select our utility classes in Oxygen editor.

But incase you know what you are doing and want to edit our utility classes, you can learn more about utility class locking here: Utility class locking →


5. Paste button in the editor:

Paste button is the quick way to copy our blocks from Live preview area → or Page template generator → with one click.

You can use our above mentioned tools and build a quick page and copy the page into your Oxygen editor using the paste button we have in the Oxygen editor.

Read more about how to use our copy / paste option here: Copy paste blocks →


6. Manage CSS selectors:

This is not something you can enable / disable at the moment.

CSS classes module is a way to quick check the overview of all the CSS classes we have in our Oxygen installation.

Using our CSS classes area in our plugin, you can backup / restore the classes as well as a few extra quick tasks like, deleting all the CSS classes or a particular CSS folder with one click.

Read more about it here: Global CSS classes →

7. OxyMade Global colors editor:

This is not something you can enable / disable at the moment.

Every design kit, even those from Oxygen default kits, core or our own kits, create 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 created OxyMade color system.

Read the detailed article on our OxyMade color system →


8. Oxygen native colors editor:

This is not something you can enable / disable at the moment.

Sometimes we may need to edit the Oxygen’s global colors. Oxygen doesn’t provide a way to edit Oxygen color ids or color sets ids.

We have an option to edit Oxygen’s global colors' id, name, color, set name, set id through our plugin.

Find more info about how you can edit Oxygen native colors editor →


9. Enable / disable powerful hover classes:

With the OxyMade framework, we install around 45 very powerful and beautiful hover animations through classes. That loads around 40KB of CSS in your install. So, if you don’t use hover styles, you can simply disable them by clicking on disabling hover styles button in the modules box.

Find more info about how you can edit Hover classes →


10. Migrating CSS Selectors between sites:

Sometimes we may need to migrate all the CSS selectors we have between our own sites and there is no easy way around to do that. But now, you can simply click on Export button in the Manage CSS Selectors / Classes and copy the json data in the export box and paste in the other site’s Oxygen → Import / Export box.

Find more info about how you can edit Oxygen global classes browser →


11. Migrating Stylesheets between sites:

Sometimes we may need to migrate all the style sheets we have between our own sites and there is no easy way around to do that. But now, you can simply click on Export button in the Manage Stylesheets and copy the json data in the export box and paste in the other site’s Oxygen → Import / Export box.

Find more info about how you can edit Oxygen style sheets manager →


12. Migrating Colors between sites:

Sometimes we may need to migrate colors between our own sites and there is no easy way around to do that. But now, you can simply click on Import / export colors button in the Manage colors box and copy the colors data in the export box and paste in the Import box in another site.

Find more info about how you can Import export colors →