#Display

New

0.6.0

These are utility classes that control the display of elements.

Class	Styles
`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;`

Supported Pseudo-Variants

New

0.8.0

active

checked

dark

disabled

first-of-type

focus

focus-visible

focus-within

group-focus

group-hover

hover

landscape

last-of-type

light

portrait

reduce-motion

responsive

visited

See more pseudo-variants.

#Examples

None

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

<div class="u-text-center">
    <div class="bg-blue-500 px-2 py-1 m-1 u-round-xs">a</div>
    <div class="bg-blue-500 px-2 py-1 m-1 u-round-xs u-none">b</div>
    <div class="bg-blue-500 px-2 py-1 m-1 u-round-xs">c</div>
</div>

Inline

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

<div class="bg-pink-300">
    <div class="bg-pink-500 px-2 py-1 m-1 u-round-xs u-inline">a</div>
    <div class="bg-pink-500 px-2 py-1 m-1 u-round-xs u-inline">b</div>
    <div class="bg-pink-500 px-2 py-1 m-1 u-round-xs u-inline">c</div>
</div>

Inline-block

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

<div class="p-3 bg-purple-100 text-white u-round-xs">
    <div class="bg-purple-500 px-2 py-1 m-1 u-round-xs u-inline-block">a</div>
    <div class="bg-purple-500 px-2 py-1 m-1 u-round-xs u-inline-block">b</div>
    <div class="bg-purple-500 px-2 py-1 m-1 u-round-xs u-inline-block">c</div>
</div>

Block

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

<div class="p-3 bg-yellow-100p text-white u-round-xs">
    <div class="bg-yellow-400 px-2 py-1 m-1 u-round-xs u-block">a</div>
    <div class="bg-yellow-400 px-2 py-1 m-1 u-round-xs u-block">b</div>
    <div class="bg-yellow-400 px-2 py-1 m-1 u-round-xs u-block">c</div>
</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.

Loooong 3

Loooong 4

<div class="u-table w-100p text-white">
    <div class="u-table-row">
        <div class="u-table-cell bg-indigo-400 px-4 py-2">1</div>
        <div class="u-table-cell bg-indigo-500 px-4 py-2">2</div>
        <div class="u-table-cell bg-indigo-400 px-4 py-2">Loooong 3</div>
    </div>
    <div class="u-table-row">
        <div class="u-table-cell bg-indigo-500 px-4 py-2">Loooong 4</div>
        <div class="u-table-cell bg-indigo-400 px-4 py-2">5</div>
        <div class="u-table-cell bg-indigo-500 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>:<class> at the end of the class(es) you are using. For example, use md:u-none to apply u-none on medium screens and above.

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

For more information, visit the Viewports documentation.

Cirrus