Sass Utilities on traveltripper.com

utilities-display.scss

// Display
.d-flex {
  display: flex !important;
}

.flex-column {
  flex-direction: column !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.d-none {
  display: none !important;
}

.d-sm-inline {
  @include breakpoint($sm) {
    display: inline !important;
  }
}

.d-md-none {
  @include breakpoint($md) {
    display: none !important;
  }
}

.d-sm-block {
  @include breakpoint($sm) {
    display: block !important;
  }
}

.d-md-block {
  @include breakpoint($md) {
    display: block !important;
  }
}

.d-md-inline-block {
  @include breakpoint($md) {
    display: inline-block !important;
  }
}

utilities-grid.scss

%row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.row {
  @extend %row;
}

// No stack on mobile
// .col {
//   flex-basis: 0;
//   flex-grow: 1;
//   max-width: 100%;
// }

// Make column ready
// .col,
// .col-md {
//   position: relative;
//   width: 100%;
// }

.col-sm-6 {
  position: relative;
  width: 100%;
  @include breakpoint($sm) {
    flex: 0 0 (100% - $spacer) / 12 * 6);
    max-width: (100% - $spacer) / 12 * 6);
    // Using Susy:
    // flex: 0 0 span(6 of 12);
    // max-width: span(6 of 12);
  }
}

.col-lg-4 {
  position: relative;
  width: 100%;
  @include breakpoint($lg) {
    flex: 0 0 span(4 of 12);
    max-width: span(4 of 12);
  }
}

.col-md-6 {
  position: relative;
  width: 100%;
  @include breakpoint($md) {
    flex: 0 0 span(1 of 2);
    max-width: span(1 of 2);
  }

  // &.no-gutters {
  //   @include breakpoint($md) {
  //     flex: 0 0 50%;
  //     max-width: 50%;
  //   }
  // }

}

utilities-text.scss

// Screen Readers Only
.screen-reader-text,
.sr-only {
  display: none !important;
}

// Spacing
.mb-1 {
  margin-bottom: $spacer !important;
}

.mb-2 {
  margin-bottom: $spacer * 2 !important;
}

// Text
.font-weight-normal {
  font-weight: 400 !important;
}

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

// Color
.text-white {
  color: #fff;
}