ipad-pro-design

iPad Pro 12.9" Design Skill

Comprehensive CSS and UX patterns for building educational web applications optimized for iPad Pro 12.9" (M1/M2/M4). This skill integrates with the project's Utopia fluid scales and web components architecture.

Related Skills

utopia-fluid-scales : Fluid typography and spacing tokens (cqi-based)
utopia-container-queries : Container setup for fluid scales
web-components : Component architecture patterns
ux-accessibility : Focus management and WCAG compliance
ux-animation-motion : Animation timing and reduced motion
animejs-v4 : Hardware-accelerated animations

iPad Pro 12.9" Technical Specifications

Display Specifications

Property Value

Screen Resolution 2732 x 2048 pixels

Points Resolution 1366 x 1024 points

Device Pixel Ratio 2x (@2x Retina)

PPI 264 pixels per inch

Display Type Liquid Retina XDR

Refresh Rate ProMotion 24-120Hz adaptive

Color P3 wide color gamut

Peak Brightness 1600 nits HDR, 1000 nits full-screen

Viewport Calculations

CSS Pixels (Landscape): 1366 x 1024 CSS Pixels (Portrait): 1024 x 1366 Device Pixels (Landscape): 2732 x 2048 Device Pixels (Portrait): 2048 x 2732

Safe Areas

Edge Safe Inset (Points)

Top (Portrait, no notch) 24pt status bar

Top (Landscape, no notch) 24pt status bar

Bottom (all orientations) 20pt home indicator

Left/Right (Landscape) 0pt (no notch on 12.9")

Viewport Configuration

Required Meta Tag

Attribute Purpose

width=device-width

Match CSS viewport to device width

initial-scale=1

Prevent default zoom, 1:1 scale

viewport-fit=cover

Extend content to screen edges (enables safe area insets)

AVOID These Viewport Settings

<meta name="viewport" content="... user-scalable=no"> <meta name="viewport" content="... maximum-scale=1">

<meta name="viewport" content="width=1024">

PWA Optimizations

<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<meta name="apple-mobile-web-app-title" content="Fantasy Phonics">

<meta name="theme-color" content="#252119">

Safe Area Handling

CSS Environment Variables

Safari on iPadOS provides safe area values via env() :

:root { /* Safe area fallbacks for non-Safari browsers */ --safe-area-inset-top: env(safe-area-inset-top, 0px); --safe-area-inset-right: env(safe-area-inset-right, 0px); --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); --safe-area-inset-left: env(safe-area-inset-left, 0px); }

Applying Safe Areas

/* Full-screen layout with safe areas */ .app-container { padding-top: var(--safe-area-inset-top); padding-right: var(--safe-area-inset-right); padding-bottom: var(--safe-area-inset-bottom); padding-left: var(--safe-area-inset-left); }

/* Fixed bottom navigation */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; padding-bottom: calc(var(--space-s) + var(--safe-area-inset-bottom)); }

/* Fixed header */ .header { position: fixed; top: 0; left: 0; right: 0; padding-top: calc(var(--space-s) + var(--safe-area-inset-top)); }

Home Indicator Avoidance

The home indicator appears at the bottom of screen. Avoid placing interactive elements in this zone:

.interactive-bottom-zone { /* Ensure 20pt clearance from bottom */ margin-bottom: max(20px, var(--safe-area-inset-bottom)); }

Touch Target Optimization

Apple Human Interface Guidelines

Guideline Value Project Token

Minimum touch target 44pt x 44pt --min-touch-target

Recommended touch target 48pt x 48pt Use --space-xl

Child-friendly target 56pt+ Use --space-2xl

Spacing between targets 8pt minimum Use --space-2xs

Touch Target Patterns

/* Standard touch target (adults) */ .touch-target { min-width: var(--min-touch-target); min-height: var(--min-touch-target); }

/* Large touch target (children 3-8 years) / .touch-target-child { min-width: var(--space-2xl); / 72-80px */ min-height: var(--space-2xl); }

/* Extra-large target (toddlers/accessibility) / .touch-target-xl { min-width: var(--space-3xl); / 108-120px */ min-height: var(--space-3xl); }

/* Expanded hit area for small visual elements / .touch-expand::before { content: ''; position: absolute; inset: -8px; / Or for child-friendly: */ inset: calc(-1 * var(--space-s)); }

Button Sizing for Children

/* Primary game button - child-friendly */ .game-button { min-width: var(--space-3xl); min-height: var(--space-2xl); padding: var(--space-m) var(--space-xl); font-size: var(--step-1); border-radius: var(--space-s); }

/* Card selection - large tap area */ .word-card { min-width: 120px; min-height: 120px; padding: var(--space-m); }

Media Queries for iPad Pro

Device-Specific Targeting

/* iPad Pro 12.9" Landscape / @media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) { / Landscape-specific styles */ }

/* iPad Pro 12.9" Portrait / @media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) { / Portrait-specific styles */ }

/* iPad Pro 12.9" - Any orientation / @media screen and (min-width: 1024px) and (max-width: 1366px) { / Tablet-specific styles */ }

/* High-DPI screens (Retina) / @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { / High-DPI assets and adjustments */ }

Pointer and Hover Detection

iPadOS supports both touch and Apple Pencil/trackpad. Detect input type:

/* Touch-only devices / @media (hover: none) and (pointer: coarse) { .tooltip-trigger:hover .tooltip { / Don't show hover tooltips on touch */ display: none; } }

/* Devices with fine pointer (trackpad/mouse) / @media (hover: hover) and (pointer: fine) { .interactive:hover { / Show hover states */ background: var(--color-hover-overlay); } }

/* Devices with coarse pointer (finger/stylus) / @media (pointer: coarse) { .interactive { / Larger touch targets */ min-height: var(--min-touch-target); min-width: var(--min-touch-target); } }

Container Queries (Preferred)

Container queries are preferred over viewport queries for component responsiveness:

/* Set container on parent */ .game-board { container-type: inline-size; }

/* Component responds to container, not viewport */ @container (inline-size > 800px) { .word-card { flex-direction: row; padding: var(--space-l); } }

@container (inline-size <= 600px) { .word-card { flex-direction: column; padding: var(--space-m); } }

ProMotion (120Hz) Animation Optimization

Hardware Acceleration

Safari on iPadOS uses hardware acceleration for specific CSS properties. Always animate these properties for smooth 120Hz performance:

Property Hardware Accelerated

transform

Yes - always use

opacity

Yes - always use

filter

Yes (simple filters)

backdrop-filter

Yes

will-change

Promotes to GPU layer

Property NOT Hardware Accelerated

width , height

Triggers layout

margin , padding

Triggers layout

top , left , right , bottom

Triggers layout

border-width

Triggers layout

font-size

Triggers layout

box-shadow

CPU intensive

Animation Timing for 120Hz

At 120Hz, each frame is 8.33ms. Animation timing feels different:

:root { /* Snappy micro-interactions / --duration-instant: 100ms; / 12 frames at 120Hz / --duration-quick: 150ms; / 18 frames at 120Hz / --duration-normal: 200ms; / 24 frames at 120Hz / --duration-slow: 350ms; / 42 frames at 120Hz */

/* Ease curves for natural feel / --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); / Decelerate / --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); / Standard / --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); / Overshoot */ }

CSS Transitions (ProMotion Optimized)

.card { /* Use transform instead of position */ transform: translateY(0) scale(1); opacity: 1; transition: transform var(--duration-normal) var(--ease-out), opacity var(--duration-quick) var(--ease-out); }

.card:active { /* Press feedback - instant response */ transform: scale(0.97); transition-duration: var(--duration-instant); }

.card.selected { transform: translateY(-8px) scale(1.02); }

Anime.js 4.0 for Complex Animations

Use Anime.js for multi-property animations:

import { animate, createSpring } from 'animejs';

// Check reduced motion preference first const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

function cardSelectAnimation(element) { if (prefersReducedMotion) { element.classList.add('selected'); return; }

return animate(element, { scale: [1, 1.05, 1], translateY: [0, -8, -4], duration: 250, ease: 'outBack' }); }

// Spring physics for natural feel function dragDropAnimation(element) { return animate(element, { x: 0, y: 0, ease: createSpring({ stiffness: 400, damping: 25 }), }); }

will-change Usage

Use will-change sparingly - only on elements that will animate:

/* Apply before animation starts */ .card { will-change: transform; }

/* Remove after animation completes (via JavaScript) */ .card.animation-complete { will-change: auto; }

// Anime.js lifecycle hooks animate(element, { scale: [1, 1.1, 1], onBegin: () => { element.style.willChange = 'transform'; }, onComplete: () => { element.style.willChange = 'auto'; } });

Touch Interaction Patterns

Pointer Events (Unified API)

Use Pointer Events API for unified touch/mouse/stylus handling:

class DraggableCard extends HTMLElement { #isDragging = false; #startX = 0; #startY = 0;

connectedCallback() { this.addEventListener('pointerdown', this); this.addEventListener('pointermove', this); this.addEventListener('pointerup', this); this.addEventListener('pointercancel', this);

// Prevent default touch behaviors
this.style.touchAction = 'none';

}

disconnectedCallback() { this.removeEventListener('pointerdown', this); this.removeEventListener('pointermove', this); this.removeEventListener('pointerup', this); this.removeEventListener('pointercancel', this); }

handleEvent(e) { switch (e.type) { case 'pointerdown': this.#handlePointerDown(e); break; case 'pointermove': this.#handlePointerMove(e); break; case 'pointerup': case 'pointercancel': this.#handlePointerUp(e); break; } }

#handlePointerDown(e) { this.#isDragging = true; this.#startX = e.clientX; this.#startY = e.clientY;

// Capture pointer for reliable tracking
this.setPointerCapture(e.pointerId);

// Visual feedback
this.setAttribute('aria-grabbed', 'true');

}

#handlePointerMove(e) { if (!this.#isDragging) return;

const deltaX = e.clientX - this.#startX;
const deltaY = e.clientY - this.#startY;

// Direct transform for 120Hz smoothness - no animate() during drag
this.style.transform = `translate(${deltaX}px, ${deltaY}px)`;

}

#handlePointerUp(e) { if (!this.#isDragging) return;

this.#isDragging = false;
this.releasePointerCapture(e.pointerId);
this.removeAttribute('aria-grabbed');

// Animate back with physics
this.#animateDrop();

}

#animateDrop() { animate(this, { x: 0, y: 0, duration: 300, ease: 'outBack' }); } }

CSS touch-action Control

/* Allow vertical scroll only */ .scrollable-list { touch-action: pan-y; }

/* Disable all touch behaviors (for custom drag) */ .draggable { touch-action: none; }

/* Allow pinch-zoom but not pan */ .zoomable-image { touch-action: pinch-zoom; }

/* Default - allow all / .interactive { touch-action: manipulation; / Disables double-tap zoom delay */ }

Tap vs Long-Press

class TappableElement extends HTMLElement { #longPressTimeout = null; #longPressTriggered = false; static LONG_PRESS_DURATION = 500; // ms

connectedCallback() { this.addEventListener('pointerdown', this); this.addEventListener('pointerup', this); this.addEventListener('pointercancel', this); }

handleEvent(e) { switch (e.type) { case 'pointerdown': this.#longPressTriggered = false; this.#longPressTimeout = setTimeout(() => { this.#longPressTriggered = true; this.#handleLongPress(e); }, TappableElement.LONG_PRESS_DURATION); break;

  case 'pointerup':
    clearTimeout(this.#longPressTimeout);
    if (!this.#longPressTriggered) {
      this.#handleTap(e);
    }
    break;

  case 'pointercancel':
    clearTimeout(this.#longPressTimeout);
    break;
}

}

#handleTap(e) { this.dispatchEvent(new CustomEvent('tap', { bubbles: true, detail: { x: e.clientX, y: e.clientY } })); }

#handleLongPress(e) { // Haptic feedback if available if (navigator.vibrate) navigator.vibrate(10);

this.dispatchEvent(new CustomEvent('longpress', {
  bubbles: true,
  detail: { x: e.clientX, y: e.clientY }
}));

} }

Hover State Handling

iPadOS triggers :hover on first tap, then :active on second. Handle this:

/* Default: no hover effects for touch / @media (hover: none) { .button:hover { / Reset hover styles for touch devices */ background: var(--button-bg); } }

/* Only apply hover for devices that support it */ @media (hover: hover) { .button:hover { background: var(--color-hover-overlay); transform: translateY(-1px); } }

/* Active state works on both */ .button:active { background: var(--color-active-overlay); transform: scale(0.98); }

Layout Patterns for 12.9" Display

Grid for Large Tablets

/* Game board - uses full width */ .game-board { container-type: inline-size; display: grid; gap: var(--grid-gutter); padding: var(--space-m); }

/* Landscape: 4 columns */ @container (inline-size >= 1024px) { .card-grid { grid-template-columns: repeat(4, 1fr); } }

/* Portrait: 3 columns */ @container (inline-size >= 768px) and (inline-size < 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

/* Small containers: 2 columns */ @container (inline-size < 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }

Avoiding "Blown-Up Phone" Layouts

/* DON'T: Single column on large screens / .page-content { max-width: 100%; / Content stretches uncomfortably */ }

/* DO: Constrain content width, use whitespace / .page-content { max-width: var(--grid-max-width); / 1240px */ margin-inline: auto; padding-inline: var(--space-l); }

/* DO: Multi-column layouts on large screens / .main-layout { display: grid; grid-template-columns: 1fr 2fr 1fr; / Sidebar | Main | Aside */ gap: var(--grid-gutter); }

Orientation Change Handling

/* Landscape-specific adjustments */ @media (orientation: landscape) { .game-ui { flex-direction: row;

.sidebar {
  width: 280px;
  flex-shrink: 0;
}

.main-content {
  flex: 1;
}

} }

/* Portrait-specific adjustments */ @media (orientation: portrait) { .game-ui { flex-direction: column;

.sidebar {
  width: 100%;
  height: auto;
}

.main-content {
  flex: 1;
}

} }

JavaScript Orientation Detection

class OrientationAware extends HTMLElement { #mediaQuery = window.matchMedia('(orientation: landscape)');

connectedCallback() { this.#mediaQuery.addEventListener('change', this); this.#updateOrientation(); }

disconnectedCallback() { this.#mediaQuery.removeEventListener('change', this); }

handleEvent(e) { if (e.type === 'change') { this.#updateOrientation(); } }

#updateOrientation() { const isLandscape = this.#mediaQuery.matches; this.setAttribute('data-orientation', isLandscape ? 'landscape' : 'portrait');

this.dispatchEvent(new CustomEvent('orientation-change', {
  bubbles: true,
  detail: { isLandscape }
}));

} }

Child-Friendly UX Patterns

Design Principles for Children (Ages 3-8)

Principle Implementation

Large tap targets Minimum 56pt (prefer 72pt+)

Clear visual feedback Immediate bounce/glow on tap

Simple navigation Max 2-3 choices visible

Forgiving interactions Accept imprecise taps, allow undo

Consistent layout Same button positions across screens

No time pressure Avoid timers for young children

Positive reinforcement Celebrate success, gentle error handling

Visual Feedback for Children

// Immediate, exaggerated feedback function childFriendlyTapFeedback(element) { // Instant scale down animate(element, { scale: 0.9, duration: 80, ease: 'linear' }).then(() => { // Bouncy return animate(element, { scale: [0.9, 1.15, 1], duration: 300, ease: 'outBack' }); }); }

// Success celebration function celebrateSuccess(element) { return animate(element, { scale: [1, 1.3, 1], rotate: [0, -8, 8, -4, 4, 0], duration: 500, ease: 'outElastic(1, 0.5)' }); }

// Gentle error shake (not scary) function gentleErrorShake(element) { return animate(element, { x: [0, -4, 4, -2, 2, 0], duration: 300, ease: 'linear' }); }

Progressive Disclosure

<nav class="game-nav" aria-label="Game navigation"> <button class="nav-item nav-item--current" aria-current="page"> <span class="icon" aria-hidden="true">play_arrow</span> <span class="label">Play</span> </button>

<button class="nav-item" hidden data-requires-progress="5"> <span class="icon" aria-hidden="true">settings</span> <span class="label">Settings</span> </button> </nav>

Forgiving Touch Zones

/* Extra-large interactive cards for children */ .word-card-child { min-width: 140px; min-height: 140px; padding: var(--space-l);

/* Expanded hit area beyond visual bounds */ position: relative; }

.word-card-child::before { content: ''; position: absolute; inset: calc(-1 * var(--space-m)); /* 27-30px expansion */ }

/* Wide spacing between cards to prevent mis-taps / .card-grid-child { gap: var(--space-l); / 36-40px */ }

Audio Feedback (Optional)

class AudioFeedback { #audioContext = null; #enabled = true;

constructor() { // Initialize on first user interaction document.addEventListener('pointerdown', () => { if (!this.#audioContext) { this.#audioContext = new AudioContext(); } }, { once: true }); }

playTap() { if (!this.#enabled || !this.#audioContext) return; this.#playTone(800, 50); // Short, high beep }

playSuccess() { if (!this.#enabled || !this.#audioContext) return; this.#playMelody([523, 659, 784], 100); // C-E-G chord }

playError() { if (!this.#enabled || !this.#audioContext) return; this.#playTone(200, 150); // Low, longer tone }

#playTone(frequency, duration) { const oscillator = this.#audioContext.createOscillator(); const gainNode = this.#audioContext.createGain();

oscillator.connect(gainNode);
gainNode.connect(this.#audioContext.destination);

oscillator.frequency.value = frequency;
gainNode.gain.setValueAtTime(0.1, this.#audioContext.currentTime);
gainNode.gain.exponentialRampToValueAtTime(0.01, this.#audioContext.currentTime + duration / 1000);

oscillator.start();
oscillator.stop(this.#audioContext.currentTime + duration / 1000);

}

#playMelody(frequencies, noteDuration) { frequencies.forEach((freq, i) => { setTimeout(() => this.#playTone(freq, noteDuration), i * noteDuration); }); }

toggle(enabled) { this.#enabled = enabled; } }

Safari/WebKit Considerations

Supported CSS Features (iPadOS 17+)

Feature Support Notes

Container Queries Full Use cqi units

:has() selector Full Use for complex states

Subgrid Full Use for nested grids

view-transitions

Partial Same-document only

field-sizing

Yes Auto-sizing textareas

@layer

Full CSS cascade layers

color-mix()

Full Dynamic color blending

Backdrop filter Full With -webkit- prefix

Safari-Specific CSS

/* Backdrop blur - requires prefix */ .modal-backdrop { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Prevent iOS font boosting */ body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Smooth scrolling with momentum */ .scrollable { -webkit-overflow-scrolling: touch; overflow-y: auto; }

/* Hide scrollbar but keep functionality */ .scrollable::-webkit-scrollbar { display: none; }

Known Safari Limitations

Issue Workaround

No popover attribute Use <dialog> or custom implementation

Limited Fullscreen API Works in standalone PWA mode only

No Web MIDI Use Web Audio API instead

IndexedDB storage limits 1GB quota, request via Storage API

No beforeinstallprompt

Manual PWA install instructions

PWA Capabilities

// manifest.json { "name": "Fantasy Phonics", "short_name": "Phonics", "display": "standalone", "orientation": "any", "background_color": "#252119", "theme_color": "#252119", "icons": [ { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "/", "scope": "/" }

Performance Checklist

Rendering Performance

Use transform and opacity for animations (GPU accelerated)
Apply will-change before animations, remove after
Use contain: layout on fixed-size containers
Avoid animating during scroll (use scroll-behavior: smooth instead)
Batch DOM reads and writes (avoid layout thrashing)

Touch Performance

Use touch-action: manipulation to remove 300ms tap delay
Apply pointer-events: none to elements during drag
Use pointerdown /pointermove /pointerup (not touch events)
Set passive: true on scroll/touch listeners when not preventing default

Memory Management

Clean up event listeners in disconnectedCallback
Cancel animations when component unmounts
Use AbortController for cancellable fetch requests
Avoid creating objects in animation loops

Asset Optimization

Use srcset for images at 1x and 2x resolutions
Lazy load images below the fold with loading="lazy"
Preload critical fonts with <link rel="preload">
Use WebP/AVIF images where supported

Quick Reference

Viewport & Safe Areas

/* Essential meta tag */ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

/* Safe area padding */ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

Touch Targets

/* Adults / min-width: 44px; min-height: 44px; / Children */ min-width: 72px; min-height: 72px;

Media Queries

/* iPad Pro 12.9" specific */ @media (min-width: 1024px) and (max-width: 1366px) { }

/* Touch-only */ @media (hover: none) and (pointer: coarse) { }

/* Orientation */ @media (orientation: landscape) { }

Animation Timing (120Hz)

--duration-instant: 100ms; /* Tap feedback / --duration-quick: 150ms; / State changes / --duration-normal: 200ms; / Transitions */

Integration with Project Tokens

/* Use Utopia space tokens for consistent sizing / .touch-target-child { min-width: var(--space-2xl); / 72-80px / min-height: var(--space-2xl); padding: var(--space-m); / 27-30px / gap: var(--space-s); / 18-20px */ }

/* Use Utopia type tokens for readable text / .game-label { font-size: var(--step-1); / 21.6-25px */ }

Files

This skill references and integrates with:

css/styles/accessibility.css
Touch target tokens, focus rings
css/styles/space.css
Utopia spacing scale
css/styles/typography.css
Utopia type scale
css/styles/transitions.css
Animation timing tokens

ipad-pro-design

Safety Notice

Copy this and send it to your AI assistant to learn

Source Transparency

Related Skills

animejs-v4

webgpu-canvas

web-components-architecture

audio-design