Bootstrap migration tracker

tlylt commented 1 year ago

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

No response

What is the area that this feature belongs to?

Other

Is your feature request related to a problem? Please describe.

We ship MarkBind with Bootstrap v5.1, there are now v5.2 and v5.3. Evaluation can be done to assess whether it's worth migrating to a newer version, either for bug fixing any existing issues or improved styling/capabilities (to find out).

Note that migrating Bootstrap should be done in conjunction with bootswatch, to avoid issue like #2353.

Describe the solution you'd like

[ ] Evaluate pros/cons
[ ] Migrate
[ ] Document the common tasks required during the migration in DG since this is a major dependency of MarkBind

Describe alternatives you've considered

No response

Additional context

No response

KevinEyo1 commented 7 months ago

Benefits of 5.2.x

5.2.0

CSS variables Custom properties to name frequently used variables

Prevents the need for a CSS preprocessor like Sass that replaces the variables during compilation, or writing new selectors for every instance that would require changing of all those instances instead of just changing one variable.

Added a bunch of variables: Root, Component, Utility In-built global property values (prefixed with --bs-), that can be easily customised to own liking

Root Added variables for colors, body font styles, shared properties

Component All new component variables can be found on the Bootstrap documentation, under the Variables section. For example, here are the new Modal CSS variables

Example component customization:

Utilities Added variables for background color, border, text, customising alpha transparency value of rgba() colors.

Border opacity is also newly added

Other relevant additions Added striped columns to tables via .table-striped-columns class. Extra helpers and utilities for easier usage, like using .text-bg-* helpers to set background colour with contrasting foreground colour.

Customized maps (not sure if relevant to MarkBind) New _maps.scss A new Sass file with _maps.scss that pulls out several Sass maps from _variables.scss. Sass has a limitation where once a default variable or map has been used, it cannot be updated. This led to an issue where updates to an original map were not applied to secondary maps that extend it. For example, updates to $theme-colors were not being applied to other maps that relied on it (eg $utilities-colors).

The following maps have been moved to the new _maps.scss:

$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters

5.2.1

General bug fixes and dependency updates Updated calc() function Changes: reverse order of multiplication inside calc() if multiplying negative number

5.2.2, 5.2.3

General bug fixes and upgrade of dependencies

kaixin-hc commented 7 months ago

On its own, these features don't look /super/ immediately useful to me - but it seems it is a dependency for the newer bootswatch themes. Are the newer versions of Bootswatch themes nicer?

What do @MarkBind/active-devs think?

KevinEyo1 commented 7 months ago

5.3.0 Color Mode Support Dark mode support as well as customizable color modes using data-bs-theme, with rebuilding of components to better respond to color modes Color mode for whole page

<!doctype html>
<html lang="en" data-bs-theme="dark">
  <!-- ... -->
</html>

Color mode for specific component

<div class="dropdown" data-bs-theme="dark">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
    Dark dropdown
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
    <li><a class="dropdown-item active" href="#">Action</a></li>
  </ul>
</div>

Link helper and utilities Can now use links with Bootstrap Icons

Focus ring helper

After clicking:

New classes for link opacity and underline offset, color and opacity

5.3.1, 5.3.2, 5.3.3 General bug fixes and enhancements for color modes, stabilises color modes and dark mode

Bootswatch Themes have in-built dark mode support which can be easily accessed on the Bootswatch blog

I have tested by updating the version and looking through the served pages and have found no breaking changes.

kaixin-hc commented 6 months ago

@KevinEyo1 Supporting dark mode is pretty cool and useful. I will remove the under discussion tag as I consider this a nice-to-have. Do take a stab at this if you are interested!

MarkBind / markbind