Css utilities
Utility classes are provided as convenient way of styling your content directly on html elements.
Example:
This paragraph have padding of 2rem, bold & centered text and yellow background.
<p class="-p-4 -text-bold -text-center -bg-yellow">
This paragraph have padding of 2rem,
bold & centered text and yellow background.
</p>
Types of foliodot CSS utilities:
CSS utility class name starts with a single dash -.
This way you can easily distinguish utility classes in your html document from the rest of foliodot css classes.
Feel free to extend/modify classes to match your needs.
Spacing Link
/*
SPACING
Convention:
[1] [2] [3] [4]
.[breakpoint]-[property]-[value] {property : value;}
Legend:
[1] breakpoint prefix
= without prefix, apply to all
-sm = small
-md = medium
-lg = large
[2] Property characters
m = margin
p = padding
l = left
r = right
t = top
b = bottom
h = horizontal
v = vertical
n = negative
c = children
[3] Value
From 1 to 7
[4] CSS
Example:
.-cmh-3 = apply horizontal margin (3) to all children
.-md-cmh-3 = apply horizontal margin (3) to all children
*/
/* margin */
.-m-auto {margin: auto;}
.-m-0 {margin: 0;}
.-m-1 {margin: .25rem;}
.-m-2 {margin: .5rem;}
.-m-3 {margin: 1rem;}
.-m-4 {margin: 2rem;}
.-m-5 {margin: 3rem;}
.-m-6 {margin: 4rem;}
.-m-7 {margin: 5rem;}
/* margin left */
.-ml-auto {margin-left: auto;}
.-ml-0 {margin-left: 0;}
.-ml-1 {margin-left: .25rem;}
.-ml-2 {margin-left: .5rem;}
.-ml-3 {margin-left: 1rem;}
.-ml-4 {margin-left: 2rem;}
.-ml-5 {margin-left: 3rem;}
.-ml-6 {margin-left: 4rem;}
.-ml-7 {margin-left: 5rem;}
/* margin right */
.-mr-auto {margin-right: auto;}
.-mr-0 {margin-right: 0;}
.-mr-1 {margin-right: .25rem;}
.-mr-2 {margin-right: .5rem;}
.-mr-3 {margin-right: 1rem;}
.-mr-4 {margin-right: 2rem;}
.-mr-5 {margin-right: 3rem;}
.-mr-6 {margin-right: 4rem;}
.-mr-7 {margin-right: 5rem;}
/* margin bottom */
.-mb-auto {margin-bottom: auto;}
.-mb-0 {margin-bottom: 0;}
.-mb-1 {margin-bottom: .25rem;}
.-mb-2 {margin-bottom: .5rem;}
.-mb-3 {margin-bottom: 1rem;}
.-mb-4 {margin-bottom: 2rem;}
.-mb-5 {margin-bottom: 3rem;}
.-mb-6 {margin-bottom: 4rem;}
.-mb-7 {margin-bottom: 5rem;}
/* margin top */
.-mt-auto {margin-top: auto;}
.-mt-0 {margin-top: 0;}
.-mt-1 {margin-top: .25rem;}
.-mt-2 {margin-top: .5rem;}
.-mt-3 {margin-top: 1rem;}
.-mt-4 {margin-top: 2rem;}
.-mt-5 {margin-top: 3rem;}
.-mt-6 {margin-top: 4rem;}
.-mt-7 {margin-top: 5rem;}
/* margin horizontal */
.-mh-auto {margin-left: auto; margin-right: auto;}
.-cmh-0 > *, .-mh-0 {margin-left: 0; margin-right: 0;}
.-cmh-1 > *, .-mh-1 {margin-left: .25rem; margin-right: .25rem;}
.-cmh-2 > *, .-mh-2 {margin-left: .5rem; margin-right: .5rem;}
.-cmh-3 > *, .-mh-3 {margin-left: 1rem; margin-right: 1rem;}
.-cmh-4 > *, .-mh-4 {margin-left: 2rem; margin-right: 2rem;}
.-cmh-5 > *, .-mh-5 {margin-left: 3rem; margin-right: 3rem;}
.-cmh-6 > *, .-mh-6 {margin-left: 4rem; margin-right: 4rem;}
.-cmh-7 > *, .-mh-7 {margin-left: 5rem; margin-right: 5rem;}
/* margin vertical */
.-cmv-0 > *, .-mv-0 {margin-top: 0; margin-bottom: 0rem;}
.-cmv-1 > *, .-mv-1 {margin-top: .25rem; margin-bottom: .25rem;}
.-cmv-2 > *, .-mv-2 {margin-top: .5rem; margin-bottom: .5rem;}
.-cmv-3 > *, .-mv-3 {margin-top: 1rem; margin-bottom: 1rem;}
.-cmv-4 > *, .-mv-4 {margin-top: 2rem; margin-bottom: 2rem;}
.-cmv-5 > *, .-mv-5 {margin-top: 3rem; margin-bottom: 3rem;}
.-cmv-6 > *, .-mv-6 {margin-top: 4rem; margin-bottom: 4rem;}
.-cmv-7 > *, .-mv-7 {margin-top: 5rem; margin-bottom: 5rem;}
// offset parent
.-mhn-1 {margin-left: -.25rem; margin-right: -.25rem;}
.-mhn-2 {margin-left: -.5rem; margin-right: -.5rem; }
.-mhn-3 {margin-left: -1rem; margin-right: -1rem; }
.-mhn-4 {margin-left: -2rem; margin-right: -2rem; }
.-mhn-5 {margin-left: -3rem; margin-right: -3rem; }
.-mhn-6 {margin-left: -4rem; margin-right: -4rem; }
.-mhn-7 {margin-left: -5rem; margin-right: -5rem; }
/* padding */
.-p-0 {padding: 0 !important;}
.-p-1 {padding: .25rem;}
.-p-2 {padding: .5rem;}
.-p-3 {padding: 1rem;}
.-p-4 {padding: 2rem;}
.-p-5 {padding: 3rem;}
.-p-6 {padding: 4rem;}
.-p-7 {padding: 5rem;}
/* padding left */
.-pl-0 {padding-left: 0;}
.-pl-1 {padding-left: .25rem;}
.-pl-2 {padding-left: .5rem;}
.-pl-3 {padding-left: 1rem;}
.-pl-4 {padding-left: 2rem;}
.-pl-5 {padding-left: 3rem;}
.-pl-6 {padding-left: 4rem;}
.-pl-7 {padding-left: 5rem;}
/* padding right */
.-pr-0 {padding-right: 0;}
.-pr-1 {padding-right: .25rem;}
.-pr-2 {padding-right: .5rem;}
.-pr-3 {padding-right: 1rem;}
.-pr-4 {padding-right: 2rem;}
.-pr-5 {padding-right: 3rem;}
.-pr-6 {padding-right: 4rem;}
.-pr-7 {padding-right: 5rem;}
/* padding bottom */
.-pb-0 {padding-bottom: 0;}
.-pb-1 {padding-bottom: .25rem;}
.-pb-2 {padding-bottom: .5rem;}
.-pb-3 {padding-bottom: 1rem;}
.-pb-4 {padding-bottom: 2rem;}
.-pb-5 {padding-bottom: 3rem;}
.-pb-6 {padding-bottom: 4rem;}
.-pb-7 {padding-bottom: 5rem;}
/* padding top */
.-pt-0 {padding-top: 0;}
.-pt-1 {padding-top: .25rem;}
.-pt-2 {padding-top: .5rem;}
.-pt-3 {padding-top: 1rem;}
.-pt-4 {padding-top: 2rem;}
.-pt-5 {padding-top: 3rem;}
.-pt-6 {padding-top: 4rem;}
.-pt-7 {padding-top: 5rem;}
/* children padding horizontal */
.-cph-0 > * {padding-left:0; padding-right:0;}
.-cph-1 > * {padding-left:.25rem; padding-right:.25rem;}
.-cph-2 > * {padding-left:.5rem; padding-right:.5rem;}
.-cph-3 > * {padding-left:1rem; padding-right:1rem;}
.-cph-4 > * {padding-left:2rem; padding-right:2rem;}
.-cph-5 > * {padding-left:3rem; padding-right:3rem;}
.-cph-6 > * {padding-left:4rem; padding-right:4rem;}
.-cph-7 > * {padding-left:5rem; padding-right:5rem;}
/* children padding vertical*/
.-cpv-0 > * {padding-top:0; padding-bottom:0;}
.-cpv-1 > * {padding-top:.25rem; padding-bottom:.25rem;}
.-cpv-2 > * {padding-top:.5rem; padding-bottom:.5rem;}
.-cpv-3 > * {padding-top:1rem; padding-bottom:1rem;}
.-cpv-4 > * {padding-top:2rem; padding-bottom:2rem;}
.-cpv-5 > * {padding-top:3rem; padding-bottom:3rem;}
.-cpv-6 > * {padding-top:4rem; padding-bottom:4rem;}
.-cpv-7 > * {padding-top:5rem; padding-bottom:5rem;}
Text Link
/* FONT FAMILY */
.-text-serif {font-family: Georgia, serif;}
.-text-sans {font-family: Arial, sans-serif;}
.-text-mono {font-family: Courier, "Courier New", monospace;}
/* ALIGN & STYLE */
.-text-center {text-align: center;}
.-text-left {text-align: left;}
.-text-right {text-align: right;}
.-text-justify {text-align: justify;}
.-text-sub {vertical-align: sub;}
.-text-sup {vertical-align: super;}
.-text-regular {font-weight: normal;}
.-text-bold {font-weight: bold;}
.-text-italic {font-style: italic;}
.-text-caps {text-transform: uppercase; letter-spacing: 1px;}
/* SIZE (responsive prefixes -sm, -md, -lg) */
.-text-xxsmall {font-size: 9px; font-family: Verdana, Helvetica, Arial, sans-serif !important;}
.-text-xsmall {font-size: 11px !important;}
.-text-small {font-size: 12px !important;}
.-text-smaller {font-size: 14px !important;}
.-text-medium {font-size: 16px !important;}
.-text-larger {font-size: 18px !important;}
.-text-large {font-size: 20px !important;}
.-text-xlarge {font-size: 24px !important;}
.-text-xxlarge {font-size: 32px !important;}
/* LINE HRIGHT */
.-text-line-1 {line-height: 1 !important;}
.-text-line-2 {line-height: 1.2 !important;}
.-text-line-3 {line-height: 1.3 !important;}
.-text-line-4 {line-height: 1.4 !important;}
.-text-line-5 {line-height: 1.5 !important;}
.-text-line-6 {line-height: 1.6 !important;}
.-text-line-7 {line-height: 1.7 !important;}
/* LETTER SPACING*/
.-text-spacing-0 {letter-spacing: 0;}
.-text-spacing-1 {letter-spacing: 0.25em;}
.-text-spacing-2 {letter-spacing: 0.5em;}
.-text-spacing-3 {letter-spacing: 1em;}
/* TRUNCATE */
.-text-truncate {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* BREAK */
.-text-break-9 {width: 10ch;}
.-text-break-8 {width: 9ch;}
.-text-break-7 {width: 8ch;}
.-text-break-6 {width: 7ch;}
.-text-break-5 {width: 6ch;}
.-text-break-4 {width: 5ch;}
.-text-break-3 {width: 4ch;}
.-text-break-2 {width: 3ch;}
.-text-break-1 {width: 2ch;}
[class*="-text-break"] {
word-wrap: break-word;
display: inline-block;
white-space: pre-wrap;
line-height: 1 !important;
}
Color Link
.-color-white {color: #fff; }
.-color-black {color: #000; }
.-color-red {color: #e51c23;}
.-color-pink {color: #e91e63 }
.-color-purple {color: #9c27b0;}
.-color-deeppurple {color: #673ab7;}
.-color-indigo {color: #3f51b5;}
.-color-blue {color: #5677fc;}
.-color-lightblue {color: #03a9f4;}
.-color-cyan {color: #00bcd4;}
.-color-teal {color: #009688;}
.-color-green {color: #259b24;}
.-color-lightgreen {color: #8bc34a;}
.-color-lime {color: #cddc39;}
.-color-yellow {color: #ffeb3b;}
.-color-amger {color: #ffc107;}
.-color-orange {color: #ff9800;}
.-color-deeporange {color: #ff5722;}
.-color-brown {color: #795548;}
.-color-grey {color: #9e9e9e;}
.-color-lightgrey {color: #eeeeee;}
.-color-lightgrey2 {color: #BDBDBD;}
.-color-darkgrey {color: #212121;}
.-color-bluegrey {color: #607d8b;}
Background Link
.-bg-none {background: none}
.-bg-cover {background-size: cover}
.-bg-contain {background-size: contain}
.-bg-repeat {background-repeat: repeat}
.-bg-repeat-y {background-repeat: repeat-y}
.-bg-repeat-x {background-repeat: repeat-x}
.-bg-repeat-none {background-repeat: no-repeat}
/* POSITION */
.-bg-top-left {background-position: left top;}
.-bg-top-center {background-position: center top;}
.-bg-top-right {background-position: right top;}
.-bg-center-left {background-position: left center;}
.-bg-centered,
.-bg-center-center {background-position: center center;}
.-bg-center-right {background-position: right center;}
.-bg-bottom-left {background-position: left bottom;}
.-bg-bottom-center {background-position: center bottom;}
.-bg-bottom-right {background-position: right bottom;}
/* COLOR */
.-bg-transparent {background-color: transparent}
.-bg-white {background-color: rgba(255, 255, 255, 1);}
.-bg-black {background-color: rgba(0, 0, 0, 1);}
.-bg-grey50 {background-color: #FAFAFA;}
.-bg-grey100 {background-color: #F5F5F5;}
.-bg-grey200 {background-color: #EEEEEE;}
.-bg-grey300 {background-color: #E0E0E0;}
.-bg-grey400 {background-color: #BDBDBD;}
.-bg-grey500 {background-color: #9E9E9E;}
.-bg-grey600 {background-color: #757575;}
.-bg-grey700 {background-color: #616161;}
.-bg-grey800 {background-color: #424242;}
.-bg-grey900 {background-color: #212121;}
.-bg-red {background-color: #e51c23;}
.-bg-pink {background-color: #e91e63 }
.-bg-purple {background-color: #9c27b0;}
.-bg-deeppurple {background-color: #673ab7;}
.-bg-indigo {background-color: #3f51b5;}
.-bg-blue {background-color: #5677fc;}
.-bg-lightblue {background-color: #03a9f4;}
.-bg-cyan {background-color: #00bcd4;}
.-bg-teal {background-color: #009688;}
.-bg-green {background-color: #259b24;}
.-bg-lightgreen {background-color: #8bc34a;}
.-bg-lime {background-color: #cddc39;}
.-bg-yellow {background-color: #ffeb3b;}
.-bg-amber {background-color: #ffc107;}
.-bg-orange {background-color: #ff9800;}
.-bg-deeporange {background-color: #ff5722;}
.-bg-brown {background-color: #795548;}
.-bg-bluegrey {background-color: #607d8b;}
Format Link
[class*="-format-"] {
position: relative;
width: 100%;
overflow-y: hidden;
}
[class*="-format-"]::before {
display: block;
content: "";
width: 100%;
padding-top: 100%;
}
[class*="-format-"] > *:first-child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.-format-16x9::before {padding-top: 56.25%;}
.-format-5x4::before {padding-top: 80%;}
.-format-3x2::before {padding-top: 66.66667%;}
.-format-1x1::before {padding-top: 100%;}
.-format-2x1::before {padding-top: 50%;}
.-format-7x6::before {padding-top: 85.71429%;}
Border Link
.-border-none {border: 0 !important; }
.-border-round {border-radius: 3px !important;}
.-border-circle {border-radius: 50% !important;}
Opacity Link
.-opacity-0 {opacity: 0 !important;}
.-opacity-1 {opacity: 0.25 !important;}
.-opacity-2 {opacity: 0.55 !important;}
.-opacity-3 {opacity: 0.75 !important;}
.-opacity-none {opacity: 1 !important;}
Shadow Link
.-shadow-1 {box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24) !important;}
.-shadow-2 {box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23) !important;}
.-shadow-3 {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23) !important;}
.-shadow-4 {box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22) !important;}
.-shadow-5 {box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22) !important;}
.-shadow-none {box-shadow: none !important;}
Position Link
.-pos-absolute {position: absolute !important;}
.-pos-relative {position: relative !important;}
.-pos-fixed {position: fixed !important;}
.-pos-static {position: static !important;}
.-pos-top {top: 0% !important;}
.-pos-bottom {bottom: 0% !important;}
.-pos-left {left: 0% !important;}
.-pos-right {right: 0% !important;}
Visibility Link
.-hide,
.-lg-hide,
.-md-hide,
.-sm-hide {
display: none !important;
}
.-show,
.-lg-show,
.-md-show,
.-sm-show {
display: initial !important;
}