Σύστημα δικτύου και αρθρωτότητα

1) Γιατί τα μάτια

• επιταχύνει το σχεδιασμό και την ανάπτυξη (κοινή γλώσσα: «12 στήλες, υδρορροές 24»),
• μειώνει το γνωστικό φορτίο (ακόμη και το ρυθμό, τις σταθερές γραμμές),
• Αύξηση της φορητότητας των εξαρτημάτων μεταξύ σελίδων
• σας επιτρέπει να κατασκευάσετε μια σπονδυλωτή βιβλιοθήκη χωρίς «μικροφόρηση».

2) Βασικά στοιχεία ματιών

Εμπορευματοκιβώτιο - μέγιστο πλάτος περιεκτικότητας, κεντρική περιοχή.
Στήλες - κατακόρυφες περιοχές για τοποθέτηση ενοτήτων.
Υδρορροές - οριζόντιος χώρος μεταξύ στηλών.
Περιθώριο - εξωτερικά πεδία αριστερά/δεξιά του εμπορευματοκιβωτίου.
Γραμμή/τροχιά - οριζόντιος οδηγός (σε CSS Grid - γραμμές/τροχιές).
Γραμμή βάσης - κατακόρυφο πλέγμα τυπογραφίας.

Συνιστώμενος κάθετος ρυθμός: 8-pt (μερικές φορές 4-pt για τις αποχρώσεις), μονάδες μεγεθών και περίπτωσης είναι πολλαπλάσια των 4/8.

3) Σημεία διακοπής και περιέκτες

• Περιέκτης Raster (fix. μέγιστο πλάτος) σε μεγάλες οθόνες, υγρό - σε κινητό.
• Η υδρορροή μπορεί να αυξηθεί ομαλά σε μεγάλα σημεία διακοπής.
• Στήλες - 4/6/8/12 ως «βασικό σύνολο».

4) Αρθρωτότητα και πυκνότητα

Ενότητα - ένα σύνολο περιεχομένου που καταλαμβάνει 1..N στήλες και πολλαπλάσια των υψών βάσης.

• Άνεση (ταμπλό, ανάγνωση): μεγαλύτερες γραμματοσειρές, περιπτώσεις 16-24.
• Συμπαγείς (πίνακες, pro-mode): γραμματοσειρές + 0/ − 1 px, κατακόρυφες περιπτώσεις − 4/ − 8, τα ύψη σειράς είναι σταθερά (πολλαπλάσια του 8).

Τα κατασκευαστικά στοιχεία πρέπει να έχουν δύο προκαθορισμένες τιμές ελάχιστης πυκνότητας.

5) Τυπογραφία και δίκτυο βάσης

Επιλέξτε το βασικό ύψος γραμμής (για παράδειγμα, 24 px) και συγχρονίστε τα ύψη των στοιχείων (τα κουμπιά 40/48/56 px είναι πολλαπλάσια της γραμμής βάσης).
Οι κλάσεις αγκυροβολούν κατακόρυφους ρυθμούς: άνω/κάτω περιπτώσεις είναι πολλαπλάσια του 8.
Ευθυγράμμιση των εικονιδίων με το ύψος του κειμένου.

6) Υποδείγματα διάταξης

6. 1 φύλλο

Πλέγμα: μωσαϊκό (fix. πλάτος κάρτας) ή στήλη (κάρτα = στήλες N).
Ελάχιστα ύψη περιεκτικότητας για την αποφυγή «άλματος» κατά τη φόρτωση. σκελετός μέσα στο φύλλο.
Εσωτερική επένδυση: 16/20/24 ανάλογα με το σημείο διακοπής.

6. 2 πίνακες

Δεξαμενή πλήρους πλάτους· καταψύχεται η πρώτη στήλη/καπάκι κατά την οριζόντια κύλιση.
Τα κύτταρα είναι κατά βάση διπλάσια. οι αριθμητικές στήλες ευθυγραμμίζονται με ψηφία/δεκαδικά ψηφία.
Στο XS - «στοιβαγμένη διάταξη» αντί της οριζόντιας κύλισης αν υπάρχουν πάρα πολλές στήλες.

6. 3 Έντυπα

Μία στήλη για XS/SM, δύο ή τρεις στήλες για MD + (λαμβάνοντας υπόψη τη λογική των πινάκων/τμημάτων).
Το πεδίο + ετικέτα + βοηθητικό κείμενο χωράει σε μια κοινή ενότητα (τα ύψη είναι πολλαπλάσια του 8).

6. 4 Πίνακες ταμπλό

Πλέγμα με σταθερά ίχνη και σύννεφα (περιοχές) για σταθερότητα.
Τα γραφικά συστατικά έχουν ελάχιστο και μέγιστο πλάτος στις στήλες. τα ύψη είναι πολλαπλάσια της γραμμής βάσης.
Κατά την επανάληψη - ο αριθμός των στηλών αλλάζει, μην διαχωρίζετε τα γραφικά συστατικά αυθαίρετα.

7) Προσαρμοστικότητα, αυτόματη διάταξη και συμπεριφορά

Περιεχόμενο μπροστά από το πλέγμα: Το πλέγμα προσαρμόζεται στο περιεχόμενο αντί να το σπάει.

• Χρήση περιορισμών (αριστερά/δεξιά/κέντρο) και αυτόματη διάταξη για κάρτες/λίστες.
• Υποστηρικτικές επιλογές συστατικών για XS/SM/MD/LG (αλλαγή paddings, σειρά slot).

• Σε επίπεδο τμήματος - CSS Grid (περιοχές, στήλες, σειρές).
• Μέσα στα κατασκευαστικά στοιχεία - Flex (άξονες, ισορροπία χώρων).

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) Δομοστοιχεία

• γνωρίζουν πόσες στήλες λαμβάνει σε κάθε σημείο διακοπής·
• έχουν ελάχιστες/μέγιστες διαστάσεις·
• δεν εξαρτώνται από «μαγικά» εικονοστοιχεία - μόνο μάρκες·
• διατηρεί το εσωτερικό πλέγμα (τίτλος, περιεχόμενο, footer) στη γραμμή βάσης.

11) Τμήματα εικόνων και μέσων ενημέρωσης

Καθορισμός αναλογίας διαστάσεων (π.χ. 16/9, 4/3, 1/1) για προεπισκόπηση και κάρτες.

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

Στην XS, χρησιμοποιήστε την πλήρη αιμορραγία (εικόνα γύρω από τις άκρες) μόνο για promo, το υπόλοιπο περιεχόμενο ακολουθεί τον περιέκτη.
Κείμενο εικόνας - μόνο σε ολισθήσεις/επικαλύψεις, αντίθεση ≥ AA.

12) RTL και εντοπισμός

Τα κάτοπτρα κατεύθυνσης πλέγματος: 'dir = «rtl»' και ': dir (rtl)' -rules για περιπτώσεις/εικονίδια.
Σειρά στήλης και κατεψυγμένες στήλες στους πίνακες - βλέπε αντανάκλαση.
Το μήκος των γραμμών και των μεταφορών μπορεί να αλλάξει τα ύψη των ενοτήτων - να καθορίσει το απόθεμα.

13) Οι ιδιαιτερότητες του iGaming

Περιοχές Promo και πανό: χωριστό πλέγμα με μεγάλες ενότητες· το κείμενο είναι πάντα στην πινακίδα, αντίθεση AAA για κρίσιμες κοινοποιήσεις (18 +, όρια, κίνδυνοι).
Leaders/ratings: πίνακες με σταθερή πρώτη στήλη και κολλώδη κεφαλίδα, αριθμοί πινάκων (tabular-nums), τα ύψη σειράς είναι πολλαπλάσια του 8.
Τα ταμπλέτα παικτών/λειτουργιών: γραφικά πλέγματα (συνεδρίες, καταθέσεις, RTP, καθαρές καταθέσεις) καταλαμβάνουν στήλες 3-6 σε ένα πλέγμα 12. ανακατασκευή καταρράκτη σε MD/SM.
Κάρτες τουρνουά: πλέγμα καρτών 3 × N (LG), 2 × N (MD), 1 × N (SM/XS). CTA σε μόνιμη τοποθεσία.

14) Προσβασιμότητα και εστίαση

Οι δακτύλιοι εστίασης δεν πρέπει να σπάνε το ρυθμό: να προσθέτουν περίγραμμα-όφσετ ή εσωτερικό ψευδο-στοιχείο.
Ελάχιστο μέγεθος κλικ: 44 × 44 (κινητό )/32 × 32 (επιτραπέζιος υπολογιστής).
Μη κωδικοποιείτε την έννοια μόνο με τοποθέτηση. Αποθήκευση των ετικετών κειμένου και των χαρακτηριστικών της άρια.

15) Επιδόσεις

Μείωση του βάθους των δικτύων φωλιών: 1 κύρια ενότητα πλέγματος + ευθυγράμμιση στο εσωτερικό.
Να αποφεύγονται οι βαριές σκιές/μάσκες σε εκατοντάδες φύλλα. Χρησιμοποιήστε επίπεδα στυλ στις λίστες.
Τεμπέλης φόρτωση περιεχομένου πολυμέσων. σταθερές αναλογίες αποτρέπουν το CLS.

16) Αντιπατερίδια

Η συνοχή «πλέγμα στη γεύση» → καταρρέει σε κάθε σελίδα.
Η υδρορροή ποικίλλει αυθαίρετα ανά τμήμα.
Ασυνεπείς πυκνότητες (τόσο συμπαγείς όσο και άνεση σε μία οθόνη).
Εξαρτήματα εξαρτώμενα από το πλάτος μαγείας (δεν υπάρχουν στήλες/μάρκες).
Πίνακες με οριζόντια κύλιση σε κινητό χωρίς εναλλακτική διάταξη.
Κείμενο στην εικόνα χωρίς θάνατο και έλεγχο αντίθεσης.

17) Κατάλογος ελέγχου QA

Δομή

• Οι στήλες/εμπορευματοκιβώτιο/περιθώρια αντιστοιχούν σε σημεία διακοπής.
• Gutter είναι σταθερή μέσα στη σελίδα.
• Τα ύψη και οι περιπτώσεις είναι πολλαπλάσια των 8.

Κατασκευαστικά στοιχεία

• Πλάτος στήλης (XS. XL) και min/max ορίζονται.
• Τα εσωτερικά δίκτυα ευθυγραμμίζονται με τη γραμμή βάσης.

Πίνακες/Έντυπα

• Κολλώδες κάλυμμα/πρώτη στήλη· στοιβαγμένη λειτουργία στο XS.
• Τα πεδία εντύπων είναι πολλαπλάσια της γραμμής βάσης. το κείμενο ετικέτας/βοήθειας δεν «πηδάει».

A11y

• Τα στυλ εστίασης δεν σπάνε το ρυθμό? οι ζώνες κλίκας ≥ ελάχιστες.

Επιδόσεις

• Δεν υπάρχει CLS λόγω μπλοκ μέσων ενημέρωσης. ενεργοποιείται η τεμπέλης φόρτωση.

18) Μάρκες και τεκμηρίωση στο σύστημα σχεδιασμού

• τις τιμές «δεξαμενή», «στήλες», «υδρορροές», «χώρος», γραμμή βάσης·
• παραδείγματα διατάξεων (κάρτες/πίνακες/έντυπα/πίνακες ταμπλό)·
• προκαθορισμένες πυκνότητες (Comfort/Compact) και η επίδρασή τους στα κατασκευαστικά στοιχεία·
• κωδικός snippets για CSS Grid/Flex και Figma στυλ/διατάξεις.

Σύντομη Περίληψη

Το δίκτυο είναι μια σύμβαση μεταξύ σχεδιασμού και ανάπτυξης. Λήψη σημείων διακοπής, εμπορευματοκιβωτίων, ηχείων και 8-pt ρυθμού, σημάτων σχεδιασμού και προτύπων διάταξης, παρέχουν επιλογές πυκνότητας, προσαρμοστικότητα και διαθεσιμότητα. Στη συνέχεια, οι σελίδες κλιμακώνονται προβλέψιμα, τα συστατικά επαναχρησιμοποιούνται, και η εντολή είναι γρηγορότερη και πιο σταθερή.