We ♥ Web met Yolijn van der Kolk - Hadil66/we-love-web-notes GitHub Wiki

24-11 Yolijn van der Kolk - NL Design System

Design system: stijlgids, design-kit, componenten-bibliotheek, richtlijnen teksten en microcopy, gedeelde inzichten vanuit user-onderzoek, goed geteste patronen.

NL design system: samen met een community aan een overheids-breed design systeem werken met leveranciers en overheden. (Via estafette-model)

Rekening houden met:

• Kunnen componenten worden gerecycled;
• Elke organisatie heeft een eigen styleguide;
• Elke organisatie laat eigen digitale producten bouwen;
• Code en design in sync;
• Open source, voor iedereen te gebruiken.

Architectuur:

• CSS-componenten met voorspelbare namen;
• Designtokens -> JSON;
• Web componenten waar mogelijke is;
• Framework componenten waar het handig is;
• Documentatie in markdown;
• Storybooks met visuele regressie test.

CSS met BEM -> voorspelbare namen (bekende webstandaard) Samenwerking: Vendor prefix voor class names

CSS variables:

• Namen volgens BEM;
• Geen dubbel underscore of koppeltekens; -> klein risico op onduidelijkheid

Design tokens (iedereen een eigen stijl en design):

• Huisstijl tokens -> kleur, font, etc
• Algemene tokens-> interactie kleuren, font-family, etc
• Component tokens -> border-kleur, achtergrond

JSON -> Een bron van waarheid voor code en design. Figma -> Github -> Style dictionary-> CSS

Toegankelijkheid voor componenten -> accessibility tree testing met @testing-library