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.7 ===
   5
   6 * Templates and renderers moved to core.
   7
   8 * Behat override steps moved to core.
   9
  10 Form element template
  11 ---------------------
  12 A 'wrapperid' has been added to 'templates/core_form/element-template.mustache' to restore unique ids
  13 on Boost form element wrappers. This restores the same unique element ids seen on elements in BS2
  14 themes, which were mistakenly dropped when introducing the Boost theme.
  15
  16 === 3.5 ===
  17
  18 The Boost theme now uses Bootstrap 4 Stable (BS4S).
  19
  20 We are trying to use as much BS4S classes in MDL Templates to reduce the amount of Moodle CSS.
  21
  22 The biggest changes are:
  23
  24 JavaScript
  25 ----------
  26 * All Bootstrap javascript has been updated.
  27
  28 Sass
  29 ----
  30 * 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.
  31
  32 * m-t-* and other spacing utilities should be replaced with mt-*.
  33
  34 The units that were used for margins have changed too
  35 m-t-1 is now mt-3
  36 m-t-2 is now mt-4
  37 m-t-3 is now mt-5
  38
  39
  40 Grid and Flexbox
  41 ----------------
  42 The Boostrap grid uses CSS's flexbox grid to build layouts.
  43
  44 New breakpoints for grids have been added:
  45 .col-*  <576px
  46 .col-sm-* >= 576px
  47 .col-md-* >= 768px
  48 .col-lg-* >= 992px
  49 .col-xl-* >= 1200px
  50
  51 All usage of '*-xs-*' have been dropped. So what used to be col-xs-6 should now be written as col-6.
  52
  53 *-md-* has become *-lg-*, and *-lg-* has become *-xl-*.
  54
  55 Typography
  56 ----------
  57 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'.
  58 In the default Boost preset we use: "0.9375rem" which computes to 15px on most browser.
  59
  60 Presets
  61 -------
  62 The structure of preset files have changed. The new structure of a preset file is:
  63
  64 // Space to set variables.
  65 $font-size-base: 0.9375rem
  66
  67 // Import FontAwesome.
  68 @import "fontawesome";
  69
  70 // Import All of Bootstrap.
  71 @import "bootstrap";
  72
  73 // Import Core moodle CSS.
  74 @import "moodle";
  75
  76 // Space to use Bootstrap mixins and extends.
  77 .navbar {
  78   @include shadow();
  79 }
  80
  81 Bootswatches
  82 ------------
  83 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.
  84
  85 Changed Components
  86 ------------------
  87 Cards need this structure
  88  class='card'
  89     class='card-body'
  90 This used to be 'card-block'
  91
  92 The header.mustache template has been replace by a navbar.mustache template for name consistancy with Bootstrap
  93
  94 A new header.mustache template has been created served from core/core_renderer.php. This should be move to core at some point.
  95
  96
  97 === 3.4 ===
  98 * For improved accessibility, the footer links for boost have been changed to use $bg-inverse-link-color (defaults to white) and
  99   now have an underline text-decoration. To override the link colour simply set $bg-inverse-link-color in your preset file or
 100   theme scss.
 101 * To match the new primary colour we are switching to using the UX pallette, which uses a purple colour for info. To override,
 102   set $brand-info in your preset file or theme scss.