Remove mention of removed typographic breakpoint and make grid docs a…

… bit more direct

storybook/storybook-docs/src/grid.stories.mdx

@@ -11,9 +11,8 @@ Alle elementen op een pagina worden op dat grid geplaatst.
 
 ### Vier, acht of twaalf kolommen
 
-Het grid bezet steeds de volledige beschikbare breedte.
-Afhankelijk van die breedte verandert het aantal kolommen van het grid.
-Alle kolommen zijn even breed.
+Het grid verdeelt het scherm horizontaal in kolommen van gelijke breedte.
+Hoe breder het scherm, des te meer kolommen.
 
 In vensters tot 576 pixels breed levert het grid 4 kolommen.
 Tot een breedte van 1088 pixels zijn dat er 8.
@@ -26,7 +25,7 @@ Zo is 576 = 64 + 2 × 256 en 1088 = 64 + 4 × 256.
 
 Op deze breakpoints verandert alleen het aantal kolommen.
 Die worden daardoor smaller of breder en de elementen erop dus ook.
-Rond een breakpoint kunnen elementen van plaats veranderen op de pagina.
+De witruimtes tussen en naast de kolommen groeien over het hele spectrum steeds in hetzelfde tempo.
 
 ### Twee thema’s voor witruimte
 
@@ -56,36 +55,28 @@ Voor applicaties is zo veel witruimte niet nodig, zelfs contraproductief.
 Daarom is er ook een compact thema voor het grid.
 
 De minimale witruimte tussen kolommen is ook hier 16 pixels.
-Maar deze begint pas op een vensterbreedte van 1088 pixels te groeien.
+Maar deze begint pas vanaf een vensterbreedte van 1088 pixels te groeien.
 De toename gaat ook langzamer: 4 pixels per 256 pixels extra breedte.
 (Dit komt neer op 1 en 9/16 procent van de schermbreedte min 1 pixel.)
 Het maximum is hier 40 pixels en dat wordt pas bereikt bij een vensterbreedte van 2624 pixels.
 
-Alle andere eigenschappen van het compacte thema zijn gelijk aan die van het ruimtelijke.
-
 ### Marges links en rechts
 
 Aan beide zijden reserveert het grid marges van witruimte.
 
 #### Ruimtelijk
 
 In het ruimtelijke thema is deze ruimte 1½ keer zo breed als die tussen de kolommen.
-Zo is er genoeg ruimte tussen het grid en de randen van het scherm.
+Zo is er genoeg ruimte tussen het grid en de randen van het scherm of venster.
 
 Sommige elementen mogen over deze marges gepositioneerd worden, zoals schermvullende afbeeldingen en de voettekst van de pagina.
-Die zijn dan dus breder dan de rest van de content.
-
-Dit thema is gericht op websites.
-Het ligt voor de hand om het grid te beperken tot een maximale breedte.
-Het grid wordt dan automatisch gecentreerd.
+Die zijn dan dus iets breder dan de rest van de content.
 
 #### Compact
 
 In het compacte thema zijn de marges buiten het grid even breed als de witruimtes erbinnen.
 Hier worden geen elementen over de marges heen geplaatst.
 
-Dit thema is geschikt voor applicaties die de volledige schermbreedte benutten.
-
 ### Menubalk
 
 Applicaties hebben in het brede grid een verticale menubalk aan de linkerzijde.
@@ -99,7 +90,7 @@ In deze context neemt het grid wel de hele breedte van het venster in.
 Een maximale breedte voor het grid zorgt ervoor dat witruimte en typografie niet onbeperkt doorgroeien.
 Zo raken de elementen van een pagina niet te ver van elkaar verwijderd en blijft tekst prettig leesbaar.
 
-Voor websites, in het ruimtelijke thema, is de maximale breedte van het grid 1432 pixels.
+Voor websites is de maximale breedte van het grid 1432 pixels.
 In vensters van minimaal 1600 pixels breed heeft het grid deze breedte – de marges bedragen hier 84 pixels.
 
 Applicaties, die het compacte thema gebruiken, nemen de volledige breedte van het venster in.
@@ -111,11 +102,12 @@ Voor het gemak speelt de breedte van 320 wel een rol in de documentatie.
 
 ## Maatvoering
 
-Deze ontwerpkeuzes hebben in de praktijk het volgende resultaat.
+Deze ontwerpkeuzes leveren in de praktijk het volgende resultaat in pixels.
 
 ### Breedtes per breakpoint
 
-Op de drie breakpoints hebben de kolommen, witruimtes en marges de volgende breedtes in pixels.
+Op de drie breakpoints hebben de kolommen, witruimtes en marges de volgende breedtes.
+Nogmaals: daartussen groeien de breedtes continu.
 
 #### Ruimtelijk
 
@@ -150,17 +142,20 @@ ga er dan vanuit dat telefoons in staande modus en ‘split screen’ vensters o
 telefoons in liggende modus en tablets in staande het 8-koloms,
 en tablets in liggende modus,
 laptops en grotere beeldschermen het 12-koloms.
-Om hoeveel pixels het dan precies gaat is niet van belang.
+Om hoeveel pixels het dan precies gaat is niet zo van belang.
 
 ### Referentie-breedtes voor ontwerpers
 
-Ondanks dat is het bij het ontwerpen van een scherm toch nodig een bepaald canvas te kiezen.
-Ook is het goed om te bepalen hoe een ontwerp op ‘een dekstop’, ‘een tablet’ of ‘op mobiel’ zich houdt.
+Leuk, al die flexibiliteit.
+Maar bij het ontwerpen van een scherm is het toch nodig een bepaald canvas te kiezen.
+Voor elk ontwerp wil je bepalen hoe het zich op ‘een dekstop’, ‘een tablet’ of ‘mobiel’ houdt.
 
 Daarom werken we in Figma we met drie referentie-breedtes.
-Op die breedtes werken we het ontwerp van een scherm uit te werken voor die drie klassen van apparaten.
-We weten dat in de werkelijkheid veel meer variatie bestaat – maar we moeten toch ergens op mikken.
-Op deze breedtes is de maatvoering als volgt.
+Op die breedtes werken we het ontwerp van een scherm uit voor die drie klassen van apparaten.
+We weten dat er in de werkelijkheid veel meer variatie bestaat, maar we moeten toch ergens op mikken.
+Deze grids vind je in Figma Library onder de ‘Grid styles’.
+
+In deze drie situaties is de maatvoering als volgt.
 
 #### Ruimtelijk
 
@@ -196,19 +191,15 @@ Layout en tekst hebben op verschillende manieren met elkaar te maken.
 
 ### Schalende typografie
 
-In het grid zijn dus zowel de breedte van de kolommen, de witruimtes als de marges flexibel.
-Ook de [tekstgroottes](?path=/docs/docs-designrichtlijnen-typografie--docs) reageren op de vensterbreedte.
+Net als het grid reageren ook de [tekstgroottes](?path=/docs/docs-designrichtlijnen-typografie--docs) reageren op de vensterbreedte.
 Dat zorgt ervoor dat content op zo veel mogelijk vensterbreedtes en met diverse persoonlijke instellingen goed tot zijn recht komt.
 
-Op dit moment reageert de typografie nog op 1 breakpoint bij een vensterbreedte van 854 pixels.
-Dat was al eerder zo ontworpen en gebouwd.
-Nu het grid verder ontwikkeld is, stemmen we de typografie daar weer op af.
-Dit aparte breakpoint komt dus snel te vervallen.
-
 ### Inzoomen of vergrote tekst
 
 Mensen kunnen de weergave van een webpagina vergroten door in te zoomen of door een grotere tekstgrootte in te stellen.
-De maatvoering van het grid houdt daar rekening mee: door de breakpoints mee te laten schalen verandert het aantal kolommen eerder zodat de inhoud goed blijft passen.
+De maatvoering van het grid houdt daar rekening mee.
+De breakpoints schalen mee met de effectieve tekstgrootte.
+Zo verandert het aantal kolommen eerder en blijft grotere inhoud goed passen.
 
 ## Gerelateerde componenten