Generic selectors
Exact matches only
Search in title
Search in content
Filter by Categories
Advanced Scripts
Amazon SES
Amazon Web Services
BasePress
Blocksy Theme
Brand Building
Bricks Builder
BunnyShell
Cloudflare
CSS
Digital Marketing
Elementor
Email Marketing
Entrepreneurship
FilterWP
Fluent CRM
Fluent Forms
Fluent SMTP
GoDaddy
Google Fonts
Gutenberg
HTML
Hydrogen Pack
JavaScript
Jetpack
Kadence Theme
LiveCanvas
Meta Box
Online Business
Oxygen Builder
OxyMade
PHP
Piotnet Forms
Pods
SaaS
Scripts Organizer
Search Engine Optimization
Social Media Marketing
Swiss Knife
Web Design
Web Development
Web Strategy
WooCommerce
WooFunnels
WordPress
Work From Home
Zion Builder

CSS Utility Class Framework for Web Design

Written by:
Mohammed Wasim Akram
First Published on:
October 2, 2020
Last Updated on:
July 7, 2021
✼ 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.

Feel free to explore our Legal Policy Pages.

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.

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.

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

Utility Classes for Margin

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 CSS Utility Classes

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.

Utility Classes for Headings

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

Utility Classes for Text Transform

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

Utility Classes for Font Colors

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

Utility Classes for Font Size

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

Borders CSS Utility Classes

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.

Utility Classes for Border Radius

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, 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.

Text Align

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.

Conclusion

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.

email Newsletter
Facebook Group
Subscribe to our newsletter to get insider wisdoms.
Join our community to connect with likeminded folks.
Join FB Group

Related Resource Posts

May 21, 2021
Powerful CSS Animation Generators [The Ultimate List]

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.

Read More
August 30, 2020
Ultimate List of Oxygen Builder Addons [Free & Paid]

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.

Read More

Leave Your Feedback

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Blog Categories

Favorite Products

Top menu-circlecross-circlechevron-down-circle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram