APEX 24.2 was delayed a little bit but is finally out. Prominent features are AI integration enhancements, JSON Duality and JSON source support, Workflow and Template Component enhancements, and much more. Another enhancement that caught my attention (as I actually asked for the enhancements) is the new CSS utility classes for Universal Theme, the design system that powers how APEX looks.

We presented these changes next to others in our United Codes, Live webinar.

TL;DR

• New typography classes for font-sizes, -weights, -families, and text-colors
• New shadow classes
• New responsive order classes for Flexbox regions

Why should you care?

If you are a citizen-type developer who sticks to the low-code fundamentals of Oracle APEX, you probably don’t have a use case for this. But if you put any text on pages, the typography classes should already interest you. If you put HTML anywhere (templates, template components, report columns, etc.), you can make use of the utility CSS classes to add native styling quickly.

Definitely avoid custom CSS styles as much as possible. The CSS utility classes apply the Universal Theme design standards (including your modifications from the theme roller), making your content look APEX native. Otherwise, using different types of shadows, text styles, e will eventually make your app look inconsistent.

Typography classes

The typography classes let you define how text looks in your APEX application.

Headings and content

First off, APEX 24.2 added CSS classes for different levels for headings, subheadings and body text content. The classes modify the font size, boldness and line height of the text.

Headings:

• u-text-heading-2xl
• u-text-heading-xl
• u-text-heading-lg
• u-text-heading-md
• u-text-heading-sm
• u-text-heading-xs

Subheadings:

• u-text-subheading-2xl
• u-text-subheading-xl
• u-text-subheading-lg
• u-text-subheading-md
• u-text-subheading-sm
• u-text-subheading-xs

Body:

• u-text-body-xl
• u-text-body-lg
• u-text-body-md
• u-text-body-sm
• u-text-body-xs

Here you can see all these styles in action. Note that all styles also come with an alias:

Font family

Next up, you can also switch between different font families with the classes “u-text-serif”, “u-text-sansserif” and “u-text-mono”. You can easily distinguish headings by switching to a serif font or style code with a monospaced font.

Font weight

The bold class already existed before but now has more variations to set the font weight of text. I like to use “u-text-light” for secondary/tertiary information, as our brain is used to the bolder text being more important.

• u-text-ultralight
• u-text-light
• u-text-normal
• u-text-semibold
• u-text-bold
• u-text-heavy

Text color

In the theme roller you can configure default text, title and subtitle colors. Per default all three of these are just black, but the fourth option “u-text-muted-color” is dark-grayish.

• u-text-default-color
• u-text-title-color
• u-text-subtitle-color
• u-text-muted-color

You can also see all of these styles in action in the APEX Template Studio.

Responsive order

This one is a bit more complicated but more powerful. If you haven’t yet, you should learn about CSS's flex and grid display modes. They come with handy and powerful subrules that make designing simple and complex but modern layouts a breeze. 

One of these subrules is order. It allows you to switch the order of flex or grid child elements with CSS (instead of changing it in the HTML). This is super powerful for responsive design. Take the following example where the sidebar is next to the list on the right for desktop devices. For mobile devices it jumps before the list.

In the background, there is just a CSS rule in place that sets the order of the sidebar to one lower than the one of the list on small screens. When this is the case, the browser magically changes the positions of both.

The classes are available for 7 different screen widths. For each, you can define the order from 0 to 5.

• u-order-xxs-[0-5]
• u-order-xs-[0-5]
• u-order-sm-[0-5]
• u-order-md-[0-5]
• u-order-lg-[0-5]
• u-order-xl-[0-5]
• u-order-xxl-[0-5]

Note that the screen width groups are defined with both an upper and lower bound. 

In TailwindCSS, for example, if you use a rule for “md,” you have your normal (unresponsive) rule applied for all sizes below md, and then the md rule is taken for all sizes above md if you don’t override them. In APEX, on the other hand, the md rule will not apply to widths larger than md. So if you don’t define lg, xl, and xxl, the md rule will fall back to the default non-responsive style on any screen larger than md. I prefer the Tailwind behavior.

If you want to see an example with flex and the responsive order in place, check out this example from the APEX Template Studio.

Shadow classes

You can now add (or cancel) APEX native shadows to your elements.

• u-shadow-none
• u-shadow-sm
• u-shadow-md
• u-shadow-lg

CSS Variables

Many of these styles were already part of Universal Theme but not available as CSS classes yet. This means that they were already available as CSS variables. E.g.:

• Shadow: var(--ut-shadow-sm)
• Typography: var(--ut-component-text-muted-color)

I also like to have them as classes, as it makes it easier to style things directly without having to create a CSS file or place something inside the page styles, which then loses the connection to the place where you actually implement it.

The CSS variables are still valuable to know if you create plug-ins or want to modify the default style of Universal Theme safely. Check out our YouTube video or blog post on CSS variables if you are interested.

Conclusion

APEX 24.2 adds many useful new CSS classes. I especially like the typography classes, as they allow me to design text purely from HTML. These additions transform Universal Theme into an even more comprehensive design system that balances flexibility and out-of-the-box consistency.