MODUL 02 / RESPONSIVE · 25 min
Byg flydende. Fra start.
Responsivt design er en egenskab ved systemet. Ikke en oprydning, du gemmer til den sidste dag.
En fælles størrelsesskala
Bricks kan generere globale skalaer for typografi og afstand. Her bruges t-shirt-navne som text-m og space-l. Basistrinnet er udgangspunktet; de øvrige trin følger en ratio. Start med standardopsætningen og vurder den i browseren, før du justerer.
clamp() har tre grænser
clamp(minimum, flydende værdi, maksimum) lader eksempelvis en skriftstørrelse vokse inden for et kontrolleret interval. Det giver en jævn overgang mellem skærmstørrelser. Brug text-variabler til tekst og space-variabler til afstand. En overskrift og et mellemrum har forskellige roller.
Root-størrelsen er en fælles kontrakt
Dette site bruger foundation-rutens standard på 62,5 %. Ved en browserstandard på 16 px svarer 1 rem derfor til 10 px. Hvis du kopierer CSS fra et site med en anden root-størrelse, kan layoutet blive forkert. Bevar brugerens zoom og tjek teksten ved 200 %.
Layout skifter ved behov
Flydende tekst erstatter ikke breakpoints. Et layout med to kolonner kan stadig kræve én kolonne på mobil. Brug sitets aktive standardbreakpoints. Bricks’ desktop-base kaskader mod mindre visninger, medmindre mobile-first er slået til.
Test mellem de pæne skærmstørrelser
Tjek 1440, 1024, 768 og 390 px — og træk vinduet mellem dem. Undgå faste højder til tekstbokse. Brug max-width til læsebredde, fleksible grids og billeder med korrekt aspect ratio. Lange danske ord og store tekststørrelser skal kunne være der.
DIN TUR / PRØV DET I BRICKS
Fra læsning til handling.
Lav et grid med tre kort. Brug space-m til gap og text-l til korttitler. Skift til én kolonne på mobil. Zoom til 200 % og skriv en ekstra lang titel.
DU ER I MÅL, NÅR …
Ingen vandret scrolling ved 390 px. Ingen klippet tekst ved 200 % zoom. Kortene bruger globale størrelser, og du kan pege på det breakpoint, hvor layoutet skifter.
DIN AGENTPROMPT / MARKÉR OG KOPIÉR
Undersøg sitets aktive breakpoints og fluid scales. Gør mit kortgrid responsivt ved at genbruge dem. Bevar tekstindhold og eksisterende IDs. Verificér desktop og mobil samt lange titler. Rapportér de faktiske bredder, du har kontrolleret.