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