MDL-58428 theme: Update upgrade txt & versions.
[moodle.git] / theme / boost / upgrade.txt
CommitLineData
2fd7cdbe
JO
1This file describes API changes in /theme/boost
2information provided here is intended especially for theme designers.
3
57486158
JD
4=== 3.7 ===
5
1baadc87
MM
6* Templates and renderers moved to core.
7
8* Behat override steps moved to core.
9
57486158
JD
10Form element template
11---------------------
12A 'wrapperid' has been added to 'templates/core_form/element-template.mustache' to restore unique ids
13on Boost form element wrappers. This restores the same unique element ids seen on elements in BS2
14themes, which were mistakenly dropped when introducing the Boost theme.
15
3ec69c2e
BB
16=== 3.5 ===
17
18The Boost theme now uses Bootstrap 4 Stable (BS4S).
19
20We are trying to use as much BS4S classes in MDL Templates to reduce the amount of Moodle CSS.
21
22The biggest changes are:
23
24JavaScript
25----------
26* All Bootstrap javascript has been updated.
27
28Sass
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
34The units that were used for margins have changed too
35m-t-1 is now mt-3
36m-t-2 is now mt-4
37m-t-3 is now mt-5
38
39
40Grid and Flexbox
41----------------
42The Boostrap grid uses CSS's flexbox grid to build layouts.
43
44New 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
51All 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
55Typography
56----------
a6c45af3
BB
57Boostrap 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'.
58In the default Boost preset we use: "0.9375rem" which computes to 15px on most browser.
3ec69c2e
BB
59
60Presets
61-------
a6c45af3
BB
62The 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}
3ec69c2e
BB
80
81Bootswatches
82------------
a6c45af3 83Bootstrap 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.
3ec69c2e
BB
84
85Changed Components
86------------------
87Cards need this structure
88 class='card'
89 class='card-body'
90This used to be 'card-block'
91
92The header.mustache template has been replace by a navbar.mustache template for name consistancy with Bootstrap
93
94A new header.mustache template has been created served from core/core_renderer.php. This should be move to core at some point.
95
96
2fd7cdbe
JO
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.
8b0e965d
JO
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.