Themes

Hi All,

Moodle 3.5 ships with an updated version of theme Boost. This means theme developers that have based their themes on Boost will need to check if an update is needed.

The biggest change is the switch from upstream library Bootstrap version 4 alpha 6 to 4.0.0 Stable. It has taken Bootstrap a long time before 4.0.0 was released and it has changed quite a bit since the 4 alpha 6 release.

Bootstrap library changes that affect Boost most are:

• The use of flex box properties in css for grids
  

This affects a lot of pages, especially pages containing forms.

• Change of classnames:
  

For example

• Changes Sass variables

A number of variable names have been changed. We have added a bs4alphacompat.scss file that will translate some BS 4 Alpha variable names to BS 4 Stable.

Templates changes in Boost:

In addition we have made some changes to our Boost moustache templates to work with the new Bootstrap classes.  The top navbar is now rendered using navbar.mustache (this used to be header.mustache)

Preset changes:

The structure of preset files have changed. The new structure of a preset file is

// Space to set variables.
$font-size-base: 0.9375rem
// Import FontAwesome.
@import "fontawesome";
// Import All of Bootstrap.
@import "bootstrap";
// Import Core moodle CSS.
@import "moodle";
// Space to use Bootstrap mixins and extends.
.navbar {
  @include shadow();
}

In Moodle 3.4 only "moodle" needed to be imported in presets. Now there is a separation between the importing of font awesome, bootstrap and moodle.

If you get stuck updating your theme feel free to post any questions here. And if you have some extra time have a look at all the wonderful new utilities and components ship with Bootstrap 4 stable!