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>
1.4 KiB
CIBG Huisstijl
This package contains all that files that are required to build front-end applications meeting the CIBG design criteria.
Getting started
After installation you can use the code examples from https://applicationframework.cibg.nl/ontwerp in your application.
-
Copy all files and assets To use the CIBG Huisstijl you have to copy all assets and the huisstijl.min.css file into your project. If you are including the CIBG Huisstijl as a dependency you should integrate the copying of assets and files in your build script to make sure you always have all updated files when the package is updated.
-
Copy Bootstrap and JQuery Javascript (Optional) The CIBG Huisstijl is a customized and extended build of Bootstrap. Bootstrap's Javascript is only required if you are want to make use of Bootstrap to bring your app to life. For more information go to https://getbootstrap.com/docs/4.4.1/getting-started/javascript/
Note that the code examples in our design system use Bootstrap.JS and JQuery.
Extending the styling
The NPM package on purpose does not contain source files to prevent projects from customizing the Huisstijl. The CIBG Huisstijl contains styling for all components that are described in the design system and should cover most of your needs.
If you feel like something is missing and feel the need to extend the CIBG Huistijl you can use the ./scss/_variables.scss file as a basis.