Utility Classes in CSS from UIKIT or Bootstrap

Not all templates use the same framework or provide for the same level of customisation, and while I like to use a certain template / pagebuilder to do the job of styling and shaping websites I create, not all developers go down the same route.

My job means I don’t always get to start the project I’m working on. Sometimes I get asked to fix a problem or make changes where the first developer is no longer involved or a choice has been made at the start of the project. So when I begin a job like that it may mean I have to familiarise myself with the framework and setup that was used to build the website.

In Joomla the main frontend frameworks I generally end up working on use Gantry, Bootstrap or UIKit. And if you look at the templates and how pages are structured they use similar but slightly different CSS classes to create their layouts. ie creating columns, or spacing, using flex, etc.

What they have in common is that they have well-documented utilities that are built-in to the framework. These classes, when applied can have the effect of much more involved styling which has already been included in the library of styles that comes with the framework.

Once we get past the initial HTML structure of a site, using semantic markup to position navigation, header and footer areas, asides, etc, how they behave can all be determined by utility classes added to elements. This can control alignment, spacing of content, show / hide functionality and more.

Some Examples

Padding / Margins / Spacing

Margins and padding can easily be added to elements directly. For example an image that needs more space around it. UIKit provides different size margins from .uk-margin to .uk-margin-xlarge

If I am using YooTheme then margin sizes can be managed via Styles >Margins.

Using Bootstrap I could add class=”my-3” which would put a margin top and bottom of my element, giving me 1rem of margin. This is based on the single $spacer value being set to 0.333rem

Classes for padding would begin with a p and similarly can be applied to one side or both, horizontally or vertically with varying sizes ie .px-2 applied to an image element would give it padding of ($spacer * .5)

While Gantry provides utilities for padding and margins it is about removing them, ie nomarginall would remove all margins around a template element. nopaddingtop, removes the padding just at the top.

Show / hide

For websites with banner images that extend to the edge of the browser, this view doesn’t always translate well on mobile. The depth of the image is reduced. For some sites we replace the 16:9-ish ratio image with a square alternative.

Using UIKit I can easily show / hide elements. For example in YooTheme I add the following to the classes option in the Section.

uk-visible@m to show an item on desktop

uk-hidden@m to show an item on mobile

Where “m” is the breakpoint, ie a style may get triggered at or above the “m” value which may be 1200 pixels wide.

This small utility class removes the need to create a separate media query in a custom stylesheet.

In Bootstrap I could do the same using d-lg-block which hides elements smaller than “lg”. “d” meaning display.

In Gantry, the longhand version for this is visible-large which achieves the same result. Conversely visible-phone shows an element only on a phone device.

Each option relies on breakpoints set in Style Global, for YooTheme, or Styles Configuration in Gantry.

Bootstrap has 6 standard breakpoints ranging from X-Small to “Extra extra large” which is a screen size >= 1400 pixels.

Border radius

Some cosmetic changes can be made using .uk-border-circle in UIKit to change the border radius on an image, for example. This equates to .rounded-circle in Bootstrap. In Bootstrap you can also create rounding at one end with several values for the radius.

Gantry doesn’t have this option in its Utilities.

Box shadow

I might want a flat box to lift out of the screen slightly and for that I could use .uk-box-shadow-small in UIKit which saves some effort in my stylesheet. A slightly more involved option in Bootstrap would be "shadow-sm p-3 mb-5 bg-body rounded"

Can’t I Just Do This In A Custom Stylesheet?

Sure, you can hand-code everything, including your own template, but for lots of people having css options already baked and ready to go makes for quicker implementation of changes, whether it’s spacing, responsiveness or cosmetic alterations. All the functionality is there so you don’t have to go to great lengths to add custom styles.

This article was actually inspired by comments I saw to do with the new nested CSS functionality. One commenter had said they would never need to know CSS rules because all their styling was set via Tailwind CSS. Well if that’s what you’re used to, knowing these utility classes will fit right in with your way of working. For me it’s the shorthand that allows me to work quickly, with the knowledge of how the styles work in the background.

Resources

There’s plenty of other utilities in UIKit that you can find in their documentation. For Bootstrap, see the Utilities section on the website. Gantry has a Utility Classes section in its documentation mostly related to spacing and show / hide functionality.