Below are a bunch of miscellaneous utility classes that are not large enough to be their own standalone category.
| Class | Styles |
|---|---|
u-pull-left | |
u-pull-right | |
u-text-ellipsis | |
u-text-break | |
u-center | |
u-center-alt | |
u-overlay | |
u-text-justify | |
u-text-left | |
u-text-right | |
u-text-center | |
u-disabled | |
u-unselectable | |
u-round | |
u-circle | |
u-no-outline | |
u-shadow | |
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 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>Utility classes meant for specifying text positioning and alignment.
Align text to the left with u-text-left.
This is some text.
<p class="u-text-left">This is some text.</p>Align text to the center with u-text-center.
This is some text.
<p class="u-text-center">This is some text.</p>Align text to the right with u-text-right.
This is some text.
<p class="u-text-right">This is some text.</p>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>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 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>Utility classes for centering elements.
I am in the middle. 🔥
<div class="bg-gray-100 u-center" style="height: 500px;">
<p>I am in the middle. 🔥</p>
</div>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>Utility classes that modify appearance.
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>Make an element disabled with u-disabled.
<button class="u-disabled">Disabled</button>Make anything unselectable with the u-unselectable class.
You cannot highlight this sentence.
<p class="u-unselectable">You cannot highlight this sentence.</p>Use the u-round class to round the edges of any element by 0.25rem.
<img src="https://images.unsplash.com/photo-1569428034239-f9565e32e224?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="cloud" class="u-round">Make an element circular (or ovular) with a 50% border radius.
<button class="btn-info u-circle">sl</button>Disable any outlines with u-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>Add a subtle shadow for any element using u-shadow.
<div class="u-shadow p-1">Shadow</div>
<button class="u-shadow m-0">Button</button>