Edwin van den Houdt
b443f1fc04
The portal now adheres to the CIBG design system (designsystem.cibg.nl) — a customized Bootstrap 5.2 build — replacing the Rijkshuisstijl-Community / Utrecht theme. See ADR-0003. - Vendor @cibg/huisstijl@3.22.0 under public/cibg-huisstijl/, loaded via a <link> in index.html (Storybook serves it via staticDirs). Drop the two @rijkshuisstijl-community deps. - Token bridge in styles.scss: redefine the app's ~54 --rhc-* tokens onto CIBG/--bs-* values, so components keep referencing tokens (no 300+ site rewrite). System-font stack; licensed RO/Rijks text fonts intentionally not shipped. - Re-skin every shared atom to Bootstrap/CIBG classes (btn, form-control, form-check-*, table, breadcrumb, …) keeping their input() APIs. alert is hand-rolled (CIBG drops .alert); local .card/.badge renamed to avoid Bootstrap collisions. - Domain pages: drop stray rhc-*/utrecht-* classes; registration-table → table table-striped. Verified: build green, check:tokens OK, lint clean, 174 tests pass, build-storybook OK, and the served build loads the vendored CSS (200, .btn-primary present). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
3.9 KiB
Migratie naar CIBG Huisstijl 2.0.0
In dit document staat beschreven welke stappen er moeten worden doorlopen om een prototype bij te werken naar versie 2.0.0 van de CIBG Huisstijl. Deze versie is gebaseerd op Bootstrap 5.2, waardoor er een aantal class en data-attribute migraties moeten worden doorgevoerd.
Je kunt deze migratiegids ook gebruiken voor het bijwerken van de applicaties. In appplicaties is Bootstrap alleen geen dependency, dus deze hoef je dan ook niet bij te werken.
Voorbereiding
- Update naar CIBG Huisstijl 2.0.1 package (
npm install -s @cibg/huisstijl@2.0.1) - Update de boostrap dependency naar versie 5.2.0. Dit is nodig omdat we de bootstrap.bundle.min.js van Bootstrap gebruiken (alleen voor prototypes).
Hernoemingen
Er zijn een aantal classes en data-attributes gewijzigd. Doorloop de onderstaand wijzigingen. Hierin de dingen die we vaak gebruiken in prototypes.
Let op dat je alles in de folder 'pages' en 'includes' vervangt, maar vooral niet de eventueel gearchiveerde sprints omdat deze nog gebruik maken van Bootstrap 4.X.
De hernoemingen die hieronder staan zijn veel in prototypes gebruikte classes. Het kan echter zijn dat je zelf nog andere classes gebruikt die gewijzigd zijn. Werkt iets niet naar verwachting? Check dan de Bootstap 5 migration guide op https://getbootstrap.com/docs/5.2/migration/ om te kijken of je classes gebruikt die gewijzigd zijn.
Classes
De volgende classes worden veel gebruikt in de prototypes en moeten worden hernoemd. Let op dat je eerst de skiplink class vervangt en daarna de screenreader-only classes.
| Was | Wordt |
|---|---|
sr-only sr-only-focusable |
visually-hidden-focusable |
sr-only |
visually-hidden |
ml-* |
ms-* |
mr-* |
me-* |
pl-* |
ps-* |
pr-* |
pe-* |
text-left |
text-start |
text-right |
text-end |
font-weight-* |
fw-* |
badge badge-primary |
badge bg-primary |
dropdown-menu-right |
dropdown-menu-end |
dropdown-menu-left |
dropdown-menu-start |
Classes van dropdown select lists
Styling van dropdowns is verplaats onder een andere class-name, waardoor de classes veranderd moeten worden. Wijzig de
class van select elementen met de class form-control naar form-control form-select. Dit kun je niet met een
(eenvoudige) replace-all doen, omdat andere controls ook de form-control gebruiken.
Let op: Dit is niet van toepassing bij de paginering select, die gebruikt andere classes die niet gewijzigd zijn.
Data attributes (alleen voor prototypes)
Bootstrap data-toggles zijn voortaan genamespaced. Alle data-*="*" moeten worden gewijzigd in data-bs-*="*".
| Was | Wordt |
|---|---|
data-toggle="tab" |
data-bs-toggle="tab" |
data-toggle="tooltip" |
data-bs-toggle="tooltip" |
data-toggle="dropdown" |
data-bs-toggle="dropdown" |
data-toggle="collapse" |
data-bs-toggle="collapse" |
data-toggle="modal" |
data-bs-toggle="modal" |
data-dismiss="modal" |
data-bs-dismiss="modal" |
data-target="" |
data-bs-target="" |
data-original-title="" |
data-bs-title="" |
Javascript
Controleer of er javascript in je project zit dat dymamisch HTML injecteert en of daarin de bovenstaande hernoemingen
voorkomen. In een standaard project is dit meestal alleen een sr-only class voor menu-items in de header.