Utility Classes in Xenon

Take advantage of powerful utility class frameworks while exporting in Xenon.

Popular utility class frameworks like Automatic.css and OxyNinja Core (both 3rd party paid products) can help you significantly when it comes to styling your Oxygen Builder websites. These frameworks import large quantities of valuable classes into Oxygen that help you work fast and keep your site consistent by way of spacing, colors, typography, and more.

Combining these frameworks and Xenon mean you can have a site launched in Oxygen in record time. We will cover how you can add classes to any element below.

Element styles take priority, so any styles applied directly an element in Figma will override a class, until those styles are cleared.

Note: The class must already exist in Oxygen before importing shortcodes or else the class will not appear on the element. For this reason, run your utility class import first.

Where to Add Classes

You can either add the class names in Xenon to the element via the "classes" field, or you can wait and add them directly in Oxygen.

As long as your Figma document was organized with groups and frames, the structure of your page will there and you simply need to add classes for margin, padding, etc.

We recommend adding as many classes as you can via Xenon so that when you load your page, the layout and alignment is more user-friendly for you to perfect the page.

Automatic.CSS

One of the two most popular utility class frameworks for Oxygen is Automatic.CSS which comes with a host of powerful classes and variables.

Let's say you wanted to set a header container to max width, flex direction of row, medium padding, and space between. You could add the following utility classes to your header container in Xenon:

flex--row, pad--m, justify-content--between, width--full

Note: Automatic.CSS is a paid product and can be purchased here*: https://xenonapp.com/go/automatic

OxyNinja Core

Another popular framework for Oxygen classes is OxyNinja Core. This framework utilizes a slightly different approach, so the class names are different.

Let say you, again, wanted to set a header container to max width, flex direction of row, medium padding, and space between. You could add the following utility classes to your header container in Xenon:

c-columns-2, c-padding-m, c-columns-l-1

Note: OxyNinja Core is a paid product and can be purchased here*: https://xenonapp.com/go/oxyninja

Using Your Own Classes

You can add any class you want to your website via Xenon. Some users decide to make their own utility classes and create a "staging" site they'll clone to start a new website build.

This option is totally viable as well. If you want to create your own utility classes, you can add them to your elements in Xenon.

If you're adding elements into and existing Oxygen website that already has classes, you can use those same class names on the elements you're importing to save yourself from having to manually add those styles and classes later.

Each framework and DIY approach has it's pluses and minuses. Deciding which approach is best for you is not required right away, but many seasoned Oxygen developers use one of these paid frameworks in almost every site build.

Combining classes with Xenon will enable you to build websites faster than ever before.

*These links are affiliate links and will give us a small kickback, should you decide to purchase.

menu