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

× × ×

Learn next: Introduction