#Display

Added
0.6.0

These are utility classes that control the display of elements.

ClassStyles
u-none
display: none;
u-inline
display: inline;
u-inline-block
display: inline-block;
u-block
display: block;
u-table
display: table;
u-table-row
display: table-row;
u-table-cell
display: table-cell;

#Examples

None

Set the u-none class to make the element display with none.

a
b
c
<div class="bg-indigo-200 px-2 py-1 m-1 u-round">a</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-none">b</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round">c</div>
Inline

Set the u-inline class to make the element display with inline.

a
b
c
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline">a</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline">b</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline">c</div>
Inline-block

Set the u-inline-block class to make the element display with inline-block.

a
b
c
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline-block">a</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline-block">b</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-inline-block">c</div>
Block

Set the u-block class to make the element display with block.

a
b
c
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-block">a</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-block">b</div>
<div class="bg-indigo-200 px-2 py-1 m-1 u-round u-block">c</div>
Table

You can re-create the table layout using the u-table class. The rows, columns, and cells can be styled with u-table-row, u-table-column, and u-table-cell classes.

1
2
Loooong 3
Loooong 4
5
6
<div class="u-table w-100">
    <div class="u-table-row">
        <div class="u-table-cell bg-indigo-200 px-4 py-2">1</div>
        <div class="u-table-cell bg-indigo-300 px-4 py-2">2</div>
        <div class="u-table-cell bg-indigo-200 px-4 py-2">Loooong 3</div>
    </div>
    <div class="u-table-row">
        <div class="u-table-cell bg-indigo-300 px-4 py-2">Loooong 4</div>
        <div class="u-table-cell bg-indigo-200 px-4 py-2">5</div>
        <div class="u-table-cell bg-indigo-300 px-4 py-2">6</div>
    </div>
</div>
Flexbox & Friends

For documentation for flexbox, view it here.

#Responsive

New
0.6.2

All utility classes mentioned here support viewport based application. All you need to do is add a -<viewport> at the end of the class(es) you are using. For example, use u-none-md to apply u-none on medium screens and above.

<div class="u-block u-none-md">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.