Hidden

<div class="_c-row">
  <div class="_c-row__col _c-row__col--1-1 _u-hidden-sm">Hidden < 640</div>
  <div class="_c-row__col _c-row__col--1-1 _u-hidden-md">Hidden 640 - 1023</div>
  <div class="_c-row__col _c-row__col--1-1 _u-hidden-md-up">Hidden >= 640</div>
  <div class="_c-row__col _c-row__col--1-1 _u-hidden-lg">Hidden >= 1024</div>
</div>
Hidden < 640
Hidden 640 - 1023
Hidden >= 640
Hidden >= 1024

Visible

<div class="_c-row">
  <div class="_c-row__col _c-row__col--1-1">
    <span class="p-show-grid__item _u-visible-sm-inline" hidden>
      Visible < 640
    </span>
    <div class="p-show-grid__item _u-visible-sm-inline-block" hidden>
      Visible < 640
    </div>
    <div class="p-show-grid__item _u-visible-sm-block" hidden>
      Visible < 640
    </div>
    <div class="p-show-grid__item _u-visible-sm-flex" hidden>
      Visible < 640
    </div>
  </div>
  <div class="_c-row__col _c-row__col--1-1">
    <span class="p-show-grid__item _u-visible-md-inline" hidden>
      Visible 640 - 1023
    </span>
    <span class="p-show-grid__item _u-visible-md-up-inline" hidden>
      Visible >= 640
    </span>
    <div class="p-show-grid__item _u-visible-md-inline-block" hidden>
      Visible 640 - 1023
    </div>
    <div class="p-show-grid__item _u-visible-md-up-inline-block" hidden>
      Visible >= 640
    </div>
    <div class="p-show-grid__item _u-visible-md-block" hidden>
      Visible 640 - 1023
    </div>
    <div class="p-show-grid__item _u-visible-md-up-block" hidden>
      Visible >= 640
    </div>
    <div class="p-show-grid__item _u-visible-md-flex" hidden>
      Visible 640 - 1023
    </div>
    <div class="p-show-grid__item _u-visible-md-up-flex" hidden>
      Visible >= 640
    </div>
  </div>
  <div class="_c-row__col _c-row__col--1-1">
    <span class="p-show-grid__item _u-visible-lg-inline" hidden>
      Visible >= 1024
    </span>
    <div class="p-show-grid__item _u-visible-lg-inline-block" hidden>
      Visible >= 1024
    </div>
    <div class="p-show-grid__item _u-visible-lg-block" hidden>
      Visible >= 1024
    </div>
    <div class="p-show-grid__item _u-visible-lg-flex" hidden>
      Visible >= 1024
    </div>
  </div>
</div>

Text

<div class="_u-text-left">
  Left
</div>
<div class="_u-text-center">
  Center
</div>
<div class="_u-text-right">
  Right
</div>
Left
Center
Right

Clearfix

<div class="_u-clearfix">
  <div class="c-dummy-image" style="float: left; margin-right: 1rem;"></div>
  Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
</div>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Img

<div class="c-dummy-image"></div>
<div class="c-dummy-image _u-img-2x"></div>

Pull

Pull left

<div class="c-dummy-image _u-pull-left"></div>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Pull right

<div class="c-dummy-image _u-pull-right"></div>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Transition & Animation

Transition

Transition all properties

Enabled transition about all properties.

.c-foo {
  height: 150px;
  opacity: 1;
}
.c-foo:hover, .c-foo:active, .c-foo:focus {
  width: 100%;
  opacity: 0.5;
}
<div class="c-animate-image _u-animate"></div>

Transition width and height

Enabled transition about width and height.

.c-foo {
  width: 25%;
}
.c-foo:hover, .c-foo:active, .c-foo:focus {
  width: 100%;
}
<div class="c-progress-bar _u-animate-size"></div>

Transition opacity

Enabled transition about opacity.

.c-foo {
  opacity: 1;
}
.c-foo:hover, .c-foo:active, .c-foo:focus {
  opacity: 0.5;
}
<div class="c-fade-image _u-animate-opacity"></div>

Animation

Animation when hover.

Shake vertical

<div class="c-dummy-image _u-animate-shake-vertical"></div>

Animate at anytime, use mixin.

@include _shake-vertical();

Vibrate vertical

<div class="c-dummy-image _u-animate-vibrate-vertical"></div>

Animate at anytime, use mixin.

@include _vibrate-vertical();

Shake horizontal

<div class="c-dummy-image _u-animate-shake-horizontal"></div>

Animate at anytime, use mixin.

@include _shake-horizontal();

Vibrate horizontal

<div class="c-dummy-image _u-animate-vibrate-horizontal"></div>

Animate at anytime, use mixin.

@include _vibrate-horizontal();

Shake scale

<div class="c-dummy-image _u-animate-shake-scale"></div>

Animate at anytime, use mixin.

@include _shake-scale();

Vibrate scale

<div class="c-dummy-image _u-animate-vibrate-scale"></div>

Animate at anytime, use mixin.

@include _vibrate-scale();

Extend underline from the center

<a class="_u-animate-extend-underline">Lorem</a>
<a class="_u-animate-extend-underline">Ipsum</a>
<a class="_u-animate-extend-underline">dolor</a>

Animate at anytime, use mixin.

.c-foo {
  position: relative;

  &::after {
    @include _extend-underline();
  }

  @include _hover() {
    &::after {
      width: 100%;
    }
  }
}