✼ Disclaimer: SyncWin is user-supported therefore this page may contain our affiliate links and if you purchase something using those links, we may get some commission without any additional cost to you. Click to Learn More.
Please note we want to keep things crystal clear that this page may contain some of our affiliate links. Also, we don't know, use or recommend every product we link to, so please do your due diligence before making your buying decision.
However, there are very few selected products that we trust, use, and recommend to our readers and community, and we always mention that on our website which you could also find on our dedicated Recommendation Page.
Hence, if you make a purchase using any of those links, then it is safe to assume that we might get a small amount of commission without any additional cost to you, which helps and encourages us to produce more helpful content like this for you.
If you're curious to know about the proper usage of CSS Utility Classes in Oxygen Builder, then hold your breath as this post will definitely guide you through the potentials and possibilities of using them to design complex websites as I have shared my personal experience as well as all the utility classes & their purposes that I'm currently testing on my development site.
Utility classes are CSS class names that serve one particular purpose and are named as such. Typically a class like . bg-blue would give you background-color: blue, for example.
I hope you might have already watched the recent video by Elijah Mills about CSS utility classes on the official YouTube channel of Oxygen Builder, if not then I would highly recommend you to watch it here before reading this post.
Please note that the CSS Utility Classes I mentioned in this post are my personal preference and I can't guarantee that they would work in all scenarios without any issue.
Therefore I would highly recommend you be very careful and do your due diligence before seriously considering them and relying on them too much.
Disclaimer: Always keep in mind that if you are using a utility class for a particular styling then you should always avoid the same styling to the parent id or class assigned to that particular element.
And also don't implement any other styling to the utility classes as they are made for single-purpose usage, so use them only for what they are made for and add the rest styling to the parent id or class.
Now that you already have an idea about the utility classes so I will straight get to the point without wasting further time.
TABLE OF CONTENTS
Why Should You Consider Using The CSS Utility Classes?
It can be very helpful especially if you have a large website and you are going to style a complex design using Oxygen keeping in mind that you can change the style in a CSS class in one place and it will apply everywhere automatically that contains that same CSS class.
Most of the time you can design a particular element that you want to use on different parts of your website, for example, a button, but you would also want certain things to be different on that element on the different places of your site such as the button color and its hover.
In this scenario, a utility class would allow you to change the button colors only in particular places without changing it everywhere, which is a lifesaver if you are building a complex website with a large number of templates and pages.
Recommended CSS Utility Classes
In the below sections I have shared all the CSS utility classes that I prefer and personally testing on my development site as well as on a new client's website where I am working currently.
Background CSS Utility Classes
Background Utility Classes are dedicated to the style options that are available under the background settings in Oxygen editor, it will help you to make specific changes to the background of any particular Oxygen element without affecting the other element styles if that is also used in other places of the website.
Utility Classes for Background Color
Light Background Color: sw-background-light Light Background Color Alternative: sw-background-light-alternative Dark Background Color: sw-background-dark Dark Background Color Alternative: sw-background-dark-alternative Gradient Background Color: sw-background-gradient Gradient Background Color Alternative: sw-background-gradient-alternative Accent Background Color: sw-background-accent
Light Background Color on Hover: sw-background-light-hover Light Background Color on Hover Alternative: sw-background-light-hover-alternative Dark Background Color on Hover: sw-background-dark-hover Dark Background Color on Hover Alternative: sw-background-dark-hover-alternative Gradient Background Color on Hover: sw-background-gradient-hover Gradient Background Color on Hover Alternative: sw-background-gradient-hover-alternative Accent Background Color on Hover: sw-background-accent-hover
Note: When you are using the background color as a gradient and you want to add the background hover utility class, then the background hover should also be the gradient as the single color will not work for hover when the background is containing a gradient color.
Size & Spacing CSS Utility Classes
Size & Spacing utility classes are dedicated to globally control the style of any specific element and it falls under the size and spacing settings within the advanced settings of Oxygen editor.
Utility Classes for Padding
Wider Left Right Padding: sw-padding-left-right-wider Wide Left Right Padding: sw-padding-left-right-wide Medium Left Right Padding: sw-padding-left-right-medium Narrow Left Right Padding: sw-padding-left-right-narrow Narrower Left Right Padding: sw-padding-left-right-narrower
Wider Top & Bottom Padding: sw-padding-top-bottom-wider Wide Top & Bottom Padding: sw-padding-top-bottom-wide Medium Top & Bottom Padding: sw-padding-top-bottom-medium Narrow Top & Bottom Padding: sw-padding-top-bottom-narrow Narrower Top & Bottom Padding: sw-padding-top-bottom-narrower
Layout utility classes will help you control the style of any particular layout option of an Oxygen element that falls the layout settings within the advanced settings of Oxygen editor.
Utility Classes for Flex Align Items
Left Flex Alignment on Desktop: sw-desktop-flex-left Center Flex Alignment on Desktop: sw-desktop-flex-center Right Flex Alignment on Desktop: sw-desktop-flex-right
Left Flex Alignment on Tab: sw-tab-flex-left Center Flex Alignment on Tab: sw-tab-flex-center Right Flex Alignment on Tab: sw-tab-flex-right
Left Flex Alignment on Mobile: sw-mobile-flex-left Center Flex Alignment on Mobile: sw-mobile-flex-center Right Flex Alignment on Mobile: sw-mobile-flex-right
Note: The precedence depends on the order the selectors are added to Oxygen, not the element itself because the selectors have the same specificity, the last-printed rule in the CSS file takes precedence.
Unfortunately, this makes it a get a little weird when working with breakpoints because you would assume the smaller breakpoint would take over, but it doesn't because the order of the rules is wrong.
To fix it, I would suggest making sure any mobile-specific rules are lower in the selector's list than their desktop counterparts.
For example, you would need to delete the .sw-mobile-flex-left rule and re-add it to make it print lower in the CSS file than the .sw-tab-flex-right rule.
Apart from that, you should also keep in mind that the flex alignment utility class applied to the div will not work on the rich-text elements as it will have its own HTML tags, so you shouldn't expect a utility class to effect those HTML tags.
Therefore in this scenario, you need to match the rich text alignment with the div flex alignment manually from under the rich text editor.
Typography CSS Utility Classes
Typography utility classes are helpful when you want to control the style of a specific option of typography such as the font color of an element, you can find it under the typography options of the advanced settings within the Oxygen editor.
Note: Sometimes the border-radius utility classes will not work if the inside element overflows the div, therefore, to as a fix you can add a utility class just for overflow hidden which I mentioned under the other utility classes.
Effects CSS Utility Classes
Effects utility classes are great to control a particular effect of an element that you can configure under the effects settings which you can find in the advanced setting tab of Oxygen editor.
Utility Classes for Box Shadow
Box Shadow: sw-box-shadow Box Shadow Alternative: sw-box-shadow-alternative Box Shadow on Hover: sw-box-shadow-hover Box Shadow on Hover Alternative: sw-box-shadow-hover-alternative
Utility Classes for Transition
Transition with Linear Effect: sw-transition-linear Transition with Ease Effect: sw-transition-ease Transition with Ease In Effect: sw-transition-ease-in Transition with Ease Out Effect: sw-transition-ease-out Transition with Ease In & Out Effect: sw-transition-ease-in-out
Other CSS Utility Classes
This section is dedicated to the CSS Utility Classes that you are not going to need every time but they would be handy when you want to use any of them to add some different styles or fix some issues on a particular element.
Utility Classes for Common Fixes
Overflow Hidden: sw-overflow-hidden
Non-Recommended Utility Classes
In this section, I am going to share with you a few CSS Utility Classes that I personally don't recommend using for some specific reasons as I have already shared the better alternatives in the recommended section above.
Background CSS Utility Classes
I have already explained about it earlier in this post that what are the background CSS utility classes and how it can be helpful, but in this section, I am suggesting the utility classes that you might be considering but not recommended to use in my opinion.
Utility Classes for Background Image
It's unsafe to use a background image or pattern as a utility class because it will override the background color even if you use a transparent image and make the background color to transparent for this particular utility class.
I also tried adding an overlay color and large z-index to the background color utility class which I was using along with this background image utility class still no luck for me, but you can personally test it and let me know if that works for you.
Typography CSS Utility Classes
I hope you already have the knowledge about typography utility classes and its benefits but there are certain situations when you don't want to use the below-mentioned typography CSS utility classes.
I personally prefer to control the text alignment in Oxygen either through the parent section or at the div level and that is the reason I don't recommend changing the typography text-align either directly for an element or even as utility classes.
Although I already knew about the utility classes since earlier still I never thought about using them in Oxygen until I watched the video by Elijah Mills which I embedded in the opening section of this post.
However, I have dropped here all the utility classes that I'm personally testing on my development site and I know that not each of them might be perfect for using on the production site in every situation.
Therefore I will keep testing the possibilities and caveats with the CSS utility classes and update (add and/or remove) them in this post whenever I think it's necessary.
Also, I want to give a special thanks to Phe Simmonds from the Oxygen support team for helping me to fix a few unusual CSS conflicts and problems that are crucial to successfully use CSS Utility Classes in Oxygen.
Also if you think something is missing or may need improvement with the utility classes mentioned in this post then feel free to share your feedback in the comment section below.
Thank you very much for spending your precious time reading this post on my website syncwin.com.
Become an Insider to Syncronize with Web-Success.
Subscribe to our newsletter to get insider wisdoms.
Join our community to connect with likeminded folks.
If you are a Web Designer/Developer who loves playing with CSS Animations but don't have enough time to write them from scratch thus looking for some ready-to-use CSS Animation Builders (especially Libraries) then this list post is going to be your final destination.
If you are an Oxygen Builder user and looking for a place to explore all the free and paid add-ons exclusively developed for Oxygen, then you are in the right place as this ultimate resource list post is going to be your final destination.