Module responsive 

Responsive design system and mobile styling utilities.

Centralizes all mobile/responsive concerns to ensure consistent behavior across device sizes. Provides breakpoints, touch target standards, and reusable CSS for mobile-first components.

Breakpoint Strategy

Mobile-first approach with these breakpoints:

• XS (480px): Small phones
• SM (640px): Large phones, small tablets
• MD (768px): Tablets (primary mobile breakpoint)
• LG (1024px): Small laptops
• XL (1280px): Desktops

Touch Target Standards

Follows WCAG 2.5 guidelines:

• Minimum: 44x44px
• Comfortable: 48x48px
• Large (primary actions): 56x56px

Usage

Include base styles in your root component:

use logicaffeine_web::ui::responsive::{MOBILE_BASE_STYLES, all_mobile_styles};

rsx! {
    // Option 1: Just the base utilities
    style { "{MOBILE_BASE_STYLES}" }

    // Option 2: All mobile styles including tabs, panels, buttons
    style { "{all_mobile_styles()}" }
}

CSS Classes

Class	Description
.desktop-only	Hidden on mobile (≤768px)
.mobile-only	Hidden on desktop (>768px)
.touch-target	Minimum 44x44px touch area
.safe-top	Respects notch/status bar
.safe-bottom	Respects home indicator
.scroll-smooth	iOS momentum scrolling

Modules

breakpoints

Standard breakpoint values used across the application

media

Media query helpers - use these in your CSS strings

touch

WCAG 2.5 compliant touch target sizes

Constants

MOBILE_BASE_STYLES

Include this in your root component (app.rs) for global mobile utilities

MOBILE_BUTTON_STYLES

Mobile-optimized button styles with proper touch targets

MOBILE_INPUT_STYLES

Mobile-optimized form input styles

MOBILE_PANEL_STYLES

Styles for switchable panel content (used with mobile tabs)

MOBILE_RESIZER_STYLES

On mobile, hide desktop resizers entirely

MOBILE_TAB_BAR_STYLES

Reusable mobile tab bar styles - use for any tabbed interface on mobile

Functions

all_mobile_styles

All mobile styles combined - include this for a complete mobile solution

with_mobile_styles

Generate a complete mobile-ready style block for a page This combines the base mobile utilities with any page-specific styles