The Total WordPress theme has been developed over the years with speed and customizability in mind. The theme’s custom CSS Framework is one of the features that helps keep the theme optimized and modular.
The CSS Framework is a set of utility classnames that can be used to apply the same CSS properties to multiple elements to prevent having to re-write the same CSS over and over again.
For example, many elements in the theme are set to display as flex elements, so rather then writing display: flex; over and over again in the theme’s style.css file we can simply add the classname wpex-flex to any flex box element.
The theme includes hundreds, if not thousands, of utility classes that are not only used by the theme but can also be used in your custom code and builder elements. Click the button below to access the CSS Framework documentation to view all available classnames.
It is very important that you never modify the values of the theme’s utility classes with custom CSS. If you do this you will break many aspects of the theme. Every element in the theme also has unique classnames which you should be targeting instead.
Unique classnames are always added at the front of the element’s class attribute (these you can target with custom CSS) and all utility classes are prefixed with wpex- (do not ever modify those).