KNACSS/sass/base/_utilities.scss

/* ---------------------------------- */
/* ==Helpers                          */
/* ---------------------------------- */

/* Typo Helpers  */
/* ------------- */

.u-bold {
  font-weight: $weight-bold;
}

.u-italic {
  font-style: italic;
}

.u-normal {
  font-weight: normal;
  font-style: normal;
}

.u-uppercase {
  text-transform: uppercase;
}

.u-lowercase {
  text-transform: lowercase;
}

.u-smaller {
  font-size: 0.6em;
}

.u-small {
  font-size: 0.8em;
}

.u-big {
  font-size: 1.2em;
}

.u-bigger {
  font-size: 1.5em;
}

.u-biggest {
  font-size: 2em;
}

.u-txt-wrap {
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

.u-txt-ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* text and contents alignment */

.txtleft,
.u-txt-left {
  text-align: left;
}

.txtright,
.u-txt-right {
  text-align: right;
}

.txtcenter,
.u-txt-center {
  text-align: center;
}

@if variable-exists(hyphens) and $hyphens==true {
  @media (max-width: ($small - 1)) {
    div,
    textarea,
    table,
    td,
    th,
    code,
    pre,
    samp {
      word-wrap: break-word;
      overflow-wrap: break-word;
      hyphens: auto;
    }
  }
}

/* blocks that need to be placed under floats */

.clear,
.u-clear {
  clear: both;
}

/* blocks that must contain floats */

.clearfix,
.u-clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
    border-collapse: collapse;
  }
}

/* simple blocks alignment */

.left
.u-left {
  margin-right: auto;
}

.right,
.u-right {
  margin-left: auto;
}

.center,
.u-center {
  margin-left: auto;
  margin-right: auto;
}

/* Global Micro Layout */
/* ------------------- */

/* module, gains superpower "BFC" Block Formating Context */

.mod,
.u-mod,
.bfc,
.u-bfc {
  overflow: hidden;
}

/* floating elements */

.fl,
.u-fl {
  float: left;
}

img.fl,
img.u-fl {
  margin-right: $spacer-small;
}

.fr,
.u-fr {
  float: right;
}

img.fr,
img.u-fr {
  margin-left: $spacer-small;
}

img.fl,
img.fr,
img.u-fl,
img.u-fr {
  margin-bottom: $spacer-tiny;
}

/* inline-block */

.inbl,
.u-inbl {
  display: inline-block;
  vertical-align: top;
}

/* State Helpers */
/* ------------- */

/* invisible for all */
.is-hidden,
.js-hidden,
[hidden] {
  display: none;
}

/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
.visually-hidden {
  position: absolute !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
}

.is-disabled,
.js-disabled,
[disabled],
.is-disabled ~ label,
[disabled] ~ label {
  opacity: 0.5;
  cursor: not-allowed !important;
  filter: grayscale(1);
}

ul {
  &.is-unstyled,
  &.unstyled {
    list-style: none;
    padding-left: 0;
  }
}

.color--inverse {
  color: $white;
}

/* Width Helpers */
/* ------------- */

/* blocks widths (percentage and pixels) */
$i: 100;

@while $i > 0 {
    .w#{$i} {
      width: $i * 1%;
    }
    $i: $i - 5;
}
.w66 {
  width: calc(100% / 3 * 2);
}
.w33 {
  width: calc(100% / 3);
}

$i: 1000;

.wauto {
  width: auto;
}

.w960p {
  width: 960px;
}

.mw960p {
  max-width: 960px;
}

.w1140p {
  width: 1140px;
}

.mw1140p {
  max-width: 1140px;
}

@while $i > 0 {
    .w#{$i}p {
      width: $i * 1px;
    }
    $i: $i - 50;
}

/* Spacing Helpers */
/* --------------- */

.man,
.ma0 {
  margin: 0;
}

.pan,
.pa0 {
  padding: 0;
}

.mas {
  margin: $spacer-small;
}

.mam {
  margin: $spacer-medium;
}

.mal {
  margin: $spacer-large;
}

.pas {
  padding: $spacer-small;
}

.pam {
  padding: $spacer-medium;
}

.pal {
  padding: $spacer-large;
}

.mtn,
.mt0 {
  margin-top: 0;
}

.mts {
  margin-top: $spacer-small;
}

.mtm {
  margin-top: $spacer-medium;
}

.mtl {
  margin-top: $spacer-large;
}

.mrn,
.mr0 {
  margin-right: 0;
}

.mrs {
  margin-right: $spacer-small;
}

.mrm {
  margin-right: $spacer-medium;
}

.mrl {
  margin-right: $spacer-large;
}

.mbn,
.mb0 {
  margin-bottom: 0;
}

.mbs {
  margin-bottom: $spacer-small;
}

.mbm {
  margin-bottom: $spacer-medium;
}

.mbl {
  margin-bottom: $spacer-large;
}

.mln,
.ml0 {
  margin-left: 0;
}

.mls {
  margin-left: $spacer-small;
}

.mlm {
  margin-left: $spacer-medium;
}

.mll {
  margin-left: $spacer-large;
}

.mauto {
  margin: auto;
}

.mtauto {
  margin-top: auto;
}

.mrauto {
  margin-right: auto;
}

.mbauto {
  margin-bottom: auto;
}

.mlauto {
  margin-left: auto;
}

.ptn,
.pt0 {
  padding-top: 0;
}

.pts {
  padding-top: $spacer-small;
}

.ptm {
  padding-top: $spacer-medium;
}

.ptl {
  padding-top: $spacer-large;
}

.prn,
.pr0 {
  padding-right: 0;
}

.prs {
  padding-right: $spacer-small;
}

.prm {
  padding-right: $spacer-medium;
}

.prl {
  padding-right: $spacer-large;
}

.pbn,
.pb0 {
  padding-bottom: 0;
}

.pbs {
  padding-bottom: $spacer-small;
}

.pbm {
  padding-bottom: $spacer-medium;
}

.pbl {
  padding-bottom: $spacer-large;
}

.pln,
.pl0 {
  padding-left: 0;
}

.pls {
  padding-left: $spacer-small;
}

.plm {
  padding-left: $spacer-medium;
}

.pll {
  padding-left: $spacer-large;
}