FrankUICommon CSS (Spacing & Position Utilities)
FrankUI provides utility helper classes for rapid layout adjustments, positioning elements, and spacing. These utilities form the foundation for more advanced responsive interfaces.
Visibility & Display Utilities
Control elements visibility and display states dynamically. These classes are useful for toggling sections, constructing grid systems, or responsive visibility.
Live Display & Visibility Sandbox
Select a display or visibility utility to see how it affects the target element (blue) and the surrounding elements (green & red).
Left Box
Target Box
Right Box
Display & Visibility Classes Reference
| Class | Applied Style | Description |
|---|---|---|
| .visible | visibility: visible !important; | Makes an element visible |
| .no-visible | visibility: hidden !important; | Hides an element but preserves its space in layout |
| .d-none | display: none !important; | Hides an element completely |
| .d-block | display: block !important; | Displays an element as block-level |
| .d-inline | display: inline !important; | Displays an element as inline flow |
| .d-inline-block | display: inline-block !important; | Displays an element as inline-block |
| .d-table | display: table !important; | Displays an element as a table container |
| .d-table-row | display: table-row !important; | Displays an element as a table row |
| .d-table-cell | display: table-cell !important; | Displays an element as a table cell |
Responsive Breakpoint Utilities
Responsive visibility classes let you show or hide elements at specific breakpoints (e.g. .d-none-md, .visible-lg):
| Breakpoint Prefix | Applies At | Example Display Class | Example Visibility Class |
|---|---|---|---|
| -xs | ≥ 480px | .d-block-xs | .visible-xs |
| -sm | ≥ 576px | .d-none-sm | .no-visible-sm |
| -md | ≥ 768px | .d-inline-block-md | .visible-md |
| -lg | ≥ 992px | .d-table-lg | .no-visible-lg |
| -xl | ≥ 1200px | .d-none-xl | .visible-xl |
| -xxl | ≥ 1400px | .d-block-xxl | .no-visible-xxl |
| -xxxl | ≥ 1600px | .d-inline-xxxl | .visible-xxxl |
Responsive Visibility Code Example
<!-- Hide completely on mobile, display as block on desktop (large screens) -->
<div class="d-none d-block-lg">
<p>Desktop-only content</p>
</div>
<!-- Preserve layout spacing but hide on medium screens and up -->
<div class="visible no-visible-md">
<p>Placeholder space...</p>
</div>