Бейімделген дизайн және сыну нүктелері

1) Қағидаттар

1. Контент-first: орналасулар «танымал» ендерінен емес, тапсырмалар мен мазмұннан құрылады.
2. Mobile-first: қатал қарапайым нұсқадан бастаймыз және енінің/енгізу мүмкіндігінің өсуіне қарай қиындатамыз.
3. Progressive enhancement: базалық UX JS/анимациясыз жұмыс істейді; жақсарту шарттары бойынша қосылады.
4. Consistency: бірдей паттерндер - барлық брейк-пункттерде бірдей мінез-құлық.
5. Performance-aware: суреттер, торлар және скрипттер салмағы мен күрделілігі бойынша бейімделеді.

2) Сыну нүктелері (брейкпоинттер)

Нақты құрылғылардың деректері бойынша және паттернді (бағандарды/навигацияны/типографияны) ауыстыру бойынша таңдаймыз.

Ұсынылған жиынтық (бағдар)

• Брейкпоинт құрылым өзгерген кезде ғана енгізіледі (мысалы, 1 → 2 карточка бағаны, сайдбардың пайда болуы).
• Компонент ішіндегі жергілікті брейктерге (контейнерлік сұраулар) жол беріледі.

3) Контейнерлік сұраулар vs медиа сұраулар

'@media' медиа сұраулары: бүкіл беттің layout өзгереді (навигация, үлгі).
Контейнерлік '@container' болғанда: карточка/виджет өзінің қол жетімді ені бойынша реттелуі тиіс (компонент беттен тәуелсіз).

css
/ Включаем контейнерную оценку для блока /
.widget { container-type: inline-size; }

/ Внутри — адаптируем карточку по ширине контейнера /
@container (min-width: 520px) {
.card { grid-template-columns: 1fr 1fr; }
}

Беттің фреймы үшін медиа + компоненттер үшін контейнерлер байланысын пайдаланыңыз.

4) Баспаханалық: fluid + қадамдар

'clamp ()' және break point қадамдарын біріктіріңіз.

css
:root {
/ Базовая fluid-гарнитура /
--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; } / тонкая настройка на LG+ /
}

• Жолдың ұзындығы 45-80 белгі (сайдбарларда 36-60).
• Шама қадамдары 4/8-pt еселенген; line-height брейк пункттері бойынша тұрақты.

5) Торлар мен модульдер

Секциялар деңгейінде - CSS Grid (бағандар, аудандар); ішінде - Flex.
Компоненттердің биіктігі baseline еселенген (мысалы, 40/48/56 px).
Тығыздықтың 2 пресеті бар: Comfort (оқу/дашборд) және Compact (кесте/про).

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) Суреттер және медиа

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="Описание">

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

Өң үшін - 'image-set ()' және lazy-loading.
Суреттегі мәтін - тек плашкада/оверлекте; AA ≥ қарама-қарсылығы.

7) Навигация және responsive-паттерндер

XS/SM: bottom-nav немесе hamburger, көзге көрінетін CTA; жасырын іздеу үстінен ашылады.
MD: persistent-sidebar/mega-menu пайда болады.
LG/XL: екі навигация деңгейі, жылдам сүзгілер, нан ұнтақтары.

Мінез-құлық: элементтер хаотикалық түрде «ауыспайды» - әрқашан алдын ала сипатталған схемалардың бірі.

8) Енгізу: hover/touch/keyboard

css
@media (hover: hover) and (pointer: fine) { / hover-эффекты / }
@media (hover: none), (pointer: coarse)  { / touch-паттерны / }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

• Тек hover бағдарламасында сыни мазмұн жоқ.
• Басу аймағы: ≥ 44 × 44 (моб.) , ≥ 32 × 32 (десктоп).
• Пернетақта барлық брейк-пункттерде сақталады.

9) Қауіпсіз аймақтар және жүйелік ойықтар

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) Қараңғы/ашық тақырып және қарама-қарсылық

Тақырыптар брейкпоинттерден тәуелсіз: контрастың мақсаттары барлық жерде бірдей.
XS-де «қышқыл» акценттерден аулақ боламыз; қараңғы фонда сілтемелердің жарықтығын арттырамыз.
'prefers-color-scheme' және қолмен ауыстырып қосқышты қолдау.

11) Өнімділік

Сыни CSS - inline немесе 'media =' print ''/preload стратегиясы арқылы; JS жүктеуді кейінге қалдырыңыз.
Ұзын тізімдегі layout-ауыр анимациялардан аулақ болыңыз; 'opacity/transform' дегенді көрсетіңіз.
Суреттерді/виджеттерді жалқау жүктеу; spinner орнына skeleton.
Ондаған карточкадағы «ауыр» көлеңкелерді/сүзгілерді шектеңіз.

12) Дизайн-жүйе токендері (мысал)

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) Компоненттер практикумы (контейнерлік брейктер)

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-түрі (сол жақтағы белгі, оң жақтағы мән, блоктар).
• SM +: көлденең скролл бағандар артық болғанда ғана, қалпақты/бірінші бағанды бекітеміз.
• Сандар - tabular-nums, ондық бойынша түзету.

14) Локализация және RTL

'dir = «rtl»' + ': dir (rtl)' иконкаларды/сілтемелерді/margin-дерді айнала көрсету үшін.
Аударымдар жолдардың ұзындығын 20-30% -ға ұлғайтуы мүмкін - қорды салыңыз.
Кейбір жазулар үшін (мысалы, грузин/тай) базалық кеглді 1 px-ке ұлғайтыңыз.

15) iGaming ерекшелігі

Турнирлер/бонустар карточкалары: 3 × N (LG), 2 × N (MD), 1 × N (SM/XS) тор; CTA және шарттар - тұрақты аймақта.
Көшбасшылар/рейтингтер: sticky-қалпақ/бірінші баған; XS - stacked режиміне; сандардың ені біркелкі.
Төлем нысандары: XS - бір бағанды; MD - 2 баған (жол + түсіндірме).
Жауапты хабарламалар (18 +, лимиттер, тәуекелдер): барлық брейк-пункттерде әрқашан көрініп тұрады, AAA қарама-қарсылығы «hover-де жасырылған».

16) Қарсы үлгілер

Тор/баған орнына блоктардың бекітілген ені.
«Әрбір пиксельге өзгеріс нүктесі»: тым көп медиа сұрақ → хаос.
Сындырылған ырғақ: себепсіз көрші секциялардағы әртүрлі gutter/өрістер.
Кескіндегі сыни мәтін плашкасыз.
Тек hover кезінде ғана қол жетімді мазмұн (оған қол жеткізу мүмкін емес).
Ұзын тізімдегі layout сипаттарының анимациялары.

17) QA-чек парағы

Тор мен контейнерлер

• Бағандар мен gutter брейкпоинттерге сәйкес келеді; контейнерлер орталықтандырылған.
• Компоненттер дұрыс «ағады» 1 → 2 → 3 бағандар сынбай.

Баспаханалық

• Жолдың ұзындығы 45-80; 'clamp ()' арқылы fluid-кеглдер.
• Мәтіннің қарама-қайшылығы екі тақырып бойынша да WCAG сәйкес келеді.

Суреттер

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

Енгізу және A11y

• Пернетақта навигациясы; ': focus-visible' көрінеді.
• Тач үшін hover баламасы; ≥ 44 × 44 басу аймақтары.
• 'prefers-reduced-motion' қолданылды.

Өнімділік

• Тек 'transform/opacity' анимацияланады; ауыр әсерлері шектеулі.
• Сыни CSS/JS тиімді жүктеледі.

18) Дизайн-жүйедегі құжаттама

«Responsive & Breakpoints»: брейк-пункттер, контейнерлер, бағандар және gutter кестесі.
«Container Queries»: бейімделетін компоненттердің мысалдары.
«Fluid Type»: 'clamp ()' формуласы және шкала алдындағы пішімі.
«Навигация үлгілері»: XS/SM/MD/LG/XL-нұсқалар.
CLS/LCP қысқа клиптері мен мәндері бар «Do/Don 't».

Қысқаша түйіндеме

Бейімделу - бұл ретсіз медиа сұраулардың жиынтығы емес, стратегия. Құрылғы мазмұны мен талдауына сүйеніңіз, медиа сұрауларды жетілген тормен және контейнерлік сұраулармен біріктіріңіз, 'clamp ()' -ті баспаханаға қолданыңыз, суреттер мен өнімділікті бақылаңыз, енгізу мен A11y барлық тәсілдерін қолдаңыз. Осылайша интерфейс болжамды, жылдам және кез келген экранда бірдей ыңғайлы болып қалады.