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 {}