#Misc

Below are a bunch of miscellaneous utility classes that are not large enough to be their own standalone category.

ClassStyles
u-pull-left
float: left;
u-pull-right
float: right;
u-text-ellipsis
text-overflow: ellipsis;
u-text-break
hyphens: auto;
word-break: break-word;
word-wrap: break-word;
u-center
display: flex; align-items: center; justify-content: center;
u-center-alt
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
u-overlay
bottom: 0;
left: 0;
right: 0;
top: 0;
position: absolute;
u-text-justify
text-align: justify;
u-text-left
text-align: left;
u-text-right
text-align: right;
u-text-center
text-align: center;
u-disabled
cursor: not-allowed;
u-unselectable
user-select: none;
u-round
border-radius: 0.25rem;
u-circle
border-radius: 50%;
u-no-outline
outline: none;
u-shadow
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.07);

#Floats

Float Left

Float an element to the left with u-pull-left.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="p-3">
    <ul class="menu u-pull-left w-40 pr-4">
        <li class="menu-item selected"><a href="!#">Intro</a></li>
        <li class="menu-item"><a href="!#">Section 1</a></li>
        <li class="menu-item"><a href="!#">Section 2</a></li>
        <li class="menu-item"><a href="!#">Section 3</a></li>
        <li class="menu-item"><a href="!#">Conclusion</a></li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
Float Right

Float an element to the right with u-pull-right.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

<div class="p-3">
    <ul class="menu u-pull-right w-40 pr-4">
        <li class="menu-item selected"><a href="!#">Intro</a></li>
        <li class="menu-item"><a href="!#">Section 1</a></li>
        <li class="menu-item"><a href="!#">Section 2</a></li>
        <li class="menu-item"><a href="!#">Section 3</a></li>
        <li class="menu-item"><a href="!#">Conclusion</a></li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

#Text

Utility classes meant for specifying text positioning and alignment.

Text Left

Align text to the left with u-text-left.

This is some text.

<p class="u-text-left">This is some text.</p>
Text Center

Align text to the center with u-text-center.

This is some text.

<p class="u-text-center">This is some text.</p>
Text Right

Align text to the right with u-text-right.

This is some text.

<p class="u-text-right">This is some text.</p>
Text Justify

Stretch your text each line using u-text-justify.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida in fermentum et sollicitudin ac orci. Et malesuada fames ac turpis egestas integer eget aliquet.

<p class="u-text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida in fermentum et sollicitudin ac orci. Et malesuada fames ac turpis egestas integer eget aliquet.</p>
Text Ellipsis

Prevent text from overflowing your container with ellipsis using u-text-ellipsis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida in fermentum et sollicitudin ac orci. Et malesuada fames ac turpis egestas integer eget aliquet.

<p class="u-text-ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida in fermentum et sollicitudin ac orci. Et malesuada fames ac turpis egestas integer eget aliquet.</p>
Break On Word

Break text on word with u-text-break.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida in fermentum et sollicitudin ac orci. Et malesuada fames ac turpis egestas integer eget aliquet.

<p class="u-text-break">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Gravida in fermentum et sollicitudin ac orci. Et malesuada fames ac turpis egestas integer eget aliquet.</p>

#Centering

Utility classes for centering elements.

Center with Flexbox

I am in the middle. 🔥

<div class="bg-gray-100 u-center" style="height: 500px;">
    <p>I am in the middle. 🔥</p>
</div>
Center with Offsets

Unlike the flexbox variant, this is applied on the class you want centered itself. Parent class must use u-relative.

I am in the middle. 🔥

<div class="bg-gray-100 u-relative" style="height: 500px;">
    <p class="u-center-alt">I am in the middle. 🔥</p>
</div>

#Appearance

Utility classes that modify appearance.

Overlay

Use the u-overlay class to add an overlay over encapsulating class that has position: relative;. For example, a div with a teal background is added on top of the gray parent.

<div class="bg-gray-100 u-relative" style="height: 200px;">
    <div class="u-overlay bg-teal-300" style="opacity: 0.5;"></div>
</div>
Disabled

Make an element disabled with u-disabled.

<button class="u-disabled">Disabled</button>
Unselectable

Make anything unselectable with the u-unselectable class.

You cannot highlight this sentence.

<p class="u-unselectable">You cannot highlight this sentence.</p>
Round

Use the u-round class to round the edges of any element by 0.25rem.

cloud
<img src="https://images.unsplash.com/photo-1569428034239-f9565e32e224?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=300&amp;q=80" alt="cloud" class="u-round">
Circle

Make an element circular (or ovular) with a 50% border radius.

<button class="btn-info u-circle">sl</button>
No Outline

Disable any outlines with u-no-outline.

With outline.
No outline.
<div class="p-3" style="outline-color: gray; outline-style: dotted;">With outline.</div>
<div class="p-3 u-no-outline" style="outline-color: gray; outline-style: dotted;">No outline.</div>
Shadow

Add a subtle shadow for any element using u-shadow.

Shadow
<div class="u-shadow p-1">Shadow</div>
<button class="u-shadow m-0">Button</button>