Oxygen + Bricks Framework Global Utility Classes

By
Fabrizio Van Marciano

Welcome back. This post outlines a selection of our global utility classes. I created these so you can use them with either Oxygen or Bricks Builder.

Using what is known as utility or pre-defined classes, especially when working with visual builders, can help speed up your workflow and help you acquire consistency in your design projects. Below I’ve grouped some classes you might want to use for your projects. These are optional and you do not have to use them, but hopefully, it will save you some time.

To use these, create a new stylesheet or code snippet called ‘Utilities’ using something like WPCodeBox. Then copy and paste the CSS below.

Video

No video is available for this tutorial, however, please check the following videos for implementing our global classes for the builder you are using –

  1. How to use the Utility Classes in Bricks Builder
  2. How to use the Utility Classes in Oxygen Builder

Typography

Copy and paste the code snippet below into a new CSS snippet called Utilities.

/* Typography Reference -- DO NOT COPY THIS PART
------
.heading__lgt1 -- heading white
.heading__lgt2 -- heading light variant
.heading__drk1 -- heading black
.heading__drk2 -- heading dark variant

.bd-txt__lgt1 -- body text light
.bd-txt__lgt2 -- body text light variant
.bd-txt__drk1 -- body text dark
.bd-txt__drk2 -- body text dark variant

Body font sizes

.fs__sm -- font size small
.fs__nm -- font size normal
.fs__lg -- font size large
------*/

/* Typography CSS -- COPY & PASTE BELOW
------*/
.heading__lgt1 {color: #fff;}
.heading__lgt2 {color: #808080;}
.heading__drk1 {color: #000;}
.heading__drk2 {color: #808080;}

.txt__lgt1 {color: #fff;}
.txt__lgt2 {color: #808080;}
.txt__drk1 {color: #000;}
.txt__drk2 {color: #808080;}

/* Body font size -- OPTIONAL (OR VIEW OUR FLUID RESPONSIVE TYPOGRAPHY TUTORIAL)
------*/
.fs__sm {font-size: 1.4rem;}
.fs__nm {font-size: 1.8rem;}
.fs__lg {font-size: 2.2rem;}

Spacing

Below are pre-defined padding and margin properties. The gap property can be used for grid and flexbox layouts and is supported by most modern web browsers.

/* SPACING CSS -- COPY AND PASTE BELOW
------*/

/* ALL AROUND PADDING
------*/
.pd__xsm {padding: 1.6rem;}
.pd__sm {padding: 2rem;}
.pd__med {padding: 2.4rem;}
.pd__lg {padding: 2.8rem;}
.pd__xlg {padding: 3.2rem;}
.pd__xxlg {padding: 3.6rem;}

/* PADDING INDIVIDUAL -- X-SMALL
------*/
.pd__t-xsm {padding-top: 1.6rem;}
.pd__r-xsm {padding-right: 1.6rem;}
.pd__b-xsm {padding-bottom: 1.6rem;}
.pd__l-xsm {padding-left: 1.6rem;}

/* PADDING INDIVIDUAL -- SMALL
------*/
.pd__t-sm {padding-top: 2rem;}
.pd__r-sm {padding-right: 2rem;}
.pd__b-sm {padding-bottom: 2rem;}
.pd__l-sm {padding-left: 2rem;}

/* PADDING INDIVIDUAL -- MEDIUM
------*/
.pd__t-med {padding-top: 2.4rem;}
.pd__r-med {padding-right: 2.4rem;}
.pd__b-med {padding-bottom: 2.4rem;}
.pd__l-med {padding-left: 2.4rem;}

/* PADDING INDIVIDUAL -- LARGE
------*/
.pd__t-lg {padding-top: 2.8rem;}
.pd__r-lg {padding-right: 2.8rem;}
.pd__b-lg {padding-bottom: 2.8rem;}
.pd__l-lg {padding-left: 2.8rem;}

/* PADDING INDIVIDUAL -- X-LARGE
------*/
.pd__t-xlg {padding-top: 3.2rem;}
.pd__r-xlg {padding-right: 3.2rem;}
.pd__b-xlg {padding-bottom: 3.2rem;}
.pd__l-xlg {padding-left: 3.2rem;}

/* PADDING INDIVIDUAL -- XX-LARGE
------*/
.pd__t-xxlg {padding-top: 3.6rem;}
.pd__r-xxlg {padding-right: 3.6rem;}
.pd__b-xxlg {padding-bottom: 3.6rem;}
.pd__l-xxlg {padding-left: 3.6rem;}

/* ALL AROUND MARGIN
------*/
.mg__xsm {margin: 1.6rem;}
.mg__sm {margin: 2rem;}
.mg__med {margin: 2.4rem;}
.mg__lg {margin: 2.8rem;}
.mg__xlg {margin: 3.2rem;}
.mg__xxlg {margin: 3.6rem;}

/* MARGIN INDIVIDUAL -- X-SMALL
------*/
.mg__t-xsm {margin-top: 1.6rem;}
.mg__r-xsm {margin-right: 1.6rem;}
.mg__b-xsm {margin-bottom: 1.6rem;}
.mg__l-xsm {margin-left: 1.6rem;}

/* MARGIN INDIVIDUAL -- SMALL
------*/
.mg__t-sm {margin-top: 2rem;}
.mg__r-sm {margin-right: 2rem;}
.mg__b-sm {margin-bottom: 2rem;}
.mg__l-sm {margin-left: 2rem;}

/* MARGIN INDIVIDUAL -- MEDIUM
------*/
.mg__t-med {margin-top: 2.4rem;}
.mg__r-med {margin-right: 2.4rem;}
.mg__b-med {margin-bottom: 2.4rem;}
.mg__l-med {margin-left: 2.4rem;}

/* MARGIN INDIVIDUAL -- LARGE
------*/
.mg__t-lg {margin-top: 2.8rem;}
.mg__r-lg {margin-right: 2.8rem;}
.mg__b-lg {margin-bottom: 2.8rem;}
.mg__l-lg {margin-left: 2.8rem;}

/* MARGIN INDIVIDUAL -- X-LARGE
------*/
.mg__t-xlg {margin-top: 3.2rem;}
.mg__r-xlg {margin-right: 3.2rem;}
.mg__b-xlg {margin-bottom: 3.2rem;}
.mg__l-xlg {margin-left: 3.2rem;}

/* ROW GAP
------*/
.gap-r__xsm {row-gap: 1.6rem;}
.gap-r__sm {row-gap: 2rem;}
.gap-r__med {row-gap: 2.4rem;}
.gap-r__lg {row-gap: 2.8rem;}
.gap-r__xlg {row-gap: 3.2rem;}
.gap-r__xxlg {row-gap: 3.6rem;}

/* COLLUMN GAP
------*/
.gap-c__xsm {column-gap: 1.6rem;}
.gap-c__sm {column-gap: 2rem;}
.gap-c__med {column-gap: 2.4rem;}
.gap-c__lg {column-gap: 2.8rem;}
.gap-c__xlg {column-gap: 3.2rem;}
.gap-c__xxlg {row-gap: 3.6rem;}

/* WIDTHS
------*/
.width__full {width: 100%;}
.width__half {width: 50%;}

@media only screen and (max-width: 768px) {
    .width__half {
        width: 100%;
    }
}

Layouts

/* SIMPLE RESPONSIVE GRIDS -- STYLE IN BUILDER
------*/
.grid__2col { /* 2 column grid */ }
.grid__3col { /* 3 column grid */ }
.grid__4col { /* 4 column grid */ }
.grid__5col { /* 5 column grid */ }
.grid__3-1col { /* 3/1 column grid */ }

/* CONTAINERS -- STYLE IN BUILDER
------*/
.container { /* width 100% */ }

Effects (Optional)

Here are some class names you can pre-style yourself for adding effects.

/* Box shadows --  style in builder
------*/
.box__sh1 { /* box shadow */ }
.box__sh2 { /* box shadow on hover */ }

Additional utility classes (Optional)

These are classes you may want to add and style depending on the scope of your project

/* Background shades -- style in builder
------*/
.bg-sh__drk { /* background dark shade */ }
.bg-sh__lgt { /* background light shade */ }
Go straight to the main video