theme/boost/upgrade.txt

   1 This file describes API changes in /theme/boost
   2 information provided here is intended especially for theme designers.
   3
   4 === 3.5 ===
   5
   6 The Boost theme now uses Bootstrap 4 Stable (BS4S).
   7
   8 We are trying to use as much BS4S classes in MDL Templates to reduce the amount of Moodle CSS.
   9
  10 The biggest changes are:
  11
  12 JavaScript
  13 ----------
  14 * All Bootstrap javascript has been updated.
  15
  16 Sass
  17 ----
  18 * A number of variables are no longer available in Bootstrap 4 Stable. For now a bs4alpha compatibility file has been added, see scss/bs4alphacompat.scss which translates veriable names from the Alpha version to the stable version.
  19
  20 * m-t-* and other spacing utilities should be replaced with mt-*.
  21
  22 The units that were used for margins have changed too
  23 m-t-1 is now mt-3
  24 m-t-2 is now mt-4
  25 m-t-3 is now mt-5
  26
  27
  28 Grid and Flexbox
  29 ----------------
  30 The Boostrap grid uses CSS's flexbox grid to build layouts.
  31
  32 New breakpoints for grids have been added:
  33 .col-*  <576px
  34 .col-sm-* >= 576px
  35 .col-md-* >= 768px
  36 .col-lg-* >= 992px
  37 .col-xl-* >= 1200px
  38
  39 All usage of '*-xs-*' have been dropped. So what used to be col-xs-6 should now be written as col-6.
  40
  41 *-md-* has become *-lg-*, and *-lg-* has become *-xl-*.
  42
  43 Typography
  44 ----------
  45 Boostrap 4 uses a native font stack that selects the best font-family for each OS and device. For font sizing the browser default root font-size (typically 16px) is used. this variable can be changed using the variable '$font-size-base'.
  46 In the default Boost preset we use: "0.9375rem" which computes to 15px on most browser.
  47
  48 Presets
  49 -------
  50 The structure of preset files have changed. The new structure of a preset file is:
  51
  52 // Space to set variables.
  53 $font-size-base: 0.9375rem
  54
  55 // Import FontAwesome.
  56 @import "fontawesome";
  57
  58 // Import All of Bootstrap.
  59 @import "bootstrap";
  60
  61 // Import Core moodle CSS.
  62 @import "moodle";
  63
  64 // Space to use Bootstrap mixins and extends.
  65 .navbar {
  66   @include shadow();
  67 }
  68
  69 Bootswatches
  70 ------------
  71 Bootstrap 4 bootswatches can be imported using the theme/boost/cli/import-bootswatch.php script. Generated bootswatches can be added in the theme boost settings page.
  72
  73 Changed Components
  74 ------------------
  75 Cards need this structure
  76  class='card'
  77     class='card-body'
  78 This used to be 'card-block'
  79
  80 The header.mustache template has been replace by a navbar.mustache template for name consistancy with Bootstrap
  81
  82 A new header.mustache template has been created served from core/core_renderer.php. This should be move to core at some point.
  83
  84
  85 === 3.4 ===
  86 * For improved accessibility, the footer links for boost have been changed to use $bg-inverse-link-color (defaults to white) and
  87   now have an underline text-decoration. To override the link colour simply set $bg-inverse-link-color in your preset file or
  88   theme scss.
  89 * To match the new primary colour we are switching to using the UX pallette, which uses a purple colour for info. To override,
  90   set $brand-info in your preset file or theme scss.