Toolonomy Logo

CSS Utility Class Framework for Web Design

Authored by: Mohammed Wasim Akram
Last Updated on: March 21, 2022

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.

A Google & HubSpot Certified Digital Marketing Specialist, Self-Taught WordPress Expert, Useful BizDev (Business Development) Tools & Deals Explorer, and the Founder of SyncWin & Toolonomy.

Leave a Comment

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Become a Toolonomy Community Member for Free!

Consider joining our Official Community Group if you want to get access to the exclusive insider content and information around the Exclusive Business Development Tools. Also, you will be able to get involved in interesting group discussions with like-minded people that are interested in similar topics as you.
Free Membership
Made with ❤ for Digital Entrepreneurs
Copyright © 2018 - 2022 SyncWin | All Rights Reserved.
Top crossmenu