Updating a boost based theme: Difference between revisions
Bas Brands (talk | contribs) |
Bas Brands (talk | contribs) |
||
Line 27: | Line 27: | ||
Bootstrap 4 Stable includes major changes compared to the Bootstrap 4 Alpha library used in Boost for Moodle 3.4 and older releases. Changes that affect Moodle most are: | Bootstrap 4 Stable includes major changes compared to the Bootstrap 4 Alpha library used in Boost for Moodle 3.4 and older releases. Changes that affect Moodle most are: | ||
=== Flex === | |||
# Switch to using [flex|https://getbootstrap.com/docs/4.0/utilities/flex/] positioning. This is used a lot in grids and form elements. | # Switch to using [flex|https://getbootstrap.com/docs/4.0/utilities/flex/] positioning. This is used a lot in grids and form elements. | ||
Changes in variable names | Changes in variable names | ||
=== JavaScript === | |||
The Boost javascript has been updated to use the 4.0 Bootstrap JavaScript, this includes using the [Popper|https://popper.js.org] library for positioning Modals and Tooltips. | |||
=== Sass variables === | |||
A number of SASS variables are no longer available in Bootstrap 4 Stable. Some of these variables were widely used in Core SASS and potentially in child themes. Some examples of these are: | |||
<pre> | |||
$font-size-root | |||
$brand-primary | |||
$spacer | |||
$gray-dark | |||
$state-success-text | |||
</pre> | |||
The variables and some utility classes used in Core SASS and HTML can still be used because of the Bootstrap 4 compatibility SASS file in theme/boost/scss/moodle/bs4alphacompat.scss. | |||
=== Bootstrap utility classes === | |||
m-t-* and other spacing utilities should be replaced with mt-*. | |||
m-t-1 is now mt-3 | m-t-1 is now mt-3 | ||
m-t-2 is now mt-4 | m-t-2 is now mt-4 | ||
m-t-3 is now mt-5 | m-t-3 is now mt-5 | ||
# New breakpoints | A more detailed description of using spacing classes can be found on the [Bootstrap spacing utilities|https://getbootstrap.com/docs/4.0/utilities/spacing/] page | ||
The hidden-md-up and related classes have been removed from upstream Bootstrap, rather than using explicit hidden-* classes, you hide an element by simply hiding it at that screen size using d-sm-none. More info on the [Bootstrap utilities|https://getbootstrap.com/docs/4.0/migration/#utilities] page | |||
=== New grid breakpoints === | |||
The Boost grid breakpoints are | |||
<pre> | <pre> | ||
.col-* <576px | .col-* <576px | ||
Line 51: | Line 70: | ||
</pre> | </pre> | ||
All usage of '*-xs-*' have been dropped. What used to be col-xs-6 should now be written as col-6. | |||
*-md-* has become *-lg-*, and *-lg-* has become *-xl-*. | *-md-* has become *-lg-*, and *-lg-* has become *-xl-*. | ||
=== Typography === | |||
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'. | 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'. |
Revision as of 11:43, 18 June 2018
The Boost theme for Moodle 3.5 has been upgraded to use the upstream [Bootstrap 4|https://getbootstrap.com/docs/4.0/getting-started/introduction/] libraries. This affects Boost child themes in a number of ways:
Changes in presets
The structure of [Boost presets|https://docs.moodle.org/dev/Boost_Presets] have changed, In versions up to Moodle 3.4 all Sass files were included using one single line for importing:
// Import Core moodle CSS.
@import "moodle";
The import has now been split into 3 separate files:
// Import FontAwesome.
@import "fontawesome";
// Import All of Bootstrap.
@import "bootstrap";
// Import Core moodle CSS.
@import "moodle";
Changes in Bootstrap
Bootstrap 4 Stable includes major changes compared to the Bootstrap 4 Alpha library used in Boost for Moodle 3.4 and older releases. Changes that affect Moodle most are:
Flex
- Switch to using [flex|https://getbootstrap.com/docs/4.0/utilities/flex/] positioning. This is used a lot in grids and form elements.
Changes in variable names
JavaScript
The Boost javascript has been updated to use the 4.0 Bootstrap JavaScript, this includes using the [Popper|https://popper.js.org] library for positioning Modals and Tooltips.
Sass variables
A number of SASS variables are no longer available in Bootstrap 4 Stable. Some of these variables were widely used in Core SASS and potentially in child themes. Some examples of these are:
$font-size-root $brand-primary $spacer $gray-dark $state-success-text
The variables and some utility classes used in Core SASS and HTML can still be used because of the Bootstrap 4 compatibility SASS file in theme/boost/scss/moodle/bs4alphacompat.scss.
Bootstrap utility classes
m-t-* and other spacing utilities should be replaced with mt-*.
m-t-1 is now mt-3 m-t-2 is now mt-4 m-t-3 is now mt-5
A more detailed description of using spacing classes can be found on the [Bootstrap spacing utilities|https://getbootstrap.com/docs/4.0/utilities/spacing/] page
The hidden-md-up and related classes have been removed from upstream Bootstrap, rather than using explicit hidden-* classes, you hide an element by simply hiding it at that screen size using d-sm-none. More info on the [Bootstrap utilities|https://getbootstrap.com/docs/4.0/migration/#utilities] page
New grid breakpoints
The Boost grid breakpoints are
.col-* <576px .col-sm-* >= 576px .col-md-* >= 768px .col-lg-* >= 992px .col-xl-* >= 1200px
All usage of '*-xs-*' have been dropped. What used to be col-xs-6 should now be written as col-6.
- -md-* has become *-lg-*, and *-lg-* has become *-xl-*.
Typography
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'. In the default Boost preset we use: "0.9375rem" which computes to 15px on most browser.