Overview

In order to implement the Tui framework as our new technology stack alongside Totara Learn's existing technology stack, the Legacy Theme has been created. This theme is intended as a stop-gap solution to bridge the differences between technology stacks.

Implementation

Legacy builds

Before Totara 13, a different set of tasks are run during the build process to create output files intended for downloading to the client. Please see this documentation for information on editing and maintaining the technology stack used with Roots, Basis and Legacy (and likely any custom themes created using this technology stack).

Read more about creating themes using the Legacy technology stack.

Legacy CSS

The nature of Totara Learn's older technology stack is such that several difficult technical parameters are still in place. The dependency on Bootstrap as a UI library remains in place for backwards compatibility, and is partly the root cause of these technical parameters. Notably, Bootstrap applies globally scoped element CSS resets, element default CSS styles and then element plus selector-based rules that apply CSS properties that affect all elements, everywhere, including Tui framework components. This is a very difficult technical parameter to remove or work around, and because of this the following applies:

Legacy still applies a reset and element defaults
Ventura still relies upon these global reset and element defaults, but supplies per-component overrides within client/src/ as required
Legacy LESS superset CSS styles have been converted to SCSS
Legacy duplicates Tui CSS variables
Legacy applies CSS variable values to SCSS variable values, including Bootstrap variable values

While this complicates both the Cascade and specificity, it also means that going forward there is a pathway to:

Refactor Totara Learn features into a component-centric approach
Remove the refactored feature dependencies on Legacy and Bootstrap
Simplify the Cascade and specificity

Legacy AMD

Javascript encapsulated within Asynchronous Module Definitions (AMD) remains in place for backwards compatibility. This includes non-Theme AMDs. For more information see JavaScript & AMD modules.

Legacy Mustache templates

Mustache logicless HTML templates remain in place for backwards compatibility. This includes non-Theme templates. Notably, there will be a number of minor changes to templates to facilitate visual consistency between Legacy styles and Tui framework styles - these have been kept to a minimum. For more information see Mustache templates.

Legacy images

Image assets are still mediated by PHP and served to the client as per the originally intended design for earlier versions of Totara.

Legacy mediation and caching

All existing mediation of Legacy assets remains in place for backwards compatibility, including the 'Designer mode' Stylesheet and associated Javascript caching settings.

Browser not supported