Ցանցային համակարգը և մոդուլիզմը

1) Ինչու՞ է ցանցը

Ցանցը ապահովում է ինտերֆեյսի կանխատեսելի վարքագիծը բովանդակության և էկրանների աճի ժամանակ

արագացնում է դիզայնը և զարգացումը (ընդհանուր լեզուն ՝ «12 կոլոն, gutter 24»),

նվազեցնում է ճանաչողական բեռը (ռիթմ, կայուն գծեր),

մեծացնում է էջերի միջև բաղադրիչների փոխակերպումը,

թույլ է տալիս կառուցել մոդուլային գրադարան առանց «միկրովեռների»։

2) Ցանցի հիմնական տարրերը

Բեռնարկղը բովանդակության առավելագույն լայնությունն է, կենտրոնացված տարածքը։

Սյունակները ուղղահայաց տարածքներ են մոդուլների տեղադրման համար։

Gutter-ը հորիզոնական ընդմիջում է սյուների միջև։

Margin-ը արտաքին դաշտերն են ձախ/աջ բեռնարկղից։

Row/Track - հորիզոնական ուղղություն (CSS Grid - տողեր/հետքեր)։

Baseline-ը տպագրական ուղղահայաց ցանց է։

Առաջարկվող ուղղահայաց ռիթմը ՝ 8-pt (երբեմն 4-pt նյուանսների համար), չափսերի և հավատքի միավորը 4/8 է։

3) Բրեյքպոինտները և բեռնարկղերը

Վերցրեք սարքերի իրական վերլուծությունից բրեյքպոինտները։ Օրինակ

Կանոնները

Բեռնարկղը բուսական է (ֆիքս. max-width) մեծ էկրանների վրա, fluid - բջջային։

Gutter-ը կարող է լողալ մեծ Breekpointas-ի վրա։

Սյունակները 4/6/8/12 են որպես «հիմնական հավաքածու»։

4) մոդուլիզմ և խտություն

Մոդուլը բովանդակության բլոկն է, որը գրավում է 1.. N զանգեր և կարճ baseline բարձրություններ։

Խտություն

Comfort (dashbords, կարդալ) 'ավելի մեծ, քան տառատեսակները, նահանջները 16-24։

Compact (աղյուսակներ, puni-mode) 'տառատեսակներ + 0/241 px, ուղղահայաց շեղումներ 244/388, գծերի բարձրությունները ֆիքսված են (կարճ 8)։

Բաղադրիչները պետք է ունենան երկու խտության ճնշում։

5) Տպագրություն և baseline ցանցը

Ընտրեք հիմնական ստանդարտ-height (օրինակ, 24 px) և համաժամեցրեք տարրերի բարձրությունները (կոճակները 40/48/56 px կարճ baseline)։

Վերնագրերը ամրացնում են ուղղահայաց ռիթմերը 'նահանջները 8-ի վրա։

Պատկերները հավասարեցրեք տեքստի գլխարկով։

6) Դասավորության ձևանմուշները

6. 1 Քարտեր (cards)

Ցանցը 'խճանկար (ֆիքս. քարտի լայնությունը) կամ հսկայական (քարտը = N զանգեր)։

Բովանդակության նվազագույն բարձրությունները, որպեսզի խուսափեն «ցատկելուց» բեռնման ժամանակ։ skeleton քարտի սահմաններում։

Ներքին padding: 16/20/24 կախված breikpoint-ից։

6. 2 Աղյուսակներ

Ամբողջ լայնությամբ բեռնարկղը; սառեցնում ենք առաջին սյունը/գլխարկը հորիզոնական սկրոլում։

Մոսկվա - baseline-կարճ; թվային սյունակները հավասարեցնում ենք ալյումինե/տասանորդ։

XS-ում «քարտային տողեր» (stacked layout) հորիզոնական ժայռի փոխարեն, եթե սյուները չափազանց շատ են։

6. 3 Ձևեր

Միակողմանի XS/SM-ում, երկու կամ երեք կոլոնային MD +-ում (հաշվի առնելով տաբերի/հատվածների տրամաբանությունները)։

+ պիտակը + hellp տեքստը տեղադրվում է ընդհանուր մոդուլի մեջ (բարձրությունները 8)։

6. 4 Դաշբորդներ

Գրիդը ֆիքսված հետքերով և ամպերով (areas) կայունության համար։

Տեսիլքները ունեն նվազագույն և առավելագույն լայնություն սյունակներում։ բարձրությունները baseline են։

Resaize-ը փոխվում է կոլոկի մեջ, մենք կամայականորեն չենք տեսնում։

7) Հարմարվողականություն, 71-layout և վարքագիծ

Ցանցի առջևի բովանդակությունը 'ցանցը հարմարվում է բովանդակության տակ, ոչ թե կոտրում այն։

• Օգտագործեք constrainment (left/right/2019) և www.layout քարտերի/ցուցակների համար։
• Աջակցեք բաղադրիչի տարբերակները XS/SM/MD/LG-ի համար (փոխվում են պադդինգները, վանկերի կարգը)։

• Հատվածների մակարդակում CSS Grid (տարածքներ, սյուներ, տողեր)։
• Բաղադրիչների ներսում Flex (առանցքներ, ածխաջրածինների հավասարակշռություն)։

8) CSS Grid/Flex - գործնական

Բեռնարկղը և 12 զանգի ցանցը

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

Գրիդ ոլորտները (դաշբորդ)

css
.dashboard {
display: grid; gap: 24px;
grid-template:
"kpi kpi chart chart" auto
"tbl tbl chart chart" 1fr / 1fr 1fr 1fr 1fr;
}
.kpi  { grid-area: kpi; }
.chart { grid-area: chart; }
.tbl  { grid-area: tbl; }
@media (max-width: 1199px) {
.dashboard { grid-template:
"kpi" auto "chart" auto "tbl" 1fr / 1fr; }
}

9) Հավատուրացներն ու ցնցումները

Գրանցեք մասշտաբները դիզայնի համակարգում։

json
{
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24, "2xl": 32, "3xl": 48 },
"container": { "sm": 584, "md": 808, "lg": 1152, "xl": 1320 },
"gutter": { "sm": 16, "md": 20, "lg": 24, "xl": 32 },
"columns": { "xs": 4, "sm": 6, "md": 8, "lg": 12 }
}

Կանոնները

Բաղադրիչների ներքին շեղումները '«space» -ից։

Բեռնարկղերի արտաքին դաշտերը '«gutter »/« margin» -ից։

Տարրերի բարձրությունը 8 (40/48/56) է։

10) Մոդուլային բաղադրիչները

Բաղադրիչը պետք է

իմանալու համար, թե քանի զանգեր է նա զբաղեցնում յուրաքանչյուր brekpointe-ում։

ունենալ նվազագույն/առավելագույն չափսեր;

կախված չէ «կախարդական» պիքսելներից, միայն խոզանակները։

պահել ներքին ցանցը (վերնագիր, բովանդակություն, ֆուտեր) baseline-ի վրա։

11) Պատկերներ և լրատվամիջոցների տարածումներ

Գրանցեք aspast-ratio (օրինակ, 16/9, 4/3, 1/1) գերազանցելու և քարտերի համար։

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

XS-ում օգտագործեք fox-bleed (եզրերի նկարը) միայն պրոմո համար, մնացած բովանդակությունը պետք է բեռնարկղը։

Պատկերների տեքստը միայն շերտերի/հավատալիքների վրա է, որը հակադրվում է AA-ին։

12) RTL և տեղայնացումը

Հայելու գրիդ ուղղությունը '«dir =» rtl «և' dir (rtl)» - իշխում էր նահանջների/սրբապատկերների համար։

Գարեջրի կարգը և «կպչուն» տարածքը (frozen columns) գյուղերում, հաշվի առեք հացահատիկը։

Տողերի երկարությունը և փոխանցումները կարող են փոխել մոդուլների բարձրությունը 'տեղադրեք պահեստը։

13) iGaming հատկությունները

Պրոմո գոտիները և բանները 'առանձին գրիդ մեծ մոդուլներով։ տեքստը միշտ պլաստիկի վրա է, AAA հակադրությունը ռուսական ծանուցումների համար (18 +, լիմիտներ, ռիսկեր)։

Առաջնորդներ/վարկանիշներ ՝ աղյուսակներ, որոնք ունեն ֆիքսված առաջին սյունակով և sticky-գլխարկով, թվերը պլանշետային (tabular-nums), տողերի բարձրությունները ՝ 8։

Խաղացողների/վիրահատությունների dashbords 'vizhets (նստարաններ, դեպոզիտներ, RTP, Net Deposits) գրավում են 3-6 գաղութներ 12-գրիդում։ վերակառուցումը կասկադային է MD/SM-ում։

Մրցույթների քարտերը ՝ քարտերի ցանցը 3 հազար N (LG), 2 հազար N (MD), 1 հազար N (SM/XS); CTA-ն անընդհատ տեղում է։

14) Հասանելիություն և ֆոկուս

Ֆոկուս օղակները չպետք է կոտրեն ռիթմը 'ավելացրեք ine-corset կամ ներքին կեղծանունը։

Կլիկի նվազագույն չափսերը 44-44 (1922) / 32 no 32 (desktop)։

Մի կոդավորեք իմաստը միայն տեղադրմամբ։ պահպանեք տեքստային բջիջները և aria-ատրիբուտները։

15) Արտադրողականությունը

Նվազեցրեք գրիդների ներդրման խորությունը '1 հիմնական գրիդ բաժին + ֆլեքսներ ներսում։

Խուսափեք ծանր ստվերներից/դիմակներից հարյուրավոր քարտերի վրա։ օգտագործեք «հարթ» ոճերը ցուցակներում։

Լենովային Mediocontent բեռնումը; ֆիքսված համամասնությունները կանխում են CLS-ը։

16) Անտիպատերնի

«Ցանցը համեղ է» յուրաքանչյուր էջի վրա, որը պարունակում է հետևողականությունը։

Gutter-ը կամայականորեն փոխվում է հատվածներով։

Չհամաձայնեցված խտությունները (մեկ էկրանին և «108» և «հարմարավետություն»)։

Բաղադրիչները, որոնք կախված են կախարդական լայնություններից (առանց կտորների/հոսանքների)։

Հորիզոնական սկրոլով աղյուսակներ առանց այլընտրանքային դասավորության։

Տեքստը պատկերում է առանց սալիկների և հակադրության վերահսկման։

17) QA-chek-թերթ

Կառուցվածքը

• Սյունակները/բեռնարկղերը/մարինաները համապատասխանում են breikpointam-ին։
• Gutter Microsoft-ը էջի ներսում։
• Բարձրությունները և նահանջները 8-ից կարճ են։

Բաղադրիչները

• Հայտնաբերվել են հսկայական լայնություններ (XS.. XL) և min/max։
• Ներքին ցանցերը համաձայն են baseline-ի հետ։

Աղյուսակներ/ձևեր

• Sticky-գլխարկ/առաջին սյունակը; stacked ռեժիմը XS-ում։
• Ձևերի դաշտերը հակիրճ են։ Լեյբլ/հելպ տեքստը չի «ցատկում»։

A11y

• Ֆոկուս Սթիլին չի կոտրում ռիթմը։ կլինիկական գոտիները նվազագույն են։

Պերֆորանսը

• Ոչ CLS-ը մեդիա բլոկների պատճառով; ծույլ բեռնումը միացված է։

18) Տոկենները և շարժումները դիզայնի համակարգում

Հրապարակեք «Grid & Spacing» էջը

արժեքները 'www.ainer', «columns», «gutter», «space», baseline;

դասավորության օրինակներ (քարտեր/սեղաններ/ձևեր/dashbords);

խտության ճնշումները (Comfort/Compact) և դրանց ազդեցությունը բաղադրիչների վրա։

CSS Grid/Flex և Figma-stel/լեյաուտներ։

Live ռեզյումե

Ցանցը դիզայնի և զարգացման միջև պայմանագիր է։ Ամրագրեք բրեյքպոինտները, բեռնարկղերը, սյունակները և ռիթմը 8-pt-ը, կազմեք հոսանքներ և դասավորությունների ձևանմուշներ, ապահովեք խտության, հարմարվողականության և հասանելիության տարբերակներ։ Այդ ժամանակ էջերը մեծանում են կանխատեսելի, բաղադրիչները կրկին օգտագործվում են, իսկ թիմը ավելի արագ և կայուն է աշխատում։