/* ========================================================================== De maatlat - gedeeld door batterijmaatje, warmtepompmaatje en zonnestroommaatje. Waarom dit bestand bestaat -------------------------- De drie sites deelden al een font en een kleurenopzet, maar niet hun maatvoering. Gemeten op de eigen pagina's leverde dat dit op: batterij warmtepomp zonnestroom tekstgroottes 39 32 28 verticale afstanden 55 39 37 hoekrondingen 7 9 7 basistekstgrootte 17 px 17 px 16 px Dat waren geen bewuste keuzes maar opgeteld toeval: elk onderdeel kreeg zijn eigen rem-waarde, en 0,82 / 0,85 / 0,88 / 0,90 / 0,92 / 0,93 / 0,95 staan naast elkaar zonder dat iemand het verschil kan benoemen. Je ziet het niet als losse fout, je ziet het als "die site voelt net anders". Wat hier staat is de vervanging: acht tekstmaten, negen afstanden, drie hoekrondingen. Klein genoeg om te onthouden, dus klein genoeg om je eraan te houden. Hoe het bij de sites komt ------------------------- Dit bestand staat in kern/ en wordt door scripts/kern-verdelen.mjs naar sites//assets/maatlat.css gekopieerd; --controleer bewaakt dat de drie kopieen identiek blijven. Elke style.css begint met @import url("maatlat.css"). Waarom een @import en geen tweede : de drie sites hebben samen 134 HTML-bestanden. Een erbij is 134 bestanden aanpassen en 134 kansen om er ergens een te vergeten; een @import is drie regels en kan niet scheeflopen. De kosten zijn gelijk - beide zijn een extra verzoek dat het tekenen ophoudt - en dit bestand is klein genoeg om dat te dragen. Kleur staat hier bewust niet in. Dat is het enige wat per site hoort te verschillen. ========================================================================== */ :root { /* -- Tekst --------------------------------------------------------------- Acht maten, elk met een taak. De sprongen zijn 1,15 tot 1,3 keer: groot genoeg om te zien dat het een andere maat is, klein genoeg om niet te springen. Alles in rem, gerekend vanaf de standaard van de browser (16 px). Zo groeit de tekst mee met de instelling van de bezoeker (WCAG 1.4.4). 12 px veldnaam, kolomkop - meestal in klein kapitaal 15 px bediening: knop, menu, tabel, formulier, etiket, bijschrift 17 px lopende tekst; dit is de basis 19 px productnaam, inleidende alinea 22 px bedrag, kerncijfer 28 px hoofdstukkop (h2), en de ondergrens van de paginakop 36 px paginakop op een inhoudspagina 46 px paginakop op een vergelijker (bovengrens van de clamp) 15 px in plaats van 14: daar zat het gedrang. Zeventien verschillende declaraties lagen tussen 13,3 en 15,5 px - nav, knoppen, tabellen, formulieren, badges. Die gaan nu allemaal naar een en dezelfde maat, en dat is precies waar de winst zit. ------------------------------------------------------------------------ */ --tekst-12: 0.75rem; --tekst-15: 0.9375rem; --tekst-17: 1.0625rem; --tekst-19: 1.1875rem; --tekst-22: 1.375rem; --tekst-28: 1.75rem; --tekst-36: 2.25rem; --tekst-46: 2.875rem; /* -- Afstand ------------------------------------------------------------- Negen stappen, vanaf 6 telkens ongeveer maal 1,4 - de wortel van twee. Deze ladder is niet bedacht maar gevonden. De eerste gedachte was het gebruikelijke acht-puntsraster (4, 8, 12, 16, 24, 32 ...), maar dat past slecht op wat er staat: van de 529 afstandswaarden in de drie stylesheets zouden er 362 moeten verschuiven, 79 daarvan met meer dan twee pixels, samen 867 pixels. Daar wordt de hele site strakker van, en dat is een herontwerp en geen gelijktrekken. Toen bleek waarom het niet paste: de meest gebruikte waarden zijn 6 (58x), 20 (58x), 12 (57x), 14 (53x) en 10 (50x). Daar zit al een ritme in van maal 1,4; er staat alleen ruis omheen - 5, 7, 9, 11, 13, 18, 22 - die niemand kan benoemen. Op deze ladder blijven 273 waarden staan, verschuiven er 236 hooguit twee pixels en 20 wat verder. Samen 507 pixels in plaats van 867. 2 haarafstand: een label tegen zijn waarde aan 4 binnen een woordgroep 6 tussen etiketten, en de binnenrand van een badge 10 tussen regels in een kaart 14 binnenrand van een kaart, tussen velden in een formulier 20 tussen kaarten, binnenrand van een paneel 28 tussen blokken op een pagina 40 boven een nieuw hoofdstuk 56 rond de opening en onderaan de pagina In pixels en niet in rem: afstand hoort mee te schalen met het scherm, niet met de tekstinstelling van de bezoeker - anders valt een raster uit elkaar zodra iemand grotere letters kiest. Twee soorten waarden staan er bewust niet op: - Negatieve. Die zijn hier geen vormgeving maar techniek, zoals de clip van .visueel-verborgen. - Alles boven 56 px. Dat zijn er drie, en het is alle drie ruimte die voor een element is vrijgehouden: 150 px voor de vergelijkbalk, 76 px voor de adviesbalk, 90 px zodat een anker onder de plakkende kop uit komt. Op de ladder trekken zou de balk over het laatste veld leggen. ------------------------------------------------------------------------ */ --ruimte-2: 2px; --ruimte-4: 4px; --ruimte-6: 6px; --ruimte-10: 10px; --ruimte-14: 14px; --ruimte-20: 20px; --ruimte-28: 28px; --ruimte-40: 40px; --ruimte-56: 56px; /* -- Hoekronding --------------------------------------------------------- Drie maten en een pil. Er stonden er zeven tot negen: 3, 4, 5, 6, 8, 10, 16 en 999 px door elkaar heen, waarbij 3 naast 4 naast 5 niets toevoegt behalve dat twee dingen die naast elkaar staan nooit helemaal uitlijnen. --radius en --radius-klein hielden hun naam en hun waarde: die twee waren al goed en worden op honderden plekken gebruikt. Alleen de losse waarden eromheen zijn hierheen gehaald. ------------------------------------------------------------------------ */ /* De ronding zegt wat een ding is, niet hoe modern het eruitziet. Een pil was hier een tijdlang de standaardvorm voor knoppen, invoervelden, menulinks en etiketten door elkaar; dan zegt de vorm niets meer. De verdeling hieronder is de afspraak, en de keuring rekent erop. */ /* Oktober 2026: alle vier op 4 px. Juist de grote rondingen en de pil maakten dat de sites op het standaardsjabloon leken. De namen blijven, zodat een ding nog steeds zegt wat het is, en een site die het anders wil, zet hier één waarde om. */ --radius-mini: 4px; /* vinkje, streepje, staafje, voortgangsbalk */ --radius-klein: 4px; /* iets waar je op klikt of in typt: knop, invoerveld, keuzelijst, menulink */ --radius: 4px; /* iets wat inhoud omsluit: kaart, paneel, kader */ --radius-pil: 4px; /* een etiket dat je alleen leest (badge, score, meetbalk), en verder niets */ } /* -------------------------------------------------------------------------- Koppen die niemand een maat had gegeven Een deel van de koppen had helemaal geen font-size: die vielen terug op de standaard van de browser, en die rekent in em. Op batterijmaatje en warmtepompmaatje werd een h2 daardoor 25,5 px (1,5 x 17) en op zonnestroommaatje 24 px (1,5 x 16) - hetzelfde element, twee maten, puur omdat de basistekst verschilde. Precies het soort verschil dat je voelt zonder te kunnen aanwijzen waarom. Deze regels zijn de bodem. Elke bestaande regel is specifieker en wint, dus de hero-kop houdt zijn clamp en de inhoudspagina houdt zijn eigen maat. -------------------------------------------------------------------------- */ h1 { font-size: var(--tekst-36); } h2 { font-size: var(--tekst-28); } h3 { font-size: var(--tekst-19); } h4, h5, h6 { font-size: var(--tekst-17); } /* krijgt bewust geen trede. Het element betekent "een maatje kleiner dan waar het in staat", en dat is een verhouding, geen maat. Vastzetten op 12 px zou de hulpteksten in een formulier kleiner maken dan ze nu zijn; vastzetten op 15 px zou de bijschriften in een kaart juist groter maken. Beide zijn slechter dan de regel die er al is. */