Audit: Breakpoints Migration to min-width

Why migrate to min-width?

The min-width approach (mobile-first) is the industry standard for responsive design. Instead of overriding desktop styles downward, we build from the smallest viewport up. This results in cleaner, more predictable stylesheets and aligns with how browsers render content by default.

This audit covers every step required to complete the migration safely.

---

1. Update breakpoint variables

Start by switching the viewport strategy in your $vars file:

$viewport-type: min-width;

Then update the breakpoint values. Since min-width is inclusive (applies at that exact pixel and above), each value needs to be incremented by 1px compared to the old max-width thresholds. Remove $mobile and add the new $wide breakpoint:

$all: 0;
$tablets: 581px;
$tabletm: 811px;
$tabletl: 1025px;
$laptop: 1301px;
$desktop: 1571px;
$wide: 1701px;

Make sure to also check and update the Global Components version before proceeding.

---

2. Global renaming and structural updates

Because the breakpoint names shift upward, a global search-and-replace is necessary. The order matters — always start from the largest breakpoint and work down to avoid accidental double-replacements:

1. desktop → wide
2. laptop → desktop
3. tabletl → laptop
4. tabletm → tabletl
5. tablets → tabletm
6. mobile → tablets

Apply these renames across:

• Foundations (base layout tokens)
• Utilities (helper classes)
• Global Components vars (shared component variables)

After renaming, ensure the breakpoint map is ordered from smallest to largest:

$offset-breakpoints: (
    all: $all,
    tablets: $tablets,
    tabletm: $tabletm,
    tabletl: $tabletl,
    laptop: $laptop,
    desktop: $desktop,
    wide: $wide,
);

---

3. Module-level updates

Go through each module individually, updating both HTML and SCSS files:

• Replace any remaining old breakpoint references.
• Reverse media-query logic where needed (conditions that previously used max-width now use min-width).
• Update the sizes attribute on responsive images — these values must reflect the new min-width breakpoints so the browser selects the correct source.

Prepare a list of all modules and pages with their testing URLs before starting. Use a spreadsheet to track progress.

---

4. Testing

Once all modules are updated:

• Test every page and module using the prepared URL list.
• Validate at each breakpoint boundary — pay special attention to layout shifts, spacing inconsistencies, and responsive image rendering.
• Check both just below and just above each breakpoint value to confirm correct behavior.

---

5. Design review

After development testing is complete:

• Share the updated build with the Design team.
• They should perform a final visual pass to catch any layout, spacing, or breakpoint-related issues that may have slipped through.
• Only close the task once Design has signed off.

---

Quick-reference checklist

In the task card, copy each item independently so you or the person responsible can mark them off one by one. This way we make sure nothing gets lost.

• Global Components version updated
• $viewport-type set to min-width
• Breakpoint values incremented by 1px
• $mobile removed, $wide added
• Global rename completed (biggest → smallest order)
• Foundations, utilities, and global component vars updated
• Module-level HTML and SCSS updated
• Responsive image sizes attributes updated
• All pages tested across breakpoints
• Design review completed and approved