//Clears the float from any element
%clearfix {
  &::before,
  &::after {
    content: '';
    display: table;
  }

  &::after {
    clear: both;
  }
}

//Floats
.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

//Text alignments

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.text-left {
  text-align: left;
}

//Vertical align

.vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

//Flex center

.flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
}

//############################################//
//############# Flaot Utilities  ############//
//###########################################//

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

//############################################//
//############# Flaot Utilities  ############//
//###########################################//

$texts: 'right', 'left', 'justify', 'center';

@each $text in $texts {
  .text-#{$text} {
      text-align: #{$text};
  }
}

//############################################//
//############# Displays  Utilities #########//
//###########################################//

$displays: 'block', 'flex', 'inline', 'inline-block', 'inline-flex', 'table';

@each $display in $displays {
  .is-#{$display} {
      display: #{$display};
  }
}

//############################################//
//############# Align Utilities #############//
//###########################################//

.vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

//Flex center

.flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
}

Refactor text align utilities, adds display utilities and removes clearfix from this file
Refactor text align utilities, adds display utilities and removes clearfix from this file
