Adaptive design and fracture points

1) Principles

1. Content-first: Layouts are built from tasks and content, not from "popular" widths.
2. Mobile-first: we start with a strict simple option and get more complicated as the width/input capabilities grow.
3. Progressive enhancement: basic UX works without JS/animations; improvements are connected according to the conditions.
4. Consistency: same patterns - same behavior on all breakpoints.
5. Performance-aware: Images, grids, and scripts adapt in weight and complexity.

2) Fracture points (breakpoints)

We choose according to the data of real devices and by changing the pattern (columns/navigation/typography).

Recommended set (reference)

• We enter a breakpoint only when changing the structure (for example, 1→2 the columns of cards, the appearance of a sidebar).
• Local breaks within a component (container requests) are allowed.

3) Container requests vs media requests

When media queries' @ media ': changes the layout of the entire page (navigation, template).
When container '@ container': the card/widget must adjust to its available width (the component is independent of the page).

css
/ Include container rating for unit/
.widget { container-type: inline-size; }

/ Inside - we adapt the card to the width of the container/
@container (min-width: 520px) {
.card { grid-template-columns: 1fr 1fr; }
}

Use media for page frame + containers for components.

4) Typography: fluid + steps

Combine 'clamp ()' and steps on breakpoints.

css
:root {
/ Basic fluid headset/
--fs-body: clamp(15px, 1. 2vw + 0. 2rem, 18px);
--fs-h2:  clamp(20px, 1. 6vw + 0. 4rem, 24px);
}
body { font-size: var(--fs-body); line-height: 1. 55; }
h2  { font-size: var(--fs-h2); line-height: 1. 3; }
@media (min-width: 1200px) {
h2 {letter-spacing: .005em; }/fine tuning on LG +/
}

• Line length 45-80 characters (sidebars 36-60).
• Magnitude steps are multiples of 4/8-pt; line-height is stable in breakpoints.

5) Grids and modules

At the section level - CSS Grid (columns, areas); inside - Flex.
Component heights are multiples of baseline (e.g. 40/48/56 px).
We have 2 density presets: Comfort (reading/dashboards) and Compact (tables/pro).

css
.container {
display: grid; gap: 24px;
grid-template-columns: repeat(12, minmax(0,1fr));
max-width: 1280px; margin: 0 auto; padding: 0 16px;
}
@media (max-width: 1199px) {.container { grid-template-columns: repeat(8,1fr); gap: 20px; }}
@media (max-width: 839px) {.container { grid-template-columns: repeat(6,1fr); gap: 16px; }}
@media (max-width: 599px) {.container { grid-template-columns: repeat(4,1fr); }}

6) Images and media

html
<img src="card-640. jpg"
srcset="card-640. jpg 640w, card-960. jpg 960w, card-1280. jpg 1280w"
sizes="(min-width:1200px) 33vw, (min-width:840px) 50vw, 100vw"
alt = "Description">

css
.media { aspect-ratio: 16/9; object-fit: cover; }

For backgrounds - 'image-set ()' and lazy-loading.
Text in the image - only on the plate/overlay; contrast ≥ AA.

7) Navigation and responsive patterns

XS/SM: bottom-nav or hamburger, notable CTA; hidden search expands on top.
MD: persistent-sidebar/mega-menu appears.
LG/XL: two levels of navigation, quick filters, bread crumbs.

Behavior: elements do not "move" randomly - always one of the previously described schemes.

8) Input: hover/touch/keyboard

css
@ media (hover: hover) and (pointer: fine) {/hover effects/}
@ media (hover: none), (pointer: coarse) {/touch-patterns/}
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

• No critical content "only in hover."
• Click areas: ≥ 44 × 44 (mobile) , ≥ 32 × 32 (desktop).
• The keyboard is supported on all breakpoints.

9) Safe zones and system cutouts

css
.page {
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
padding-bottom:max(16px, env(safe-area-inset-bottom));
}

10) Dark/light themes and contrast

Topics are independent of breakpoints: the goals of contrast are the same everywhere.
On XS, avoid "acid" accents; increase the lightness of links on a dark background.
Support for'prefers-color-scheme 'and manual switch.

11) Performance

Critical CSS - inline or via 'media = "print" '/preload strategy; JS load delayed.
Avoid layout-heavy animations on long lists; animate'opacity/transform '.
Lazy loading of pictures/widgets; skeleton instead of spinners.
Limit "heavy" shadows/filters on dozens of cards.

12) Design system tokens (example)

json
{
"breakpoints": { "xs": 360, "sm": 600, "md": 840, "lg": 1200, "xl": 1440 },
"container":  { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"columns":   { "xs": 4, "sm": 6, "md": 8, "lg": 12 },
"gutter":   { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"space":    { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32 }
}

css
:root {
--bp-sm: 600px; --bp-md: 840px; --bp-lg: 1200px; --bp-xl: 1440px;
--container-lg: 1152px;
}
@media (min-width: var(--bp-lg)) {
.container { max-width: var(--container-lg); }
}

13) Components workshop (container breaks)

css
.card { display: grid; gap: 12px; container-type: inline-size; }
.card__media { aspect-ratio: 4/3; }
@container (min-width: 420px) {
.card { grid-template-columns: 1fr 1. 2fr; align-items: center; }
.card__media { aspect-ratio: 16/9; }
}

• XS: stacked-view (label on the left, value on the right, in blocks).
• SM +: horizontal scrolling only with an excess of columns, fix the cap/first column.
• Numbers - tabular-nums, decimal alignment.

14) Localization and RTL

'dir = "rtl" '+': dir (rtl) 'to mirror icons/arrows/margins.
Translations can increase the length of lines by 20-30% - lay down the stock.
For some writings (for example, Georgian/Thai), increase the base size by 1 px.

15) The specifics of iGaming

Tournament/bonus cards: grid 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); CTA and conditions - in a permanent area.
Leaders/ratings: sticky hat/first column; on XS - stacked mode; numbers are monospaced.
Payment forms: on XS - single-column; on MD - 2 columns (field + explanation).

Responsible notifications (18 +, limits, risks): always visible on all breakpoints, AAA contrast, without "hidden in hover."

16) Anti-patterns

Fixed block widths instead of grid/columns.
"Break point per pixel": too many media requests → chaos.
Broken rhythm: different gutter/pitches in adjacent sections for no reason.
Critical text in an image without a die.
Content available only with hover (touch unreachable).
Animations of layout properties on long lists.

17) QA checklist

Mesh and containers

• Columns and gutter correspond to breakpoints; containers are centered.
• Components correctly "flow" 1→2→3 the column without breaking.

Typography

• Line length 45-80; fluid pins through 'clamp ()'.
• Text contrast matches WCAG in both themes.

Images

• Есть `srcset/sizes`, `aspect-ratio` и lazy-loading; no CLS.

Input and A11y

• Keyboard navigation; ': focus-visible' visible.
• hover alternative to touch; click areas ≥ 44 × 44.
• 'prefers-reduced-motion' supported.

Performance

• Only 'transform/opacity' is animated; severe effects are limited.
• Critical CSS/JS loads efficiently.

18) Documentation in the design system

"Responsive & Breakpoints": table of breakpoints, containers, columns and gutter.
Container Queries: examples of adaptive components.
"Fluid Type": 'clamp ()' formulas and scale presets.
"Navigation patterns": XS/SM/MD/LG/XL variants.
"Do/Don't" with short clips and CLS/LCP values.

Brief Summary

Adaptability is a strategy, not a set of chaotic media queries. Rely on content and device analytics, combine media queries with a mature grid and container queries, use'clamp () 'for typography, control images and performance, and support all input and A11y methods. So the interface remains predictable, fast and equally convenient on any screen.