MODUL 01 / FUNDAMENT · 25 min
Start med systemet.
En god side starter, før du trækker det første element ind. Du beslutter de regler, som alle sider skal arve.
Tre lag, tre opgaver
WordPress → Bricks → Settings styrer builderens rammer, tilladelser og hvilke indlægstyper der kan redigeres. Inde i builderen er Theme Styles stedet for typografi, standardafstande og elementers grundudseende. Globale variabler og klasser er dine genbrugelige byggeklodser. Et nyt tema under WordPress → Udseende er ikke det samme som en Theme Style.
01 / Undersøg før du opretter
Åbn en side i Bricks. Find eksisterende Theme Styles, farver, variabler og klasser. Se hvilke betingelser der aktiverer temastilen. Genbrug det, som allerede passer. På et tomt site opretter du én grundstil med en betingelse, der omfatter hele sitet.
02 / Lav semantiske farver
Brug navne som ink, paper, accent og surface-muted frem for orange-2 eller grå-ny. Her betyder ink tekst, paper baggrund og accent en handling eller markering. Elementerne refererer til variablen. Når dens værdi ændres, følger alle referencer med. Tjek altid kontrasten efter et farveskift.
03 / Sæt standarderne i Theme Styles
Vælg brødtekstfont, linjehøjde, overskriftsniveauer, links, indholdsbredde og sektionernes afstande. Knyt størrelserne til den globale skala. Style en konkret klasse, når et element har en særlig rolle. Brug kun elementets ID til en ægte undtagelse.
04 / Forstå prioriteten
En lokal værdi eller en mere specifik CSS-regel kan vinde over din globale stil. Hvis en overskrift ikke ændrer sig, undersøg dens klasse, breakpoint og lokale typografi, før du opretter flere regler. Browserens computed styles viser den værdi, der faktisk bliver brugt.
DIN TUR / PRØV DET I BRICKS
Fra læsning til handling.
På din øveside: opret to overskrifter og to knapper. Lad dem arve samme globale regler. Skift én farvevariabel og se alle relevante elementer ændre sig. Gendan farven bagefter.
DU ER I MÅL, NÅR …
Du kan forklare forskellen på Settings, Theme Styles, en global klasse og et lokalt override — og vise en global ændring på mindst to elementer.
DIN AGENTPROMPT / MARKÉR OG KOPIÉR
Læs først det eksisterende Bricks-designsystem. Vis aktive Theme Styles, breakpoints og relevante variabler. Genbrug passende navne. Foreslå derefter den mindste ændring, der giver mine knapper en fælles accentfarve. Undgå at overskrive uvedkommende globale ressourcer.