.u-shake-vertical
Shake vertical utility
html
<div class="u-shake-vertical" style="background-color: #333; width: 40px; height: 40px;"></div>
Shake vertical utility
<div class="u-shake-vertical" style="background-color: #333; width: 40px; height: 40px;"></div>
Vibrate vertical utility
<div class="u-vibrate-vertical" style="background-color: #333; width: 40px; height: 40px;"></div>
Shake horizontal utility
<div class="u-shake-horizontal" style="background-color: #333; width: 40px; height: 40px;"></div>
Vibrate horizontal utility
<div class="u-vibrate-horizontal" style="background-color: #333; width: 40px; height: 40px;"></div>
Shake scale utility
<div class="u-shake-scale" style="background-color: #333; width: 40px; height: 40px;"></div>
Vibrate scale utility
<div class="u-vibrate-scale" style="background-color: #333; width: 40px; height: 40px;"></div>
Extend underline utility
<span class="u-extend-underline">menu</span>
Clearfix utility
<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.
Content utility
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.
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.
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.
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.
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>
Hidden utility
<div class="u-hidden">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Hidden utility for sm
<div class="u-hidden-sm">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Hidden utility for md
<div class="u-hidden-md">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Hidden utility for md or more
<div class="u-hidden-md-up">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Hidden utility for lg
<div class="u-hidden-lg">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Hidden utility for lg or more
<div class="u-hidden-lg-up">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Hidden utility for xl
<div class="u-hidden-xl">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Hidden utility for xl or more
<div class="u-hidden-xl-up">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Retina image size utility
<img class="u-img-2x" src="/basis/aigis_assets/images/dummy.jpg">
Pull right utility
<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.
Pull left utility
<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.
Centering text utility
<div class="u-text-center">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Right justified text utility
<div class="u-text-right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Left justified text utility
<div class="u-text-left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Transition utility
<style>
.u-transition:hover {
width: 100% !important;
opacity: .5 !important;
}
</style>
<div class="u-transition" style="background-color: #333; width: 100px; height: 20px;"></div>
Visible utility
<div class="u-visible">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Visible utility for sm
<div class="u-hidden u-visible-sm">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Visible utility for md
<div class="u-hidden u-visible-md">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Visible utility for md or more
<div class="u-hidden u-visible-md-up">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Visible utility for lg
<div class="u-hidden u-visible-lg">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Visible utility for lg or more
<div class="u-hidden u-visible-lg-up">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Visible utility for xl
<div class="u-hidden u-visible-xl">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
Visible utility for xl or more
<div class="u-hidden u-visible-xl-up">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>