Structure

Theme structure

The Vanilla theme is broken down into separate folders each fulfilling a desired role.

Folder	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
📁 templates	Optional global template overrides can be added here

Assets

The assets folder is the proper location for all media used by the theme. These are primarily images and graphics; but, if a theme required audio or video files, they would be stored here. These assets are not content-specific, since themes are intended to be applied across multiple courses.

Fonts

The standard font in the Vanilla theme is Open Sans, a Google font, and imported in _font-config.less. If an alternative font is required please update the import reference or add the custom font files into this folder and use @font-face to refer to these fonts.

JS

This folder contains JavaScript files that associate user configurations with theme styles. It is unlikely that a desired theme modification would necessitate a change to these files.

Less

The main Less folder contains a series of sub folders that target specific elements of Adapt.

Folder	Description
📁 less/_defaults	Top level config LESS files
📁 less/core	Adapt Framework specific LESS styles
📁 less/plugins	Adapt plugins LESS styles
📁 less/project	Additional LESS file styles

_defaults

The defaults folder holds the top level configuration files for the Vanilla theme. The theme's colours, font family, size, weight and line height, as well as item and button spacing.

File	Description
📄 less/_defaults/_colors.less	Location of global colour variables
📄 less/_defaults/_font-config.less	Location of global font variables
📄 less/_defaults/_font-mixins.less	The application of the font variables to Adapt's elements
📄 less/_defaults/_spacing-config.less	Location of global element spacing
📄 less/_defaults/_spacing-containers.less	Location of global container spacing
📄 less/_defaults/_animations.less	Location of Adapt transitions and keyframes animations

core

Contains the Vanilla styling for the core Adapt elements such as Navigation, Page, Drawer, and Notify.

plugins

Contains the Vanilla styling for the core Adapt plugins such as Accordion, BoxMenu, MCQ, and Resources.

project

Houses additional Less that does not fit within the other folders. This can include, but not limited to, classes that affect the visual appearance of one or more plugins or elements such as adding background colour to a block or hiding the back button in the nav bar on a page.

File	Description
📄 less/project/theme-extras.less	Location of useful, optional, visual classes

Templates

Adapt templates stored in the Adapt Framework or associated plugins can be overridden in a theme by creating an .hbs file with the same name.