Hallmark's Mobile Responsiveness Non-Negotiables: 7 Hard Rules That Abort the Build

Hallmark treats mobile responsiveness as a hard floor—every page must pass seven strict non-negotiables including four mandated viewport checks, zero horizontal scroll tolerance, and unwrappable clickable text, or the build aborts immediately.

The Hallmark project (Nutlope/hallmark) codifies mobile responsiveness as a gatekeeping phase in its build pipeline. According to skills/hallmark/references/responsive.md, every emitted page undergoes a slop-test phase that validates specific CSS and layout constraints at defined breakpoints. These rules are exposed to the build system via skills/hallmark/SKILL.md at line 54 and enforced both automatically by the test suite and manually by developers.

The Four Mandated Viewport Gates

Hallmark requires visual validation at exactly four CSS pixel widths: 320 px, 375 px, 414 px, and 768 px. A layout failure at any of these widths aborts the build. This rule appears in the Mobile—non-negotiable section of responsive.md and serves as the foundation for all subsequent gate checks.

Layout and Overflow Constraints

Zero Horizontal Scroll (Gate 34)

The html and body elements must carry overflow-x: clip. The specification explicitly forbids overflow-x: hidden, which can fail in certain mobile browsers. This gate is documented at lines 9–13 of responsive.md.

html,
body {
  overflow-x: clip; /* never hidden */
}

Image Grid Integrity (Gate 50)

Grid tracks containing images cannot rely on bare 1fr units. They must use minmax(0, 1fr) to prevent overflow when images exceed track boundaries. This constraint appears at line 11 of the responsive reference.

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.grid img {
  width: 100%;
  height: auto;
}

Text and Navigation Rules

Unwrappable Clickable Text (Gate 49)

Buttons, primary navigation links, footer links, breadcrumbs, tabs, and CTAs must remain on a single line from 320 px up to 1920 px. The remediation hierarchy is strict: first shorten the label, then apply white-space: nowrap, then hide low-priority items, and finally collapse into a sheet or menu.

.btn,
.nav__link,
.foot__link,
.cta {
  white-space: nowrap;
}

Header Word Breaking (Gate 51)

Display headers must accommodate long words without breaking layout. The required declaration pair is overflow-wrap: anywhere combined with min-width: 0, documented at lines 13–14.

h2 {
  overflow-wrap: anywhere;
  min-width: 0;
}

Section Head Collapse (Gate 52)

Every theme variant must provide a mobile rule that forces section headings into a single column. This requirement appears at lines 14–15 of responsive.md and ensures structural integrity on narrow screens, often implemented via media queries that hide rails and activate sheet toggles.

@media (max-width: 40rem) {
  .nav__rail { display: none; }
  .nav__sheet-toggle { display: grid; }
}

Interaction Stability

No Scroll-Jump on Radio Tabs (Gate 53)

Interactive radio tabs must not trigger viewport jumps on click. Implementations keep radios in normal document flow or guard focus with focus({ preventScroll: true }), as noted at lines 15–16 of the reference file.

Enforcement and Test Artifacts

These non-negotiables are flagged during the slop-test phase according to skills/hallmark/SKILL.md at line 54. Concrete utilities reside in site/css/components.css (e.g., .spec__viz--responsive), while passing examples appear in site/_tests/*/output.css artifacts.

Summary

• Hallmark validates four specific viewports: 320 px, 375 px, 414 px, and 768 px.
• overflow-x: clip is mandatory on html and body elements; hidden is prohibited.
• Clickable text must stay single-line from 320 px to 1920 px using a defined fix hierarchy.
• Image grids require minmax(0, 1fr) to prevent overflow.
• Headers need overflow-wrap: anywhere and min-width: 0 for long words.
• Section heads must collapse to single columns on mobile.
• Radio tabs must prevent scroll jumps via focus({ preventScroll: true }) or normal flow.

Frequently Asked Questions

What happens if a page fails one of the four viewport checks?

The build aborts immediately. Hallmark treats these checks as hard gates, meaning any horizontal overflow, wrapping clickable text, or scroll jump at 320 px, 375 px, 414 px, or 768 px prevents deployment.

Why does Hallmark require overflow-x: clip instead of hidden?

The clip value provides more consistent behavior across mobile browsers and prevents subtle scrolling issues that hidden can trigger on iOS Safari and Chrome mobile. This distinction is codified at gate 34 in responsive.md.

How does Hallmark handle long navigation labels that exceed viewport width?

Developers must follow a strict hierarchy: first shorten the label text, then apply white-space: nowrap, then hide low-priority items, and finally collapse the navigation into a sheet or menu. Wrapping is never permitted.

Where are these rules implemented in the codebase?

The canonical rules live in skills/hallmark/references/responsive.md, exposed to the build pipeline via skills/hallmark/SKILL.md at line 54, with concrete CSS utilities in site/css/components.css and verified test artifacts in site/_tests/*/output.css.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}