1 of 20

Bootstrap 5

“I can do this all day”

Mikel Martín - Moppies Team

mikel@moodle.com

​

2 of 20

The process

PopperJS upgrade �

SCSS Deprecation process�

BS4 Refactoring in advance

​

Create a BS5 “bridge”�

BS5 upgrade

​

BS4 compatibility layer

​

Final deprecation

​

4.4

4.5

5.0

6.0

3 of 20

The process

Status

  • 🟢 PopperJS upgrade MDL-75673
  • 🟢 SCSS Deprecation process MDL-78334
  • 🟢 BS4 Refactoring in advance MDL-79914
  • 🟢 Create a BS5 “bridge” MDL-79917
  • 🟢 BS5 upgrade MDL-75669
  • 🟢 BS4 backward-compatibility layer MDL-80519
  • ⚪️ Final deprecation

4 of 20

What that means for me?

5 of 20

Bootstrap in Moodle

*.mustache

*.php

*.js

*.css

6 of 20

¡Breaking changes! 😱

  • Lots (really, lots!) changes
    • Lots of changes in forms
    • Final deprecations
    • Utilities renaming
    • Removing some JQuery
    • RTL support
    • Javascript data-attributes
    • …
  • Dev docs for migration

7 of 20

What do I need

to do?

8 of 20

Example #1

.form-inline and .form-group

9 of 20

Example #2

.pr-, .ml-, .text-left, .float-right, ...

10 of 20

Example #3

data-attributes

11 of 20

Example #4

JQuery

12 of 20

More information

Moodle devdocs

Documentación Bootstrap

https://moodledev.io/docs/5.0/guides/bs5migration

https://getbootstrap.com/docs/5.0/migration/

13 of 20

How could I detect the changes

14 of 20

Behat would help you!

1

2

Run behat test using “--scss-deprecations” parameter

Check them and fix the errors

15 of 20

Design mode also helps

1

2

Enable setting

Analyse and fix the errors

Deprecated style in use (.mr)

16 of 20

Too many things,

do I have time?

17 of 20

Compatibility layer

  • SCSS backwards compatibility: Compatibilidad con clases más comunes de BS4
    • .pr-1, .ml-0, .ml-sm-auto
    • .sr-only
    • .form-group, .form-check, .form-inline
    • …
  • Data-attributes helper: Compatibilidad con data-attributes previos
    • data-toggle → data-bs-toggle
    • data-trigger → data-bs-trigger
    • …
  • Compatibilidad jQuery

​

18 of 20

Some more helpful documentation

19 of 20

Danke!

20 of 20

Copyright 2023 © Moodle Pty Ltd