מערכת רשת ומודולריות

1) מדוע רשת

• מאיץ תכנון ופיתוח (שפה משותפת: ”12 טורים, ביבים 24”),
• מפחית עומס קוגניטיבי (אפילו קצב, קווים יציבים),
• מגביר את הניידות של רכיבים בין עמודים
• מאפשר לך לבנות ספרייה מודולרית ללא ”מיקרו שכיבה”.

2) יסודות רשת בסיסיים

מיכל - רוחב תוכן מקסימלי, אזור מרוכז.
עמודות - אזורים אנכיים להצבת מודולים.
ביבים - מרווח אופקי בין עמודים.
שוליים - שדות חיצוניים שמאלה/ימינה של המיכל.
שורה/רצועה - מדריך אופקי (ברשת CSS - קווים/רצועות).
קו בסיס - רשת טיפוגרפיה אנכית.

קצב אנכי מומלץ: 8-pt (לפעמים 4-pt לניואנסים), יחידות של גדלים וחריצים הן כפולות של 4/8.

3) נקודות שבירה ומיכלים

• מיכל רסטר (תיקון. מקסימום רוחב) על מסכים גדולים, נוזל - על נייד.
• הביוב יכול לעלות בצורה חלקה לנקודות שבירה גדולות.
• עמודות - 4/6/8/12 כ ”קבוצת ליבה”.

4) מודולריות וצפיפות

מודול - גוש תוכן המאכלס עמודות 1..N ומכפלות של גבהים בסיסיים.

• נחמה (לוחות מחוונים, קריאה): גופנים גדולים יותר, חריצים 16-24.
• קומפקטי (טבלאות, פרו-מוד): גופנים + 0/-1 px, אינדנטים אנכיים = 4/-8, גבהים בשורה קבועים (כפולות של 8).

לרכיבים יהיו שני מקדמים של צפיפות מינימלית.

5) טיפוגרפיה ורשת בסיס

בחר את גובה הקו הבסיסי (לדוגמה, 24 px) וסנכרן את הגבהים של האלמנטים (כפתורים 40/48/56 px הם כפולות של קו בסיס).
כותרות עוגנות במקצבים אנכיים: מעל/מתחת הם כפולות של 8.
יישר את הסמלים לגובה הטקסט.

6) תבניות פריסה

6. קלפים 1

רשת: פסיפס (תיקון. רוחב כרטיס) או טור (כרטיס = N טורים).
מינימום גבהים תוכן להימנע ”קפיצה” בעת טעינה; שלד בתוך הכרטיס.
ריפוד פנימי: 16/20/24 תלוי בנקודת שבירה.

6. 2 שולחנות

מיכל רוחב מלא; להקפיא את העמודה/כובע הראשון כאשר גלילה אופקית.
תאים הם קיפול בסיס; עמודות מספריות מיושרות לפי ספרות/עשרוניות.
ב XS - ”פריסה בערימה” במקום גלילה אופקית אם יש יותר מדי עמודות.

6. 3 צורות

עמודה אחת על XS/SM, שתיים - או שלוש עמודות על MD + (לוקח בחשבון את הלוגיקה של לשוניות/קטעים).
תווית שדה + עזרה לטקסט להתאים למודול משותף (גבהים הם כפולות של 8).

6. 4 לוחות מחוונים

רשת עם מסלולים ועננים קבועים (אזורים) ליציבות.
ל-Widgets יש רוחב מינימלי ומקסימלי בעמודות; גבהים הם כפולות של קו בסיס.
כאשר אתה חוזר - מספר העמודות משתנה, אל תחלק ווידג 'טים באופן שרירותי.

7) כושר הסתגלות, סידור אוטומטי והתנהגות

תוכן מול הרשת: הרשת מסתגלת לתוכן במקום לשבור אותו.

• השתמש באילוצים (שמאל/ימין/מרכז) ופריסה אוטומטית לכרטיסים/רשימות.
• אפשרויות רכיב תמיכה עבור XS/SM/MD/LG (שינוי מחסומים, סדר חריצים).

• ברמת הסעיף - CSS Grid (אזורים, עמודים, שורות).
• בתוך הרכיבים - גמישות (גרזנים, איזון מרחבים).

8) CSS Grid/Flex - סדנה

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 }
}

• החריצים הפנימיים של הרכיבים הם מ ”חלל”.
• השדות החיצוניים של המכולות הם מ ”ביוב ”/” מרווח”.
• גבהים אלמנטריים הם כפולות של 8 (40/48/56).

10) רכיבים מודולריים

• יודע כמה טורים זה לוקח על כל נקודת שבירה;
• יש מימדים מינימליים/מקסימליים;
• לא תלוי ב ”קסמים” פיקסלים - אסימונים בלבד;
• לשמור את הרשת הפנימית (כותרת, תוכן, רגל) על קו בסיס.

11) תמונות וקטעי תקשורת

תיקון יחס היבט (לדוגמה: 16/9, 4/3, 1/1) עבור תצוגות וקלפים.

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

ב-XS, השתמש בדימום מלא (תמונה מסביב לקצוות) רק לפרומו, שאר התוכן עוקב אחר המיכל.
טקסט תמונה - רק על תלושים/כיסוי, ניגוד בין איי איי.

12) RTL ולוקליזציה

מראות כיוון הרשת: ”dir =” rtl' ו- ”dir (rtl)” - rules עבור indents/icons.
סדר עמודים ועמודים קפואים בשולחנות - לשקול שיקוף.
אורך הקווים וההעברות יכול לשנות את גובה המודולים - להניח את המלאי.

13) הפרטים של iGaming

אזורי פרומו ובאנרים: רשת נפרדת עם מודולים גדולים; הטקסט תמיד על הצלחת, ניגוד AAA להודעות קריטיות (18 +, גבולות, סיכונים).
מובילים/מדרגים: שולחנות עם עמודה ראשונה קבועה וכותרת דביקה, מספרים טבולריים (tabular-nums), גבהים בשורה הם כפולים של 8.
לוחות מחוונים של שחקנים/מבצעים: וידג 'טים (הפעלות, הפקדות, RTP, Net Deposits) תופסים 3-6 עמודות על רשת של 12. קסקייד נבנה מחדש על MD/SM.
כרטיסי טורניר: רשת קלפים 3 × N (LG), 2 × N (MD), 1 × N (SM/XS); סי-טי-איי במקום קבוע.

14) נגישות והתמקדות

טבעות מיקוד לא צריכות לשבור את הקצב: הוסף קיזוז קווי או פסאודו-אלמנט פנימי.
גודל לחיצה מינימלית: 44 × 44 (נייד )/32 × 32 (שולחן עבודה).
אין לקודד משמעות באמצעות מיקום בלבד; שמור את תוויות הטקסט ותכונות האריה.

15) ביצועים

הפחת את עומק רשתות הקינון: 1 מקטע רשת ראשי + מכופף בפנים.
הימנע מצללים כבדים/מסכות על מאות קלפים; השתמש בסגנונות שטוחים ברשימות.
טעינה עצלה של תוכן תקשורתי; פרופורציות קבועות מונעות קלוריות.

16) תרופות אנטי ־ פטריות

”רשת לטעום” עקביות * מתפוררת בכל עמוד.
הביוב משתנה באופן שרירותי לפי סעיף.
צפיפות לא עקבית (הן קומפקטית והן נחמה במסך אחד).
רכיבים תלויי רוחב קסם (ללא עמודות/אסימונים).
שולחנות עם גלילה אופקית בנייד ללא פריסה חלופית.
טקסט בתמונה ללא מת ובקרת ניגוד.

17) רשימת QA

מבנה

[ ] עמודות/מיכל/מרגליות מתאימות לנקודות שבירה.

[ ] גוטר יציב בתוך הדף.

[ ] גבהים וחריצים הם כפולות של 8.

רכיבים

[ גדילי גיס ] (XS.. XL) ומין/מקס מוגדרים.

[ רשתות פנימיות ] מיושרות עם קו בסיס.

טבלאות/טפסים

[ ] דביק-כובע/עמודה ראשונה; מצב ערמה על XS.

שדות [ ] Form הם כפולות של קו בסיס; תווית/עזרה טקסט לא ”לקפוץ”.

A11y

[ סגנונות ] פוקוס לא לשבור את הקצב; אזורי קליקה מינימליים.

ביצועים

[ ] No CLS עקב חסמי תקשורת; טעינה עצלנית מתאפשרת.

18) אסימונים ותיעוד במערכת העיצוב

• הערכים 'מיכל', 'עמודים', 'ביוב', 'מרחב', קו בסיס;
• דוגמאות של פריסות (כרטיסים/שולחנות/טפסים/לוחות מחוונים);
• צפיפות מקדימה (Comfort/Compact) והשפעתם על רכיבים;
• קטעי קוד עבור CSS Grid/Flex וסגנונות פיגמה/פריסות.

תקציר

רשת היא חוזה בין עיצוב ופיתוח. תפוס נקודות שבירה, מכולות, רמקולים וקצב של 8 פט, תכנן אסימונים ותבנית פריסה, לספק אפשרויות צפיפות, הסתגלות וזמינות. ואז הדפים בסולם צפוי, הרכיבים נמצאים בשימוש חוזר, והפקודה היא מהירה ויציב יותר.