Design &
Pattern Library
THEME GUIDE
TYPOGRAPHY
/* Font Classes */
.roboto { font-family: 'Roboto', sans-serif!important; }
.roboto-condensed { font-family: 'Roboto Condensed', sans-serif!important; }
/* Font Weight Helper Classes */
.fw-300 { font-weight: 300; }
.fw-400,
.fw-400i {
font-weight: 400;
}
.fw-700{ font-weight: 700; }
.fw-800 {
font-weight: 800;
/* Letter Spacing Helper Classes */
.ls-1 { letter-spacing: 1px; }SPACING
/* --------------------------------------------------------------------------
## Layout
CSS Grid, Flexbox
-------------------------------------------------------------------------- */
/* Size Variables */
:root {
--spacer-sm: 1em;
--spacer-med: 2em;
--spacer-lg: 3em;
--spacer-xl: 4em;
--spacer-xxl: 5em;
}
.alignfull { max-width: 100%!important; }
.pb-small { padding-bottom: .25em; }
.mb-small { margin-bottom: .25em; }
/* Spacing */
.m-auto { margin: auto!important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacer-sm)!important; }
.mt-2 { margin-top: var(--spacer-med)!important; }
.mt-3 { margin-top: var(--spacer-lg)!important; }
.mt-4 { margin-top: var(--spacer-xl)!important; }
.mt-5 { margin-top: var(--spacer-xxl)!important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: var(--spacer-sm)!important; }
.mr-2 { margin-right: var(--spacer-med)!important; }
.mr-3 { margin-right: var(--spacer-lg)!important; }
.mr-4 { margin-right: var(--spacer-xl)!important; }
.mb-0 { margin-bottom: 0!important; }
.mb-1 { margin-bottom: var(--spacer-sm)!important; }
.mb-2 { margin-bottom: var(--spacer-med)!important; }
.mb-3 { margin-bottom: var(--spacer-lg)!important; }
.mb-4 { margin-bottom: var(--spacer-xl)!important; }
.mb-5 { margin-bottom: var(--spacer-xxl)!important; }
.ml-0 { margin-left: 0!important; }
.ml-1 { margin-left: var(--spacer-sm)!important; }
.ml-2 { margin-left: var(--spacer-med)!important; }
.ml-3 { margin-left: var(--spacer-lg)!important; }
.ml-4 { margin-left: var(--spacer-xl)!important; }
.p-all-0 { padding: 0!important; }
.p-all-1 { padding: var(--spacer-sm)!important; }
.p-all-2 { padding: var(--spacer-med)!important; }
.p-all-3 { padding: var(--spacer-lg)!important; }
.p-all-4 { padding: var(--spacer-xl)!important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: var(--spacer-sm)!important; }
.pt-2 { padding-top: var(--spacer-med)!important; }
.pt-3 { padding-top: var(--spacer-lg)!important; }
.pt-4 { padding-top: var(--spacer-xl)!important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: var(--spacer-sm)!important; }
.pr-2 { padding-right: var(--spacer-med)!important; }
.pr-3 { padding-right: var(--spacer-lg)!important; }
.pr-4 { padding-right: var(--spacer-xl)!important; }
.pb-0 { padding-bottom: 0!important; }
.pb-1 { padding-bottom: var(--spacer-sm)!important; }
.pb-2 { padding-bottom: var(--spacer-med)!important; }
.pb-3 { padding-bottom: var(--spacer-lg)!important; }
.pb-4 { padding-bottom: var(--spacer-xl)!important; }
.pl-0 { padding-left: 0!important; }
.pl-1 { padding-left: var(--spacer-sm)!important; }
.pl-2 { padding-left: var(--spacer-med)!important; }
.pl-3 { padding-left: var(--spacer-lg)!important; }
.pl-4 { padding-left: var(--spacer-xl)!important; }
/* Grid Gap */
.gg-0 { grid-gap: 0!important; }
.gg-small { grid-gap: 2em!important; }
.gg-medium { grid-gap: 4em!important; }
.g-large { grid-gap: 5em!important; }BORDER
/* Border Helper Classes */
.border { border: 1px solid var(--border-color-light)!important; }
.bt { border-top: 1px solid var(--border-color-light)!important; }
.br { border-right: 1px solid var(--border-color-light)!important; }
.bb { border-bottom: 1px solid var(--border-color-light)!important; padding-bottom: .5em!important; }
.bl { border-left: 1px solid var(--border-color-light)!important; }
.b-0 { border: 0 !important; }
.bt-0 { border-top: 0 !important; }
.br-0 { border-right: 0 !important; }
.bb-0 { border-bottom: 0 !important; }
.bl-0 { border-left: 0 !important; }
.bt-small { border-top: 2px solid var(--border-color-light)!important; }
.br-small { border-right: 2px solid var(--border-color-light)!important; }
.bb-small { border-bottom: 2px solid var(--border-color-light)!important; }
.bl-small { border-left: 2px solid var(--border-color-light)!important; }
.bt-medium { border-top: 5px solid var(--border-color-light)!important; }
.br-medium { border-right: 5px solid var(--border-color-light)!important; }
.bb-medium { border-bottom: 5px solid var(--border-color-light)!important; }
.bl-medium { border-left: 5px solid var(--border-color-light)!important; }
.bt-large { border-top: 10px solid var(--border-color-light)!important; }
.br-large { border-right: 10px solid var(--border-color-light)!important; }
.bb-large { border-bottom: 10px solid var(--border-color-light)!important; }
.bl-large { border-left: 10px solid var(--border-color-light)!important; }
.border-color-dark { border-color: var(--border-color-dark)!important; }
.border-accent-color { border-color: var(--color-accent)!important; }
.border-accent-light { border-color: var(--color-accent)!important; }
.border-accent-dark { border-color: var(--color-accent-dark)!important; }ANIMATIONS
/* Animate Scale */
.animate-scale { overflow: hidden; }
.animate-scale img { backface-visibility: hidden;
transition: all .35s;
transform: scale(1);
}
.animate-scale:hover img {
transform: scale(1.0125);
opacity: .9;
}