Main Content

CSS Classes

The parent theme comes with CSS helper classes for your child theme. We encourage developers to take advantage of these classes.

Margin


/* Margin bottom */
.tcu-below6  { margin-bottom: 0.375em !important; }   /* 6px */
.tcu-below12 { margin-bottom: 0.75em !important;  }   /* 12px */
.tcu-below16 { margin-bottom: 1em !important;     }   /* 16px */
.tcu-below18 { margin-bottom: 1.125em !important; }   /* 18px */
.tcu-below24 { margin-bottom: 1.5em !important;   }   /* 24px */
.tcu-below30 { margin-bottom: 1.875em !important; }   /* 30px */
.tcu-below36 { margin-bottom: 2.25em !important;  }   /* 36px */
.tcu-below48 { margin-bottom: 3em !important;     }   /* 48px */

/* Margin top */
.tcu-top6  { margin-top: 0.375em !important; }   /* 6px */
.tcu-top12 { margin-top: 0.75em !important;  }   /* 12px */
.tcu-top16 { margin-top: 1em !important;     }   /* 16px */
.tcu-top18 { margin-top: 1.125em !important; }   /* 18px */
.tcu-top24 { margin-top: 1.5em !important;   }   /* 24px */
.tcu-top30 { margin-top: 1.875em !important; }   /* 30px */
.tcu-top36 { margin-top: 2.25em !important;  }   /* 36px */
.tcu-top48 { margin-top: 3em !important;     }   /* 48px */

/* Remove Margin */
.tcu-mar-t0  { margin-top: 0 !important;    }
.tcu-mar-b0  { margin-bottom: 0 !important; }
.tcu-mar-l0  { margin-left: 0 !important;   }
.tcu-mar-r0  { margin-right: 0 !important;  }
.tcu-mar-tb0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.tcu-mar-lr0 { margin-left: 0 !important; margin-right: 0 !important; }

Padding


/* Remove Padding */
.tcu-pad-t0  { padding-top: 0 !important;    }
.tcu-pad-b0  { padding-bottom: 0 !important; }
.tcu-pad-r0  { padding-right: 0 !important;  }
.tcu-pad-l0  { padding-left: 0 !important;   }
.tcu-pad-tb0 { padding-bottom: 0 !important; padding-top: 0 !important; }
.tcu-pad-lr0 { padding-right: 0 !important; padding-left: 0 !important; }

Text Alignment


/* Text alignment */
.tcu-alignl { text-align: left !important;   }
.tcu-alignr { text-align: right !important;  }
.tcu-alignc { text-align: center !important; }

Text Transform


/* Text transform */
.tcu-lowercase { text-transform: lowercase !important; }
.tcu-uppercase { text-transform: uppercase !important; }
.tcu-small     { font-size: $font-small  } /* 11px */

Typography


.tcu-moonface { font-family: 'moonface_scriptbold' !important; }
.tcu-eurostile { font-family: 'eurostileregular' !important; }
.tcu-cabin { font-family: 'Cabin' !important; }
.tcu-arvo { font-family: 'Arvo', serif !important; }

Visually Hidden


/* Visiually Hidden but accessible */
.tcu-visuallyhidden {}