Μετάβαση στο κύριο περιεχόμενο
← 🎨 CSS as a design system·Ενότητα B6 · Μάθημα 14
ΕργασίαQuick recap. Write CSS that uses all 4 B4-B6 fundamentals. body { font-family: system-ui, sans-serif; }. h1 { font-size: clamp(24px, 5vw, 48px); }. .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }. .card { overflow-wrap: anywhere; padding: 12px; background: #eef; }.

Recap: Typography, color, responsive

50 XP5 min
Θεωρία

Quick recap — Modules B4-B6

Typography, color, breakpoint-free responsive. The 4 properties that stop you reaching for a framework:

  1. `clamp(min, preferred, max)` — fluid type/size without a single @media query.
  2. System font stack — font-family: system-ui, sans-serif ships native UI typeface, zero load cost.
  3. `grid-template-columns: repeat(auto-fit, minmax(180px, 1fr))` — responsive cards without breakpoints.
  4. `overflow-wrap: anywhere` — long URLs / hashes / tokens don't blow out a card.

If any feels random, redo B4-03 / B4-01 / B6-04 / B6-13 then come back.

🔒

Εγγράψου για να αρχίσεις να προγραμματίζεις

Η θεωρία είναι ανοιχτή για όλους. Ο επεξεργαστής, η ζωντανή προεπισκόπηση και ο έλεγχος ξεκλειδώνουν με 7-ήμερη δωρεάν δοκιμή — απαιτείται κάρτα.

Εγγραφή — δωρεάν δοκιμή →

Τα πρώτα 10 μαθήματα κάθε διαδρομής είναι δωρεάν. Δεν χρειάζεται κάρτα.

← ΠροηγούμενοΕπόμενο μάθημα →

Μια συμβουλή Python ή web την ημέρα — με email

Σύντομο, γραμμένο στο χέρι, χωρίς spam. Διαγραφή με ένα κλικ.