Positioning Classes

Use position utilities to layout elements, build sticky headers, overlay actions, or create fixed components.

Base Utilities Reference

Best Practices

Responsive Breakpoints

Position helper classes have responsive variations that apply at specific viewport width thresholds. The pattern follows .{class}-{breakpoint}.

Responsive Code Example

<!-- Absolute positioned block on large screens, standard relative block on mobile -->
<div class="pos-relative pos-absolute-lg" style="top: 20px; right: 20px;">
    <span>Responsive Badge</span>
</div>

<!-- Element fixed on tablet screens and above, static on mobile -->
<div class="pos-static pos-fixed-md" style="bottom: 10px; left: 10px;">
    <p>Floating Action Bar</p>
</div>

Heading Typography Sizes

The framework specifies customizable typography sizes for all standard heading elements (H1 to H6) using CSS root variables. These can be overridden dynamically or in your custom stylesheets.

Typography Variables Reference

Display Classes

Large, eye-catching text styles for hero sections, titles, and major landing page headers:

Heading Classes

Heading helper classes let you apply standard heading font sizes to any HTML tag (like <span>, <p>, or <div>):

Font Settings Reference

Metro UI uses CSS variables to configure the primary font styles globally. These can be adjusted at the root stylesheet:

Cursor Utilities

FrankUI offers a comprehensive suite of utility classes to control the mouse cursor display. All classes use the .c-[type] naming convention.

Interactive Hover Sandbox

Hover your mouse over the cards below to see the respective cursors render live in your browser.

Cursor Reference Table

Visibility & Display Utilities

Control elements visibility and display states dynamically. These classes are useful for toggling sections, constructing grid systems, or responsive visibility.

Display & Visibility Classes Reference

Responsive Breakpoint Utilities

Responsive visibility classes let you show or hide elements at specific breakpoints (e.g. .d-none-md, .visible-lg):

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>

Border Utilities

FrankUI includes lightweight border helpers to quickly apply borders, styles, colors, thicknesses, and rounded corners without custom styling rules.

Borders Reference

Removing Borders (Responsive Variants)

Borders can be removed globally or per direction. You can also hide borders selectively starting at any breakpoint (e.g. .border-none-md, .border-top-none-lg):

Border Markup Code Example

<!-- Div with 3px dashed primary color border and custom rounded corners -->
<div class="border border-dashed border-size-3 border-radius-8 bd-primary p-4">
    <p>Custom styled container</p>
</div>

<!-- Button circular with solid success color border -->
<button class="border border-solid border-size-2 to-cycle bd-success">
    ✏️
</button>

Color Utilities

Apply background, foreground (text), and border colors quickly using prefix-based utility classes. All color utilities are defined with !important to guarantee they apply consistently.

Primary Colors

Extended Colors

Neutral & Special Colors

Code Example

<!-- Custom alert panel using theme colors -->
<div class="bg-light border border-solid border-size-1 bd-orange p-3 rounded">
    <h4 class="fg-crimson mt-0">Warning Notice</h4>
    <p class="fg-charcoal mb-0">This action cannot be undone.</p>
</div>

<!-- Cobalt colored badge -->
<span class="bg-cobalt fg-white p-1 rounded">Admin</span>

Flexbox Utilities

FrankUI provides standard flexbox utilities to construct responsive layouts, manage child alignments, distribution, wrapping, and spacings in real-time.

Flexbox Reference

Responsive Breakpoint Utilities

Responsive variants (e.g. .flex-column-md) allow you to rearrange column listings on mobile/tablets into side-by-side row grids on desktop:

<!-- Stack on mobile, horizontal row layout on desktop (medium screen & above) -->
<div class="d-flex flex-column flex-row-md gap-4">
    <div class="card">Sidebar content</div>
    <div class="card flex-grow-1">Main content area</div>
</div>

Image Utilities

Apply sizing, responsiveness, thumbnails, and interactive hover overlays directly to images in FrankUI.

Live Layout Previews

Hover over the cards below to see zoom scaling and sliding overlays in action.

Fluid Responsive (.img-fluid)

Scales dynamically to fit the width of its parent block.

Thumbnail (.img-thumbnail)

Adds standard padding, a subtle border, and background frame.

Container Overlay (.img-container)

Combines zoom, overlays, and transition slide-up effects.

Scenic Overlay

Zoom + Slide Up

Images Reference

Code Example

<!-- Responsive fluid image wrapper with zoom and sliding text overlay -->
<div class="img-container zoom slide-up rounded">
    <img src="ocean-view.jpg" alt="Ocean View">
    <div class="image-overlay">
        <h4>Ocean Breeze</h4>
        <p>Sunset at the coastline</p>
    </div>
</div>

DOM Selector Wrapper ($)

FrankUI includes a lightweight, vanilla wrapper function $() that offers a jQuery-like API for element selection, property retrieval/mutations, checking matches, and event bindings without the overhead of loading the entire jQuery library.

API Reference

Code Example

// Perform tasks using standard jQuery syntax
$('#my-form').on('submit', function(e) {
    if ($('#agree-check').is(':checked')) {
        console.log('User value:', $('#username').val());
        $('#agree-check').prop('disabled', true);
    } else {
        e.preventDefault();
        $('#error-msg').text('You must accept the terms first!').addClass('fg-red');
    }
});