Boost Presets: Difference between revisions
Damyon Wiese (talk | contribs) |
Damyon Wiese (talk | contribs) |
||
| Line 5: | Line 5: | ||
== What is in a preset file? == | == 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". | A preset file is just a SCSS file with 3 sections. We will call them "variables", "import" and "rules". | ||
<code scss> | <code scss> | ||
// An example preset file. | // An example preset file. | ||
| Line 26: | Line 25: | ||
</code> | </code> | ||
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. | |||
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. | |||
Revision as of 04:22, 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".
// 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.
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.
