/* ds-primitieven.css — Kolom, Stapel, Rij, Raster, Sectie. * * De enige manier waarop een pagina of een patroon iets plaatst. Geen van de vijf draagt een * eigen kleur, letter of rand; wie hier een kleur ziet staan, leest een fout. * * Waarom ze bestaan: de audit vond 289 verschillende vormen in de familie "indelingsblokken", * en het grootste deel daarvan is een doos met een marge eronder. Die marge staat 1.848 keer * los geschreven. Vijf primitieven met een gesloten ruimteprop vervangen dat. * * Elke maat komt uit een token. Een waarde die hier letterlijk staat is een fout die de lint * van fase 5 hoort te vangen. */ @layer primitieven { /* --- Kolom ----------------------------------------------------------------------------- De paginakolom: breedte, goot, en het element waar het landmark op hangt. Het enige onderdeel dat een maximale breedte zet. Vijfentwintig van de 53 gemeten pagina's dragen vandaag geen
; die komt hier vandaan. */ .ds-kolom { inline-size: 100%; margin-inline: auto; padding-inline: var(--ds-space-blok); } .ds-kolom--lees { max-inline-size: var(--ds-maat-kolom); } /* 900px is --ds-breekpunt-breed; een mediavraag kan geen custom property lezen, dus het getal staat hier letterlijk. Strikt groter dan en niet vanaf: Modern Delft zet zijn smalle waarden in `@media (max-width: 900px)`, dus op precies 900px is het merk smal. Met `min-width: 900px` was het systeem daar breed en het merk smal, en dat verschil van een pixel viel nergens op omdat geen enkele meting op de rand zelf keek. */ @media (width > 900px) { .ds-kolom--lees { max-inline-size: var(--ds-maat-kolom-breed); } } /* DE GOOT TELT NIET MEE IN DE DOCUMENTBREEDTE, 14 september 2026. `box-sizing` is border-box (ds-basis.css), dus met `max-inline-size: maat.document` at de goot van `space.blok` aan weerszijden de inhoud op: 1180 min tweemaal 32 is 1116. Gemeten bij 1280px: mijn secties stonden op x82 met een breedte van 1116, waar staging er 1178 draagt die op x51 begint. Dat verschil van 31px zie je zodra je tussen twee pagina's van dezelfde site wisselt. De goot komt er nu bij op, dus de INHOUD is maat.document breed en de goot blijft op een smal scherm staan. */ .ds-kolom--document { max-inline-size: calc(var(--ds-maat-document) + 2 * var(--ds-space-blok)); } .ds-kolom--vol { max-inline-size: none; padding-inline: 0; } /* --- Stapel ---------------------------------------------------------------------------- Dingen onder elkaar met een ruimtestap ertussen. De ruimte staat op de ouder en niet als marge op elk kind, zodat het eerste en het laatste kind geen uitzondering nodig hebben. */ .ds-stapel { display: flex; flex-direction: column; gap: var(--stapel-ruimte, var(--ds-space-kop-tekst)); align-items: stretch; } .ds-stapel--inline { --stapel-ruimte: var(--ds-space-inline); } .ds-stapel--tussen { --stapel-ruimte: var(--ds-space-tussen); } .ds-stapel--binnen-blok { --stapel-ruimte: var(--ds-space-binnen-blok); } .ds-stapel--kop-tekst { --stapel-ruimte: var(--ds-space-kop-tekst); } .ds-stapel--blok { --stapel-ruimte: var(--ds-space-blok); } .ds-stapel--blok-groot { --stapel-ruimte: var(--ds-space-blok-groot); } .ds-stapel--sectie { --stapel-ruimte: var(--ds-space-sectie); } .ds-stapel--afsluiting { --stapel-ruimte: var(--ds-space-afsluiting); } .ds-stapel--begin { align-items: flex-start; } .ds-stapel--midden { align-items: center; } .ds-stapel--uitrekken { align-items: stretch; } /* --- Rij ------------------------------------------------------------------------------- Twee of meer dingen naast elkaar. Hij breekt af in plaats van de pagina breder te maken: dat is de regel die op 320px het verschil is tussen lezen en schuiven. DE UITLIJNING STAAT HIER EN NIET IN DE TERUGVAL VAN FLEXBOX. Zonder deze regel is de standaard stretch, en stretch stond niet in de verzameling van Rij: de standaardvorm had dus geen naam. Erger dan naamloos was wat hij deed. Een flexkind rekt uit tot de hoogste buur, dus de hoogte van een Link of een Knop in een Rij hing aan wat er toevallig naast stond; in de registratie kwam dezelfde Link een keer als h:18 en een keer als h:55 langs. Met flex-start is de hoogte van een bediening weer van de bediening. Wie gelijke hoogte wil, vraagt er nu om met uitrekken, en dat is precies een plek: de bladen van een Bladerband. Stapel krijgt zijn stretch hierboven om dezelfde reden opgeschreven, al verandert daar niets aan het beeld: een kolom die zijn kinderen laat uitrekken is wat je van een kolom verwacht, maar een standaard zonder naam blijft een standaard zonder naam. */ .ds-rij { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--rij-ruimte, var(--ds-space-tussen)); align-items: flex-start; } .ds-rij--inline { --rij-ruimte: var(--ds-space-inline); } .ds-rij--tussen { --rij-ruimte: var(--ds-space-tussen); } .ds-rij--binnen-blok { --rij-ruimte: var(--ds-space-binnen-blok); } .ds-rij--blok { --rij-ruimte: var(--ds-space-blok); } .ds-rij--begin { align-items: flex-start; } .ds-rij--midden { align-items: center; } .ds-rij--grondlijn { align-items: baseline; } .ds-rij--uitrekken { align-items: stretch; } .ds-rij--verdeel-begin { justify-content: flex-start; } .ds-rij--verdeel-uiteen { justify-content: space-between; } .ds-rij--verdeel-einde { justify-content: flex-end; } .ds-rij--niet-omslaan { flex-wrap: nowrap; } /* --- Raster ---------------------------------------------------------------------------- Een gelijkmatig raster dat op een smalle container stapelt. Het omslagpunt is een containervraag en geen mediavraag: dezelfde kaartenrij staat in een brede pagina en in een smalle kolom, en die twee moeten los van elkaar kunnen omslaan. */ .ds-raster { display: grid; container-type: inline-size; gap: var(--raster-ruimte, var(--ds-space-blok)); grid-template-columns: 1fr; } .ds-raster--tussen { --raster-ruimte: var(--ds-space-tussen); } .ds-raster--binnen-blok { --raster-ruimte: var(--ds-space-binnen-blok); } .ds-raster--blok { --raster-ruimte: var(--ds-space-blok); } /* Het omslagpunt is een prop met drie waarden en geen vaste ladder. Hier stond er wel een, op 26rem en 44rem, en die twee getallen stonden nergens in het voorstel; raster.omslag.tegel en raster.omslag.vork waren daardoor dode tokens. Een containervraag kan geen custom property lezen, dus de drie drempels staan hier als getal met het token ernaast. 600px is raster.omslag.tegel, 700px raster.omslag.vork, 900px breekpunt.breed. Zonder een omslagklasse blijft het raster een kolom: dat is de veilige stand en geen stille terugval, want een raster zonder omslagpunt weet niet wanneer het mag splitsen. */ @container (min-width: 600px) { .ds-raster--omslag-tegel.ds-raster--2 { grid-template-columns: repeat(2, 1fr); } .ds-raster--omslag-tegel.ds-raster--3 { grid-template-columns: repeat(3, 1fr); } .ds-raster--omslag-tegel.ds-raster--4 { grid-template-columns: repeat(4, 1fr); } } @container (min-width: 700px) { .ds-raster--omslag-vork.ds-raster--2 { grid-template-columns: repeat(2, 1fr); } .ds-raster--omslag-vork.ds-raster--3 { grid-template-columns: repeat(3, 1fr); } .ds-raster--omslag-vork.ds-raster--4 { grid-template-columns: repeat(4, 1fr); } } @container (width > 900px) { .ds-raster--omslag-breed.ds-raster--2 { grid-template-columns: repeat(2, 1fr); } .ds-raster--omslag-breed.ds-raster--3 { grid-template-columns: repeat(3, 1fr); } .ds-raster--omslag-breed.ds-raster--4 { grid-template-columns: repeat(4, 1fr); } } /* --- Sectie ---------------------------------------------------------------------------- Een afgebakend stuk pagina, en de drager van het verticale ritme. De vier stappen komen uit de meting: 205 van de 290 gemeten sectiegaten op de publieke site liggen op zes stappen uit de ruimtetrap, en deze vier zijn de vier die tussen secties voorkomen. */ .ds-sectie { display: block; } .ds-sectie + .ds-sectie { margin-block-start: var(--sectie-ritme, var(--ds-space-sectie)); } .ds-sectie--blok { --sectie-ritme: var(--ds-space-blok); } .ds-sectie--blok-groot { --sectie-ritme: var(--ds-space-blok-groot); } .ds-sectie--sectie { --sectie-ritme: var(--ds-space-sectie); } .ds-sectie--afsluiting { --sectie-ritme: var(--ds-space-afsluiting); } }