Utility Classes
Many of the components in AEM have a "classes" tab or field that allow users to add a CSS class to the components underlying code. CSS Classes are a way to quickly add additional styling to HTML elements. The BGSU website has a number of classes developed for usage. These are intended for advanced users and should be used with great care. When utilizing any of these classes it is very important to test and check your page on mobile and/or tablet browsers to ensure things are displaying as intended.
Utility Classes
rounded
rounded2
Centered Images
When using the Image Component, images are always left-aligned. If you'd like to center the image within the container you can utilize two classes to achieve this effect.
It's important to note that if the image is large enough to fill the container, it always do so. If you want the image smaller, you either need to use a smaller image, or use the width field in the image component to change the max-width that it will be displayed at.
d-block mx-auto
Spacing
In AEM, there is spacing built in to all elements and components. However, sometimes it is necessary to introduce other spacing.
Spacing in CSS can be utilized as margin, or padding. Depending on where you are adding this, results can differ and may not be what you expect. These are for advanced users only and any implementation should be thouroughly tested and checked before deployed for expected results.
Our spacing utilities follow the following pattern {spacing-type}{direction}-{value}
Spacing Type: Margin {m}
Margins are used to create space around elements, outside of any defined borders. In our utility class utilized by "m"
Margin Class Examples:
Applied to the gray box.
Margin Top
mt-5
Margin Bottom
mb-5
Margin Start (Left)
ms-5
Margin End (Right)
me-5
Margin X-axis
mx-5
Margin Y-axis
my-5
Margin All Sides
m-5
Margin All Sides - 0 Value
m-0
Spacing Type: Padding {p}
Padding is used to create space around an element's content, inside of any defined borders. In our utility class utilized by "p"
Padding Class Examples:
Since padding direction and values are similiar to margin, we are only providing a few padding examples to understand the differences between margin and padding itself.
Applied to the gray box.
Padding Top
pt-5
Padding Bottom
pb-5
Padding Start (Left)
ps-5
Padding End (Right)
pe-5
The classes are named using the format {property}{sides}-{size}
Where property is one of:
- m - for classes that set margin
- p - for classes that set padding
Where sides is one of:
- t - for classes that set margin-top or padding-top
- b - for classes that set margin-bottom or padding-bottom
- s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
- e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
- x - for classes that set both *-left and *-right
- y - for classes that set both *-top and *-bottom
- blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
- 0 - for classes that eliminate the margin or padding by setting it to 0
- 4 - a larger spacing amount then what is provided by default
- 5 - the largest available spacing amount.
- auto - for classes that set the margin to auto
The BGSU website relies on the Bootstrap CSS framework, and as such supports many of the out-of-the-box Bootstrap utility classes. The classes provided here are in-fact bootstrap utility classes. We will not be covering these in detail, or why some may fail to produce expected results within AEM.
Reverse Columns on Mobile
When using a Column Control component by default, column stack left-to-right on mobile into a singular column. Sometimes, it's beneficial for the user-experience to stack columns right-to-left on mobile. This utility class, applied directly to the column-control component allows you to do that.
To preview this effect, resize your browser window until content stacks into one column.
reverse-column
Example Content
Updated: 05/15/2023 11:55AM