Contrib.social

Bootstrap 5: Do we need all those CSS variables?

Open on Drupal.org →
Created on 26 September 2023, over 1 year ago

Problem/Motivation

There is an issue with current Bootstrap 5 upstream. When they introduced CSS Variables (the tokens overridable at runtime), they turned many (or all?) Sass Variables (the tokens, overridable at buildtime) into CSS variables.

Bootstrap 5.3 has 393 CSS Variables, and we have implemented al of them with UI skins: https://git.drupalcode.org/project/ui_suite_bootstrap/-/blob/5.0.x/ui_su...

It is a mess. CSS Variables is a public API with a distinct purpose, and need to be focused and clean. That's why we have:

  • conflicting colors and "colors rgb"
  • misleading variables (they don't do what may be expected, or not as much as expected)

For comparison, Material Design Web 2 has only 36 variables and all of them are clear and useful: https://git.drupalcode.org/project/ui_suite_material/-/blob/2.0.x/ui_sui...

Proposed resolution

Can we remove all CSS variable which are confusing, useless or misleading?

Remaining tasks

We don't know yet if those variables to remove are 20, or 200. We need to do an analysis first.

Maybe, it would be better to act upstream first: https://github.com/twbs/bootstrap/issues

API changes

Unfortunately, it is a breaking change. If someone has overridden a variable we will remove, the value will not be applied anymore.

📌 Task
Status

Active

Version

5.0

Component

Code

Created by

🇫🇷France pdureau Paris

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024