.u-shake-vertical

/src/css/object/utility/_animation.scss

Shake vertical utility

html

<div class="u-shake-vertical" style="background-color: #333; width: 40px; height: 40px;"></div>

.u-vibrate-vertical

/src/css/object/utility/_animation.scss

Vibrate vertical utility

html

<div class="u-vibrate-vertical" style="background-color: #333; width: 40px; height: 40px;"></div>

.u-shake-horizontal

/src/css/object/utility/_animation.scss

Shake horizontal utility

html

<div class="u-shake-horizontal" style="background-color: #333; width: 40px; height: 40px;"></div>

.u-vibrate-horizontal

/src/css/object/utility/_animation.scss

Vibrate horizontal utility

html

<div class="u-vibrate-horizontal" style="background-color: #333; width: 40px; height: 40px;"></div>

.u-shake-scale

/src/css/object/utility/_animation.scss

Shake scale utility

html

<div class="u-shake-scale" style="background-color: #333; width: 40px; height: 40px;"></div>

.u-vibrate-scale

/src/css/object/utility/_animation.scss

Vibrate scale utility

html

<div class="u-vibrate-scale" style="background-color: #333; width: 40px; height: 40px;"></div>

.u-extend-underline

/src/css/object/utility/_animation.scss

Extend underline utility

html

menu

<span class="u-extend-underline">menu</span>

.u-clearfix

/src/css/object/utility/_clearfix.scss

Clearfix utility

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="u-clearfix">
  <img class="u-pull-left" src="/basis/aigis_assets/images/dummy.jpg" style="width: 150px; margin-right: 1em">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

.u-content

/src/css/object/utility/_content.scss

Content utility

html

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

Heading 3

Lorem ipsum dolor sit amet
consectetur adipiscing elit
Nulla accumsan
metus ultrices eleifend gravida

Lorem ipsum dolor sit amet
consectetur adipiscing elit
Nulla accumsan
metus ultrices eleifend gravida

Lorem ipsum dolor sit amet: consectetur adipiscing elit
Nulla accumsan: metus ultrices eleifend gravida

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.

<div class="u-content">
  <h1>Heading 1</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
  </p>
  <h2>Heading 2</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
  </p>
  <h3>Heading 3</h3>
  <ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>consectetur adipiscing elit</li>
    <li>Nulla accumsan</li>
    <li>metus ultrices eleifend gravida</li>
  </ul>
  <ol>
    <li>Lorem ipsum dolor sit amet</li>
    <li>consectetur adipiscing elit</li>
    <li>Nulla accumsan</li>
    <li>metus ultrices eleifend gravida</li>
  </ol>
  <dl>
    <dt>Lorem ipsum dolor sit amet</dt>
    <dd>consectetur adipiscing elit</dd>
    <dt>Nulla accumsan</dt>
    <dd>metus ultrices eleifend gravida</dd>
  </dl>
  <h4>Heading 4</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
  </p>
  <h5>Heading 5</h5>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
  </p>
  <h6>Heading 6</h6>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.
  </p>
</div>

.u-hidden

/src/css/object/utility/_hidden.scss

Hidden utility

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="u-hidden">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

u-hidden-sm

<div class="u-hidden-sm">
  u-hidden-sm
</div>

u-hidden-md

<div class="u-hidden-md">
  u-hidden-md
</div>

u-hidden-md-up

<div class="u-hidden-md-up">
  u-hidden-md-up
</div>

u-hidden-lg

<div class="u-hidden-lg">
  u-hidden-lg
</div>

u-hidden-lg-up

<div class="u-hidden-lg-up">
  u-hidden-lg-up
</div>

u-hidden-xl

<div class="u-hidden-xl">
  u-hidden-xl
</div>

.u-img-2x

/src/css/object/utility/_img.scss

Retina image size utility

html

<img class="u-img-2x" src="/basis/aigis_assets/images/dummy.jpg">

.u-invisible

/src/css/object/utility/_invisible.scss

Invisible utility

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="u-invisible">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

u-invisible-sm

<div class="u-invisible-sm">
  u-invisible-sm
</div>

u-invisible-md

<div class="u-invisible-md">
  u-invisible-md
</div>

u-invisible-md-down

<div class="u-invisible-md-down">
  u-invisible-md-down
</div>

u-invisible-md-up

<div class="u-invisible-md-up">
  u-invisible-md-up
</div>

u-invisible-lg

<div class="u-invisible-lg">
  u-invisible-lg
</div>

u-invisible-lg-down

<div class="u-invisible-lg-down">
  u-invisible-lg-down
</div>

u-invisible-lg-up

<div class="u-invisible-lg-up">
  u-invisible-lg-up
</div>

u-invisible-xl

<div class="u-invisible-xl">
  u-invisible-xl
</div>

.u-noscroll

/src/css/object/utility/_noscroll.scss

Noscroll utility

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<body class="u-noscroll">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</body>

.u-pull-right

/src/css/object/utility/_pull.scss

Pull right utility

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<img class="u-pull-right" src="/basis/aigis_assets/images/dummy.jpg" style="width: 150px; margin-left: 1em">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

.u-pull-left

/src/css/object/utility/_pull.scss

Pull left utility

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<img class="u-pull-left" src="/basis/aigis_assets/images/dummy.jpg" style="width: 150px; margin-right: 1em">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

.u-text-center

/src/css/object/utility/_text.scss

Centering text utility

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="u-text-center">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

.u-text-right

/src/css/object/utility/_text.scss

Right justified text utility

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="u-text-right">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

.u-text-left

/src/css/object/utility/_text.scss

Left justified text utility

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="u-text-left">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

.u-transition

/src/css/object/utility/_transition.scss

Transition utility

html

<style>
.u-transition:hover {
  width: 100% !important;
  opacity: .5 !important;
}
</style>
<div class="u-transition" style="background-color: #333; width: 100px; height: 20px;"></div>

.u-visible

/src/css/object/utility/_visible.scss

Visible utility

html

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

<div class="u-visible">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>

u-hidden u-visible-sm

<div class="u-hidden u-visible-sm">
  u-hidden u-visible-sm
</div>

u-hidden u-visible-md

<div class="u-hidden u-visible-md">
  u-hidden u-visible-md
</div>

u-hidden u-visible-md-up

<div class="u-hidden u-visible-md-up">
  u-hidden u-visible-md-up
</div>

u-hidden u-visible-lg

<div class="u-hidden u-visible-lg">
  u-hidden u-visible-lg
</div>

u-hidden u-visible-lg-up

<div class="u-hidden u-visible-lg-up">
  u-hidden u-visible-lg-up
</div>

u-hidden u-visible-xl

<div class="u-hidden u-visible-xl">
  u-hidden u-visible-xl
</div>

object/utility

html

html

html

html

html

html

html

html

html

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

html

html

html

html

html

html

html

html

html

html

html