Custom Utilities

Overview

We've added a few custom utilities to the theme. Wherever Bootstrap allows for customization of its classes we've made adjustments in the styles.scss file. For other custom classes see the _custom-utilities.scss file.

Bootstrap Spacing

We've added to the list of spacers available within the Bootstrap framework. In addition to the 1 through 5 spacing utitlies, we have spacing as follows:

  • 6 - (by default) for classes that set the margin or padding to $spacer * 4.5
  • 7 - (by default) for classes that set the margin or padding to $spacer * 6
  • 8 - (by default) for classes that set the margin or padding to $spacer * 7.5
  • 9 - (by default) for classes that set the margin or padding to $spacer * 9
Bootstrap Widths

We've added to the list of sizing classes in Bootstrap. In addition to the classes such as w-25 that adds a width: 25%; style, we have widths as follows:

  • w-10 Width 10%
  • w-20 Width 20%
  • w-30 Width 30%
  • w-40 Width 40%
  • w-60 Width 60%
  • w-70 Width 70%
  • w-80 Width 80%
  • w-90 Width 90%
Theme Utilities

Below is a table with the various Good Vibrations theme original utilities.

Class Name Description Options
.letter-spacing-* Used for letter-spacing in rem units
  • .letter-spacing-neg-0125
  • .letter-spacing-005
  • .letter-spacing-01
  • .letter-spacing-012
.lh-* Used for line-height styling
  • .lh-085
  • .lh-1
  • .lh-2
.font-weight-200 Used for a font-weight: 200; style
  • .font-weight-200
.text-* Used for font-size styling in rem units
  • .text-10
  • .text-12
  • .text-14
  • .text-18
  • .text-20
  • .text-24
  • .text-30
  • .text-72
  • .text-130
.z-* Used for z-index styling
  • .z-10
  • .z-20
  • .z-30
  • .z-40
.box-shadow-* Used for box-shadow styling
  • .box-shadow-brand-primary
  • .box-shadow-brand-dark-gray
  • .box-shadow-subtle
  • .box-shadow-inset
.stroke-w-* Used for stroke-width styling
  • .stroke-w-1
  • .stroke-w-1-half
  • .stroke-w-2
  • .stroke-w-3
.feather-icon-* Used for width and height styling of feather icons
  • .feather-icon-12
  • .feather-icon-14
  • .feather-icon-16
  • .feather-icon-18
  • .feather-icon-20
  • .feather-icon-30
  • .feather-icon-32
.w-fit-content Used for width: fit-content; styling
  • .w-fit-content
.min-height-95vh Used for min-height: 95vh; styling
  • .min-height-95vh