dddf8fd42b5c7874b2c049247c7fad756f790934
[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 Form element template
7 ---------------------
8 A 'wrapperid' has been added to 'templates/core_form/element-template.mustache' to restore unique ids
9 on Boost form element wrappers. This restores the same unique element ids seen on elements in BS2
10 themes, which were mistakenly dropped when introducing the Boost theme.
12 === 3.5 ===
14 The Boost theme now uses Bootstrap 4 Stable (BS4S).
16 We are trying to use as much BS4S classes in MDL Templates to reduce the amount of Moodle CSS.
18 The biggest changes are:
20 JavaScript
21 ----------
22 * All Bootstrap javascript has been updated.
24 Sass
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.
28 * m-t-* and other spacing utilities should be replaced with mt-*.
30 The units that were used for margins have changed too
31 m-t-1 is now mt-3
32 m-t-2 is now mt-4
33 m-t-3 is now mt-5
36 Grid and Flexbox
37 ----------------
38 The Boostrap grid uses CSS's flexbox grid to build layouts.
40 New 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
47 All usage of '*-xs-*' have been dropped. So what used to be col-xs-6 should now be written as col-6.
49 *-md-* has become *-lg-*, and *-lg-* has become *-xl-*.
51 Typography
52 ----------
53 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'.
54 In the default Boost preset we use: "0.9375rem" which computes to 15px on most browser.
56 Presets
57 -------
58 The structure of preset files have changed. The new structure of a preset file is:
60 // Space to set variables.
61 $font-size-base: 0.9375rem
63 // Import FontAwesome.
64 @import "fontawesome";
66 // Import All of Bootstrap.
67 @import "bootstrap";
69 // Import Core moodle CSS.
70 @import "moodle";
72 // Space to use Bootstrap mixins and extends.
73 .navbar {
74   @include shadow();
75 }
77 Bootswatches
78 ------------
79 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.
81 Changed Components
82 ------------------
83 Cards need this structure
84  class='card'
85     class='card-body'
86 This used to be 'card-block'
88 The header.mustache template has been replace by a navbar.mustache template for name consistancy with Bootstrap
90 A new header.mustache template has been created served from core/core_renderer.php. This should be move to core at some point.
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.
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.