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 potential 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.
Source: CSS in Real Life
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.
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 in 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 them everywhere, which is a lifesaver if you are building a complex website with a large number of templates and pages.
In the below sections I have shared all the CSS utility classes that I prefer and have personally tested on my development site as well as on a new client’s website where I am working currently.
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.
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 utility classes are dedicated to globally controlling the style of any specific element and it falls under the size and spacing settings within the advanced settings of Oxygen editor.
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
Wider Bottom Margin: sw-margin-bottom-wider
Wide Bottom Margin: sw-margin-bottom-wide
Medium Bottom Margin: sw-margin-bottom-medium
Narrow Bottom Margin: sw-margin-bottom-narrow
Narrower Bottom Margin: sw-margin-bottom-narrower
Layout utility classes will help you control the style of any particular layout option of an Oxygen element that falls under the layout settings within the advanced settings of the Oxygen editor.
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 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 affect 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 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.
H1 Heading: sw-h1-heading
H2 Heading: sw-h2-heading
H3 Heading: sw-h3-heading
H4 Heading: sw-h4-heading
H5 Heading: sw-h5-heading
H6 Heading: sw-h6-heading
Capitalize Font: sw-text-transform-capitalize
Uppercase Font: sw-text-transform-uppercase
Lowercase Font: sw-text-transform-lowercase
None (as it is) Font: sw-text-transform-none
Light Font Color: sw-font-color-light
Dark Font Color: sw-font-color-dark
Gradient Font Color: sw-font-color-gradient
Light Font Color on Hover: sw-font-color-light-hover
Dark Font Color on Hover: sw-font-color-dark-hover
Gradient Font Color on Hover: sw-font-color-gradient-hover
Wider Font Size: sw-font-size-wider
Wide Font Size: sw-font-size-wide
Medium Font Size: sw-font-size-medium
Narrow Font Size: sw-font-size-narrow
Narrower Font Size: sw-font-size-narrower
Border utility classes are exclusive classes that allow styling a specific border option of an element and it falls under that borders settings within the Oxygen advanced settings.
Wider Border Radius: sw-border-radius-wider
Wide Border Radius: sw-border-radius-wide
Medium Border Radius: sw-border-radius-medium
Narrow Border Radius: sw-border-radius-narrow
Narrower Border Radius: sw-border-radius-narrower
Note: Sometimes the border-radius utility classes will not work if the inside element overflows the div, therefore, as a fix you can add a utility class just for overflow hidden which I mentioned under the other 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.
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
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
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.
Overflow Hidden: sw-overflow-hidden
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.
I have already explained about it earlier in this post what are the background CSS utility classes and how they 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.
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.
I hope you already have the knowledge about typography utility classes and their 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 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 use 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 using 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 for visiting syncwin.com!
