MDL-58428 theme: Update upgrade txt & versions.
[moodle.git] / theme / boost / upgrade.txt
1 This file describes API changes in /theme/boost
2 information provided here is intended especially for theme designers.
4 === 3.7 ===
6 * Templates and renderers moved to core.
8 * Behat override steps moved to core.
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.
16 === 3.5 ===
18 The Boost theme now uses Bootstrap 4 Stable (BS4S).
20 We are trying to use as much BS4S classes in MDL Templates to reduce the amount of Moodle CSS.
22 The biggest changes are:
24 JavaScript
25 ----------
26 * All Bootstrap javascript has been updated.
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.
32 * m-t-* and other spacing utilities should be replaced with mt-*.
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
40 Grid and Flexbox
41 ----------------
42 The Boostrap grid uses CSS's flexbox grid to build layouts.
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
51 All usage of '*-xs-*' have been dropped. So what used to be col-xs-6 should now be written as col-6.
53 *-md-* has become *-lg-*, and *-lg-* has become *-xl-*.
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.
60 Presets
61 -------
62 The structure of preset files have changed. The new structure of a preset file is:
64 // Space to set variables.
65 $font-size-base: 0.9375rem
67 // Import FontAwesome.
68 @import "fontawesome";
70 // Import All of Bootstrap.
71 @import "bootstrap";
73 // Import Core moodle CSS.
74 @import "moodle";
76 // Space to use Bootstrap mixins and extends.
77 .navbar {
78   @include shadow();
79 }
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.
85 Changed Components
86 ------------------
87 Cards need this structure
88  class='card'
89     class='card-body'
90 This used to be 'card-block'
92 The header.mustache template has been replace by a navbar.mustache template for name consistancy with Bootstrap
94 A new header.mustache template has been created served from core/core_renderer.php. This should be move to core at some point.
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.