NLDS - NL Design System

De interface van de applicatie is opgebouwd met componenten uit het NL Design System (NLDS). Dit is een verzameling ontwerp- en ontwikkelrichtlijnen voor digitale overheidsdiensten in Nederland. Door gebruik te maken van NLDS-componenten blijft de gebruikerservaring consistent en toegankelijk, in lijn met de standaarden van de overheid.

🔗 Introductie NLDS 🔗 NLDS voor developers

Aanpasbaarheid voor gemeentes

Dankzij NLDS kunnen verschillende installaties van de applicatie eenvoudig worden aangepast aan de huisstijl van diverse gemeentes. Dit wordt mogelijk gemaakt door het gebruik van design tokens, die de stijlkenmerken zoals kleuren, typografie en componenten bepalen.

Implementatie op basis van Utrecht Design System

Op dit moment is de implementatie gebaseerd op alleen het Utrecht Design System, een specifieke variant van NLDS. Voor een correcte weergave en de beste resultaten moeten ten minste de Brand en Common tokens correct ingevuld zijn.

Gebruikte CSS-componenten

Component	Storybook
Document (utrecht-document)	🔗 Design Tokens
Surface (utrecht-surface)	🔗 Design Tokens
Page (utrecht-page)	🔗 Design Tokens
Page header (utrecht-page-header)	🔗 Design Tokens
Page content (utrecht-page-content)	🔗 Design Tokens
Page footer (utrecht-page-footer)	🔗 Design Tokens
Navigation bar (utrecht-nav-bar)	🔗 Design Tokens
Link (utrecht-link)	🔗 Design Tokens
Skip link (utrecht-skip-link)	🔗 Design Tokens
Article (utrecht-article)	🔗 Design Tokens
Heading (utrecht-heading)	🔗 Design Tokens
Paragraph (utrecht-paragraph)	🔗 Design Tokens
Unordered list (utrecht-unordered-list)	🔗 Design Tokens
Button (utrecht-button)	🔗 Design Tokens
Form field (utrecht-form-field)	🔗 Design Tokens
Form label (utrecht-form-label)	🔗 Design Tokens
Textbox (utrecht-textbox)	🔗 Design Tokens
Table (utrecht-table)	🔗 Design Tokens
Logo (utrecht-logo)	🔗 Design Tokens

ITA Theme

Naast de bovenstaande componenten bestaat de interface van de applicatie ook uit verschillende custom componenten en elementen. Deze (ita) componenten en elementen kunnen via een aantal voorgedefinieerde css-variabelen worden aangepast voor een uniforme uitstraling binnen de huisstijl van de gemeente.

Ter referentie ita-theme.

Test Theme

In de public folder van de ITA Web.Client applicatie staan test-theme.css en test-logo.svg. Om de installatie van de applicatie te testen kunnen verwijzingen naar deze bestanden worden gebruikt bij de configuratie van de omgevingsvariabelen. Let op: deze verwijzingen moeten absolute URL’s zijn, zie config_omgevingsvariabelen.

"THEME_NAAM": "test-theme",
"LOGO_URL": "https://<host>/test-logo.svg",
"DESIGN_TOKENS_URL": "https://<host>/test-theme.css"

De test-theme bestanden kunnen daarnaast gebruikt worden om in een ontwikkelomgeving wat custom waardes te testen.

.test-theme {
    // utrecht
    --utrecht-link-color: #333; // custom waarde

    // ita
    --ita-dashboard-tables-column-gap: 2rem; // custom waarde
}