Utility Classes

Introduction

Gantry 5 has a ton of useful utilities baked into its core. Among them are its assortment of utility classes that make it easy to quickly set up elements and have them appear how you want and when you want them to.

Responsive Utility Classes

These classes are used to hide and make visible various blocks depending on the size of the browser window used to view the page. This makes possible for you to create a seamless, yet optimized experience for a variety of devices from mobile to large desktops.

You can set the breakpoints for these classes in the Styles administrative panel. Just navigate to the bottom of the administrative panel and look for the Configuration Styles section.

As an example, let's say you have a block that you want to appear only on desktop devices. You would enter visible-desktop in the CSS Class field of the block settings for the block.

This doesn't just affect blocks, either. You can do in-line applications such as <span class="hidden-phone">The</span> Great Gatsby to have the word "The" only appear on devices other than phones.

Padding and Margin Adjustments

This set of utility classes give you the ability to adjust the padding and margin settings for the element. They're pretty straightforward, and we have broken them down in the table below.

Utility Variations

Variations are an easy way to adjust how content is seen in the front end. These are accessible directly through the Block settings when working with a particle, position, or menu item. Instead of being added from the admin via a CSS class field, they are accessible via a drop-down menu called Variations.

Variations act as friendly preset classes, ready to be deployed wherever you need. Below is a list of variations available by default with Gantry 5.