Boost Presets
A preset is a scss file designed to be added to the "Boost" theme, or a child of it. It combines the bootstrap 4 SCSS files, with the required moodle SCSS files and adds a layer of customisation on top.
Preset files can be uploaded in to the admin settings for the theme, and then chosen from a list of installed presets. They can be shared on the moodle.net site Boost presets.
What is in a preset file?
A preset file is just a SCSS file with 3 sections. We will call them "variables", "import" and "rules".
// An example preset file.
/*************************** Variables section. *****************************/
// Create variables to override the default value for variables used in the Moodle and Bootstrap SCSS files.
$card-bg: green;
/*************************** Import section *****************************/
// Always the same.
@import "moodle"
/*************************** Rules section ****************************/
body {
background-color: $card-bg;
}
The first section is where you define default values for variables used by the standard Moodle and Bootstrap SCSS files. Because of the way SCSS variables, defining them first will allow variables used later on to be overwritten, but not defining them means they will use their default values. A good starting point when looking for variables to customise is here: Bootstrap variables.
The import section is always the same. This is where we import all the moodle and bootstrap standard SCSS files.
The last section is where we add our custom styles. We do it last so they have precedence over any rules that were defined earlier with the same specificity.
Bootswatches
These presets are very similar to Bootswatch files. In fact you can build a preset file from a Bootswatch file by using the cli script shipped with the Boost theme. See https://github.com/moodle/moodle/tree/master/theme/boost/cli for the script and instructions.
