Repository navigation
Device Frames and Responsive Design
DesignForge supports two frame configuration concepts:
- Standard presets: curated viewport dimensions grouped by platform, device family, and era.
- Custom frames: user-defined dimensions, optional aspect-ratio locking, a custom label, and optional device mockup.
Frame dimensions are logical viewport values; they should not be confused with physical display pixels or device pixel ratio. Keep units explicit in the UI and data model.
- Historical and modern iPhone viewports
- iPad and tablet viewports
- Samsung Galaxy smartphones, Fold/Flip devices, and tablets
- Desktop and laptop baselines, including HD, Full HD, QHD, ultrawide and 4K classes
The supplied device/frame specification contains the detailed dimensions and device-family labels. Maintain the preset catalog as versioned data rather than scattering dimensions throughout UI components. Review device names and measurements before release because the catalog spans multiple years and may need updates.
A custom frame should support:
- Exact width and height entry
- Optional aspect-ratio lock
- Portrait/landscape swap
- Custom name/label
- Background configuration
- Optional device mockup
- Save-to-user-preset action
- Validation of dimensions and supported bounds
When aspect ratio is locked, changing one dimension updates the other predictably. Invalid or unsupported values should be rejected with a clear message.
Responsive behavior should be represented by layout semantics—not just by manually resizing duplicated screenshots. The broader design requirements include:
- Constraints and resizing modes
- Auto layout with padding, gap, alignment and distribution
- Min/max width and height
- Breakpoint-aware layout where supported
- Fluid typography and responsive preview where supported
- Side-by-side viewport comparison and stress testing
The canvas, prototype player, and compiler should share the same layout contract. If a responsive feature is unsupported in an export target, report it explicitly.