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
📁 schema	Folder containing schema.json files for the Authoring Tool
📁 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, which is imported in _font-config.less (see file location here). 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 colors, font styles, container and item spacing, and prebuilt animation are defined here.

File	Description
📄 less/_defaults/_colors.less	Location of global color 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 color to a block or hiding the back button in the nav bar on a page.

File	Description
📄 less/project/columns.less	File containing 12 column layout base CSS
📄 less/project/theme-blocks.less	File containing custom classes that target the block level
📄 less/project/theme-common.less	File containing custom classes that can target multiple levels
📄 less/project/theme-components.less	File containing custom classes that target the component level
📄 less/project/theme-contentObjects.less	File containing custom classes that target the content object level

Schema

This folder contains schema.json files that provide the theme related config to the user interface of the Authoring Tool. For more information please refer to the Authoring Tools wiki page.

Templates

The template files are the bite sized chunks of HTML that make up Adapt. The template files are (.hbs or .jsx) stored in the Adapt Framework Core or associated plugins. They can be overridden in a theme by creating a new file within the templates folder with the same name and file format as the original.

Example

Task

Add a new subtitle section to the block template.

Guide

• Copy the block.hbs file from core/templates/.
• Paste the file into your theme templates folder located theme/[THEME]/templates/.
• Edit the newly duplicated file to add the required subtitle section. It's good practice to add comments to make it clear where modifications have been made.
• Save the edited file and recompile the project.