Display Utilities

NuvoUI's display utilities provide a powerful system for controlling how elements are rendered in the document flow, including visibility, display modes, and overflow handling.

Configuration

Display utilities use the following configurable variables:

Breakpoints

The responsive variants of display utilities are generated based on the breakpoint values defined in the VAR.$breakpoints map:

Utility Class Generation

Display utility classes are only generated if VAR.$generate-utility-classes is set to true:

Parent Selector

All utility classes are scoped under the VAR.$parent-selector which can be configured to change the global selector context:

Display Mode Utilities

Control the basic display property of elements with these utilities:

Display Mode Classes

Class	CSS Property	Description
`.block`	`display: block;`	Element takes up full width
`.inline`	`display: inline;`	Element flows with text
`.inline-block`	`display: inline-block;`	Inline element with block properties
`.d-tbl`	`display: table;`	Element behaves like a table
`.d-tbl-row`	`display: table-row;`	Element behaves like a table row
`.d-tbl-cell`	`display: table-cell;`	Element behaves like a table cell
`.contents`	`display: contents;`	Element's box is not generated, but children appear as normal

Visibility Utilities

Control whether elements are visible without affecting their layout:

Visibility Classes

Class	CSS Property	Description
`.visible`	`visibility: visible;`	Element is visible (default)
`.invisible`	`visibility: hidden;`	Element is hidden but maintains its space in the layout
`.collapse`	`visibility: collapse;`	Special value for table rows/columns
`.hide`	`display: none;`	Element is completely removed from the layout
`.show`	`display: revert;`	Restores an element to its natural display value

Overflow Utilities

Control how content that overflows its container is handled:

Axis-Specific Overflow

Control overflow behavior on horizontal and vertical axes independently:

Overflow Classes

Class	CSS Property	Description
`.overflow-hidden`	`overflow: hidden;`	Clips overflowing content
`.overflow-visible`	`overflow: visible;`	Shows content outside container bounds
`.overflow-scroll`	`overflow: scroll;`	Always shows scrollbars
`.overflow-auto`	`overflow: auto;`	Shows scrollbars only when needed
`.overflow-x-hidden`	`overflow-x: hidden;`	Clips horizontal overflow
`.overflow-y-hidden`	`overflow-y: hidden;`	Clips vertical overflow
`.overflow-x-scroll`	`overflow-x: scroll;`	Always shows horizontal scrollbar
`.overflow-y-scroll`	`overflow-y: scroll;`	Always shows vertical scrollbar
`.overflow-x-auto`	`overflow-x: auto;`	Shows horizontal scrollbar when needed
`.overflow-y-auto`	`overflow-y: auto;`	Shows vertical scrollbar when needed

Responsive Display

Apply display utilities at specific breakpoints using the @breakpoint suffix:

All display utilities support responsive variants with breakpoint suffixes:

.hide@md, .show@md
.block@lg, .inline@lg
.d-tbl@xl, .d-tbl-row@xl
.overflow-hidden@sm, .overflow-auto@md

Common UI Patterns

Content Cards with Truncated Text

Collapsible Sections

Table with Horizontal Scrolling

SCSS Mixins

NuvoUI provides a comprehensive set of mixins for using display utilities directly in your SCSS:

Display Mode Mixins

Mixin	Description	CSS Output
`@include hide()`	Hides an element	`display: none;`
`@include block()`	Makes an element block-level	`display: block;`
`@include inline()`	Makes an element inline	`display: inline;`
`@include inline-block()`	Makes an element inline-block	`display: inline-block;`
`@include show()`	Restores default display value	`display: revert;`
`@include d-tbl()`	Makes an element behave like a table	`display: table;`
`@include d-tbl-row()`	Makes an element behave like a table row	`display: table-row;`
`@include d-tbl-cell()`	Makes an element behave like a table cell	`display: table-cell;`
`@include contents()`	Removes element's own box from rendering	`display: contents;`

Visibility Mixins

Mixin	Description	CSS Output
`@include visible()`	Makes an element visible	`visibility: visible;`
`@include invisible()`	Hides an element but keeps its space	`visibility: hidden;`
`@include collapse()`	Special value for table row/column	`visibility: collapse;`

Overflow Mixins

Mixin	Description	CSS Output
`@include overflow-hidden()`	Clips overflowing content	`overflow: hidden;`
`@include overflow-visible()`	Shows overflowing content	`overflow: visible;`
`@include overflow-scroll()`	Always shows scrollbars	`overflow: scroll;`
`@include overflow-auto()`	Shows scrollbars when needed	`overflow: auto;`
`@include overflow-x-hidden()`	Clips horizontal overflow	`overflow-x: hidden;`
`@include overflow-y-hidden()`	Clips vertical overflow	`overflow-y: hidden;`
`@include overflow-x-scroll()`	Always shows horizontal scrollbar	`overflow-x: scroll;`
`@include overflow-y-scroll()`	Always shows vertical scrollbar	`overflow-y: scroll;`
`@include overflow-x-auto()`	Shows horizontal scrollbar when needed	`overflow-x: auto;`
`@include overflow-y-auto()`	Shows vertical scrollbar when needed	`overflow-y: auto;`

Example SCSS Usage