Skip to content

Commit e7a7922

Browse files
authored
feat: add CSS Variables and example to styling Micro Frontends (#148)
1 parent 36bab05 commit e7a7922

File tree

1 file changed

+16
-1
lines changed
  • content/posts/2024/08/08/styling-your-legacy-micro-frontends

1 file changed

+16
-1
lines changed

content/posts/2024/08/08/styling-your-legacy-micro-frontends/post.md

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,8 @@ Including coupled packages results in a significant amount of code duplication,
7272

7373
### Set-up
7474

75+
For a full working example, you can have a look to the [two-css-themes](https://github.com/Backbase/backbase-micro-frontends/commits/feature/two-css-themes/) branch of the backbase-micro-frontends repository.
76+
7577
1. Create a `/themes` folder at the root level.
7678
2. Go to the newly created folder and install UI-Ang with its dependencies.
7779
```bash
@@ -117,7 +119,20 @@ $accounts-list-cards-column-min-width: max(
117119
```
118120
And you can replace it with `$accounts-list-cards-column-min-width: max(18.5rem, 25%);`.
119121

120-
After all this steps you shall be able to see the app compiling. Run also the `npm run build` for precaution. And if there are new errors you have to fix them by either commenting the bad lines or finding alternative code that works.
122+
After all these steps you should be able to see the app compiling. Run also the `npm run build` for precaution. And if there are new errors you have to fix them by either commenting the bad lines or finding alternative code that works.
123+
124+
#### CSS custom properties
125+
126+
If your theme relies on the Boostrap 5 [CSS Variables](https://getbootstrap.com/docs/5.0/customize/css-variables/), which is the case in the Backbase design system, you need to include them at root level for everything to work smooth:
127+
```scss
128+
@import '@backbase/backbase-theme-business-preset/scss/main';
129+
130+
// Include Bootstrap 5 custom properties at root level
131+
@import '../../themes/bootstrap5/scss/bootstrap-reboot';
132+
.angular17-theme {
133+
@import '../../themes/angular17-theme/scss/main';
134+
}
135+
```
121136

122137
## Conclusion
123138

0 commit comments

Comments
 (0)