julien
c8e2fba13e
Rewrites all 12 frontend ADRs from a custom structure to the MADR 2.1.2 template required by the VS Code ADR Manager extension: bullet metadata (Status/Date), standardised section headings, "Chosen option: X, because Y" wording, and explicit Pros/Cons blocks per option.
57 lines
2.1 KiB
Markdown
57 lines
2.1 KiB
Markdown
# Coexist Angular Material and Bootstrap during UI library consolidation
|
|
|
|
- Status: accepted
|
|
- Date: 2026-04-26
|
|
|
|
## Context and Problem Statement
|
|
|
|
The application currently uses two UI libraries: Angular Material (interactive components) and Bootstrap 5 (layout, spacing utilities). Bootstrap was the original styling layer; Angular Material was introduced incrementally. Maintaining both increases bundle size, creates styling inconsistencies, and adds cognitive overhead. Which strategy should be adopted?
|
|
|
|
## Considered Options
|
|
|
|
- Keep both libraries and consolidate later
|
|
- Consolidate to Angular Material only
|
|
- Consolidate to Bootstrap only
|
|
- Migrate to a different library (PrimeNG, Spartan/shadcn-angular, etc.)
|
|
|
|
## Decision Outcome
|
|
|
|
Chosen option: "Keep both libraries and consolidate later", because a big-bang UI rewrite is not justified at this stage and the final target library has not yet been chosen.
|
|
|
|
### Positive Consequences
|
|
|
|
- No immediate rewrite required — development velocity is preserved.
|
|
- Each library covers the other's gaps during the transition period.
|
|
|
|
### Negative Consequences
|
|
|
|
- Two styling systems in tension, leading to inconsistent UX.
|
|
- Bootstrap's `@import`-based Sass is incompatible with the `@use` module system, requiring a deprecation workaround (see ADR 0012).
|
|
- Larger CSS bundle than a single-library solution.
|
|
|
|
## Pros and Cons of the Options
|
|
|
|
### Keep both libraries and consolidate later
|
|
|
|
- Good, because no rewrite cost now.
|
|
- Bad, because styling inconsistency and larger bundle persist until consolidation.
|
|
|
|
### Consolidate to Angular Material only
|
|
|
|
- Good, because single coherent design system.
|
|
- Bad, because Bootstrap layout utilities would need to be replaced.
|
|
|
|
### Consolidate to Bootstrap only
|
|
|
|
- Good, because removes Angular Material dependency.
|
|
- Bad, because Angular Material components (dialogs, date pickers, etc.) would need rebuilding.
|
|
|
|
### Migrate to a different library
|
|
|
|
- Good, because could address limitations of both current libraries.
|
|
- Bad, because highest rewrite cost; unknown tradeoffs until evaluated.
|
|
|
|
## Links
|
|
|
|
- Related to [ADR 0012](0012-scss-bootstrap-import-deprecation.md)
|