CREATE SOMETHING

Philosophy

Mobile-first is not just a technique—it's a mindset. By starting with constraints, we identify what truly matters. What survives the smallest screen is essential; everything else is enhancement.

"The absence of limitations is the enemy of art." — Orson Welles

Breakpoints

Canon uses five breakpoints aligned with common device widths. Always use min-width queries for mobile-first progressive enhancement.

Breakpoint	Width	Typical Use	Columns
`Default`	< 640px	Mobile phones	1
`sm`	640px+	Large phones, small tablets	1-2
`md`	768px+	Tablets	2
`lg`	1024px+	Laptops, desktops	2-3
`xl`	1280px+	Large desktops	3-4
`2xl`	1536px+	Extra large screens	4+

breakpoints.css
 /* Canon Breakpoints */
: root {
  --breakpoint-sm: 640px;   /* Small devices */
  --breakpoint-md: 768px;   /* Tablets */
  --breakpoint-lg: 1024px;  /* Desktops */
  --breakpoint-xl: 1280px;  /* Large screens */
  --breakpoint-2xl: 1536px; /* Extra large */
}

/* Mobile-first media queries */
@media (min-width: 640px) { /* sm */ }
@media (min-width: 768px) { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
@media (min-width: 1536px) { /* 2xl */ }

Mobile-First Pattern

Start with styles for the smallest screen, then add complexity as viewport size increases.

mobile-first.css
 /* Start with mobile styles */
.card {
  padding: var(--space-sm);
  flex-direction: column;
}

/* Then add larger screen styles */
@media (min-width: 768px) {
  .card {
    padding: var(--space-md);
    flex-direction: row;
  }
}

@media (min-width: 1024px) {
  .card {
    padding: var(--space-lg);
  }
}

Resize browser to see layout change

Grid Patterns

CSS Grid enables powerful responsive layouts with minimal code.

grids.css
 /* Responsive grid pattern */
.grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Or use auto-fit for fluid grids */
.fluid-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(
    auto-fit,
    minmax(280px, 1fr)
  );
}

Fluid grid with auto-fit

Fluid Typography

Canon's typography tokens use clamp() for smooth scaling between breakpoints—no media queries needed.

typography.css
 /* Fluid typography using clamp() */
h1 {
  font-size: var(--text-display);
  /* Expands to: clamp(2.5rem, 4vw + 1.5rem, 5rem) */
}

h2 {
  font-size: var(--text-h1);
  /* Expands to: clamp(2rem, 3vw + 1rem, 3.5rem) */
}

/* Line lengths for readability */
.prose {
  max-width: 65ch;
}

Heading scales smoothly

Body text maintains optimal line length regardless of viewport width. The 65-character limit ensures comfortable reading on any device.

Containers

Containers center content and apply responsive horizontal padding.

container.css
 /* Container with responsive padding */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-sm);
}

@media (min-width: 640px) {
  .container {
    padding: 0 var(--space-md);
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 var(--space-lg);
  }
}

max-width: 1200px

Best Practices

Do

Start with mobile layout, enhance upward
Use relative units (rem, em, %) for sizing
Test on real devices, not just resized browser
Use fluid typography with clamp()
Set touch targets to at least 44x44px
Consider thumb zones for mobile interaction

Don't

Use max-width queries (desktop-first)
Hide content on mobile that exists on desktop
Rely on hover states for critical interactions
Use fixed pixel widths for containers
Assume landscape orientation
Ignore high-density displays

Touch Considerations

Mobile interfaces require special attention to touch interaction.

Target Size

Minimum 44x44px for tap targets. Smaller targets cause frustration and errors on touch devices.

Too small

44px minimum

Spacing

Add adequate spacing between interactive elements to prevent accidental taps.

Thumb Zone

Place primary actions within easy thumb reach. The bottom of the screen is most accessible for one-handed use.

Easy

Stretch

Hard

Testing Checklist

Verify responsive behavior across devices and contexts.

Content readable at 320px width (iPhone SE)
No horizontal scrolling at any breakpoint
Touch targets at least 44x44px
Forms usable on mobile (appropriate keyboards)
Images scale without breaking layout
Text remains readable (16px minimum)
Contrast maintained in all lighting conditions
Landscape orientation works correctly
High-density displays show crisp graphics