Boost Presets: Difference between revisions
Damyon Wiese (talk | contribs) (Created page with "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 lay...") |
Damyon Wiese (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
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. | 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 [http://moodle.net/boost 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". 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. | |||
<code scss> | |||
// 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. | |||
@import "moodle" | |||
// Rules section | |||
body { | |||
background-color: $card-bg; | |||
} | |||
</code> | |||
Revision as of 04:19, 2 December 2016
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". 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.
// 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.
@import "moodle"
// Rules section
body {
background-color: $card-bg;
}
