Vanilla is a theme bundled with the Adapt framework.
It provides specific values to styles, including colors, padding, margins, and assets such as fonts and background images. Visit the Vanilla wiki for more information about its functionality and for explanations of key properties.
As Adapt's core theme, Vanilla is included with the installation of the Adapt framework and the installation of the Adapt authoring tool.
-
If Vanilla has been uninstalled from the Adapt framework, it may be reinstalled. With the Adapt CLI installed, run the following from the command line:
adapt install adapt-contrib-vanillaAlternatively, this component can also be installed by adding the following line of code to the adapt.json file:
"adapt-contrib-vanilla": "*"Then running the command:adapt install(This second method will reinstall all plug-ins listed in adapt.json.) -
If Vanilla has been uninstalled from the Adapt authoring tool, it may be reinstalled using the Plug-in Manager.
The Adapt framework does not allow the installation of more than one theme at a time. In order to replace Vanilla it must be uninstalled. With the root of your framework installation as your current working directory, run the following command:
adapt uninstall adapt-contrib-vanilla
Unlike most Adapt plug-ins, the Vanilla theme has no attributes that are required to be configured in the course JSON files. There is, however, additional functionality available to apply background images and supporting styles for pages, articles and blocks as desired. These attributes are properly formatted as JSON in example.json and available as configurable attributes in the Adapt authoring tool.
Alongside this, the example.json contains a collection of custom classes that Adapt and the Vanilla theme support as standard. These classes are mostly designed to provide additional visual options to increase flexibility.
The Vanilla theme also exposes colour variables in the Adapt authoring tool for theme editing. This feature allows you to apply and save 'preset' theme styles.
_vanilla (object): The following attributes configure the defaults for Vanilla. These include _backgroundImage, _backgroundStyles and _minimumHeights. Global attributes are available at page, article and block level.
_backgroundImage (object): The backgroundImage object that contains values for _large, _medium and _small.
_large (string): File name (including path) of the image used with large device width. Path should be relative to the src folder (e.g., course/en/images/origami-menu-one.jpg).
_medium (string): File name (including path) of the image used with medium device width. Path should be relative to the src folder (e.g., course/en/images/origami-menu-one.jpg).
_small (string): File name (including path) of the image used with small device width. Path should be relative to the src folder (e.g., course/en/images/origami-menu-one.jpg).
_backgroundStyles (object): Additional attributes available to customise how background images display. The backgroundStyles object contains values for _backgroundRepeat, _backgroundSize and _backgroundPosition.
_backgroundRepeat (string): This attribute defines how the background image repeats. Properties include repeat, repeat-x, repeat-y and no-repeat. Repeat-x: The background image is repeated only horizontally. Repeat-y: The background image is repeated only vertically.
_backgroundSize (string): This attribute defines the size the background image display. Properties include auto, cover, contain, and 100% 100%. Auto: The background image is displayed in its original size. Cover: Resize the background image to cover the entire container, even if it has to stretch or crop the image. Contain: Resize the background image to make sure the image is fully visible. 100% 100%: Resize the background image to match the dimensions of the container.
_minimumHeights (object): The minimum heights attribute group specifies the minimum height of the image container at different device widths (
_large,_medium, and_small).
_large (number): The minimum height should only be used in instances where the image container height needs to be greater than the content e.g. to prevent a background image being cropped.
_medium (number): The minimum height should only be used in instances where the image container height needs to be greater than the content e.g. to prevent a background image being cropped.
_small (number): The minimum height should only be used in instances where the image container height needs to be greater than the content e.g. to prevent a background image being cropped.
_responsiveClasses (object): The responsive classes object adds the associated CSS class(es) to the container element at different device widths (
_large,_medium,_small). The class(es) are removed between each device width. Useful for applying styles for a particular device width only rather than applying a global_classesstyle.
_large (string): Custom CSS class that is applied at the large device width.
_medium (string): Custom CSS class that is applied at the medium device width.
_small (string): Custom CSS class that is applied at the small device width.
_pageHeader (object): The backgroundImage object that contains values for _large, _medium and _small.
_large (string): File name (including path) of the image used with large device width. Path should be relative to the src folder (e.g., course/en/images/origami-menu-one.jpg).
_medium (string): File name (including path) of the image used with medium device width. Path should be relative to the src folder (e.g., course/en/images/origami-menu-one.jpg).
_small (string): File name (including path) of the image used with small device width. Path should be relative to the src folder (e.g., course/en/images/origami-menu-one.jpg).
_isDividerBlock (boolean): - Determines whether the CSS class
is-divider-blockwill be applied. Acceptable values aretrueandfalse.
_componentVerticalAlignment (string): Defines the vertical alignment of the child component(s) in relation to the block.
Visit the Vanilla wiki for more information about how to use and manipulate the theme.
| Folder/File | Description |
|---|---|
| 📁 assets | Optional global assets can be added here |
| 📁 fonts | Optional global fonts can be added here |
| 📁 js | JavaScript files on which the theme depends |
| 📁 less | Location of any LESS based CSS files |
| 📁 less/_defaults | Location of configuration LESS files |
| 📄 less/_defaults/colors.less | Location of global colour variables |
| 📁 less/core | Location of Adapt Framework LESS file styles |
| 📁 less/plugins | Location of Adapt plugin LESS file styles |
| 📁 less/project | Location of additional LESS file styles |
| 📁 templates | Optional global template overrides can be added here |
Vanilla supports customisation for the rendering of various Adapt elements through the use of Handlebars templates. The file name of the template indicates the element it affects.
No known limitations.
Version number: 6.2.1 
Framework versions: 5.20.1+
Author / maintainer: Adapt Core Team with contributors
Accessibility support: WAI AA
RTL support: Yes
Cross-platform coverage: Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 14 for macOS/iOS/iPadOS, Opera