Custom Classes
The Vanilla theme comes with a host of custom classes that can be used to customise and differentiate one theme from another. These custom classes can be added to either the _classes property (Framework) or the Classes text area (Authoring Tool) unless otherwise stated.
The following classes can be applied to contentObjects, articles, blocks, and components.
| Base class | Chain class | Description | Released |
|---|---|---|---|
bg-color |
The first class of two required to apply a solid background color to the targeted element. Combine with one of the chain classes to apply the respective background color e.g. bg-color black or bg-color background. Note: the chain class must be a predefined variable.The bg-color mixin can be extended to include custom colors by adding another entry here. |
v5.5.0 | |
transparent-light |
Sets the background color of the targeted element to transparent and changes the font color to black. Useful for displaying text over a light background image. | v5.5.0 | |
transparent-dark |
Sets the background color of the targeted element to transparent and changes the font color to white. Useful for displaying text over a dark background image. | v5.5.0 | |
black |
Sets the background color of the targeted element to black and changes the font color to white. 
|
v5.5.0 | |
background |
Sets the background color of the targeted element to use the variable @background (default is black) and changes the font color to use the variable @background-inverted (default is white). These variables can be changed in the _colors.less file. |
v5.5.0 | |
white |
Sets the background color of the targeted element to white and changes the font color to black. | v9.8.3 |
The following class target the contentObject's _htmlClasses property / HTML Classes text area. These classes exclusively target the page and should not affect the menu item.
| Class | Description | Released |
|---|---|---|
hide-nav-back-btn |
Hides the navigation back button on the page. | v5.0.0 |
The following classes target the contentObject's _classes property / Page Classes text area.
| Class | Description | Released |
|---|---|---|
hide-page-header |
Hides the page header on the page. | v5.2.0 |
| Base class | Chain classes | Description | Released |
|---|---|---|---|
header-color |
The first class of two required to apply a solid background color to the page header element. Combine with one of the chain classes to apply the respective background color e.g. header-color black. Note: the chain class must be a predefined variable. Can be used for both the menu and / or the page header.The header-color mixin can be extended to include custom colors by adding another entry here. |
v5.2.0 | |
black |
Sets the background color of the page header to black and changes the font color to white. 
|
v8.1.1 | |
transparent-light |
Sets the background color of the page header to transparent and changes the font color to @font-color. Useful for displaying text over a light background image. |
v5.2.0 | |
transparent-dark |
Sets the background color of the page header to transparent and changes the font color to @font-color-inverted. Useful for displaying text over a dark background image. |
v5.2.0 | |
background |
Sets the background color of the page header to use the variable @background (default is black) and changes the font color to use the variable @background-inverted (default is white). These variables can be changed in the _colors.less file. |
v5.2.0 |
The following classes can be applied to blocks.
| Class | Description | Released |
|---|---|---|
reverse-desktop-order |
Reverses the visual layout of the components above the medium breakpoint (default is 760px). e.g. Left layout components would still render first in the DOM order but visually appear on the right-hand side above the medium breakpoint. The components would vertically stack as per the DOM order below the breakpoint. | v5.1.0 |
extend-container |
Extend width of block to max page width (default is 1440px) This class is mutually exclusive with the extend-content-container and will take preference if combined. |
v5.0.0 |
extend-content-container |
Extend width of block to 70rem (default is 1120px). This class is mutually exclusive with the extend-container. |
v5.5.0 |
The following classes can be applied to components.
Breakpoints are assigned from the smallest screen resolution to the widest until they reach the max content width value. Multiple column classes with different breakpoint selectors can be defined on a singular menu item (contentObject) or component to change the layout responsively. The column number assigned to a menu item or component is configurable and can be any number between 1 and 12 with 12 equaling full width. The application of columns overrides the component _layout (Framework) and left / right / full width (Authoring Tool) configuration. It is advisable for beginners not to exceed a combined total of 12 columns for all components within a block for each breakpoint.
| Class | Description | Released |
|---|---|---|
col-xs-8 |
On screens ranging from 0px to 520px, the menu item/component fills 8 out of the 12 columns available. | v6.0.0 |
col-sm-8 |
On screens ranging from 520px and above, the menu item/component fills 8 out of the 12 columns available. | v6.0.0 |
col-md-8 |
On screens ranging from 760px and above, the menu item/component fills 8 out of the 12 columns available. | v6.0.0 |
col-lg-8 |
On screens ranging from 900px and above, the menu item/component fills 8 out of the 12 columns available. | v6.0.0 |
col-xl-8 |
On screens above 1440px, the menu item/component fills 8 out of the 12 columns available. | v6.0.0 |
col-[size]-[n]
| Selector | Description |
|---|---|
| [size] | Defines the screen size that the number of columns apply to |
| [n] | Defines the number of columns the menu item/component will occupy |
e.g.
col-md-8 col-lg-4
In this example, a component would display at 100% below the medium breakpoint. On a screen size larger than 760px the component display at a width of 8 columns or 66.66% (100% = 12 columns. 100/12 * 8 = 66.66%). On a screen size larger than 900px the larger column class will override the smaller column class and instead display the component with a width of 4 columns or 33.33%.
Similar to column width classes, column margin classes can control how much a component is moved from the left or right.
To move a component a set number of columns from the left (or vice versa for RTL), you can use the margin-start classes.
| Class | Description | Released |
|---|---|---|
margin-start-xs-2 |
On screens ranging from 0px to 520px, the component is moved 2 columns from the left | v9.18.0 |
margin-start-sm-2 |
On screens ranging from 520px and above, the component is moved 2 columns from the left | v9.18.0 |
margin-start-md-2 |
On screens ranging from 760px and above, the component is moved 2 columns from the left | v9.18.0 |
margin-start-lg-2 |
On screens ranging from 900px and above, the component is moved 2 columns from the left | v9.18.0 |
margin-start-xl-2 |
On screens above 1440px, the component is moved 2 columns from the left | v9.18.0 |
margin-start-[size]-[n]
To move a component a set number of columns from the right (or vice versa for RTL), you can use the margin-end classes.
| Class | Description | Released |
|---|---|---|
margin-end-xs-1 |
On screens ranging from 0px to 520px, the component is moved 1 column from the right | v9.18.0 |
margin-end-sm-1 |
On screens ranging from 520px and above, the component is moved 1 column from the right | v9.18.0 |
margin-end-md-1 |
On screens ranging from 760px and above, the component is moved 1 column from the right | v9.18.0 |
margin-end-lg-1 |
On screens ranging from 900px and above, the component is moved 1 column from the right | v9.18.0 |
margin-end-xl-1 |
On screens above 1440px, the component is moved 1 column from the right | v9.18.0 |
margin-end-[size]-[n]
The following classes can be applied to components.
| Base class | Chain classes | Description | Released |
|---|---|---|---|
comp-header-bg-color |
The first class of two required to apply a solid background color to the component header specifically. Combine with one of the chain classes to apply the respective background color e.g. comp-header-bg-color black. Note: the chain class must be a predefined variable.The comp-header-bg-color mixin can be extended to include custom colors by adding another entry here
|
v6.1.0 | |
black |
Sets the background color of the component header to black and changes the font color to white. 
|
v6.1.0 |
The following classes can only be applied to the Media component.
| Class | Description | Released |
|---|---|---|
invert-play-icon |
Inverts the media player play icon from white to black. | v5.2.0 |
offset-media-controls |
Offset control bar to display underneath the video element instead of overlaid. Useful for videos which contain subtitles or text within the bottom area of the video frame. | v5.6.0 |
The following classes can only be applied to the Narrative component.
| Class | Description | Released |
|---|---|---|
items-are-full-width |
Increases the width of the narrative elements to 100% in desktop view. | Narrative v6.4.0 |
The following classes can be applied to component items.
The following classes can only be applied to the Hotgraphic component item.
| Class | Description | Released |
|---|---|---|
hide-desktop-image |
Hide the hotgraphic pop up image on desktop. | Hotgraphic v5.0.0 |
hide-popup-image |
Hide the hotgraphic pop up image for all screen sizes. | Hotgraphic v5.1.1 |
The following classes should only be used within the content area of a component and not target the component itself.
| Class | Description | Released |
|---|---|---|
hide-on-desktop |
Wrap content with this custom class to hide content above the medium breakpoint. | v6.1.0 |
hide-on-mobile |
Wrap content with this custom class to hide content below the medium breakpoint. | v6.1.0 |
figure-quote |
Add to a <figure> element to apply the Vanilla quote styling - see the semantic HTML wiki page for more information. |
v9.0.0 |
aside-pull-quote |
Add to an <aside> element to apply the Vanilla pull quote styling. |
v9.0.0 |
is-bold |
Applies a bold visual style to the wrapped text content. It is recommend to only apply this class to <span> elements |
v9.0.0 |
is-italic |
Applies an italic visual style to the wrapped text content. It is recommend to only apply this class to <span> elements |
v9.0.0 |
Hide text content below the medium breakpoint
<span class='hide-on-mobile'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>Sed magna nibh, blandit id nibh eu, laoreet consequat nunc.
Hide text content above the medium breakpoint
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class='hide-on-desktop'>Sed magna nibh, blandit id nibh eu, laoreet consequat nunc.</span>
Alter text to be visually bold
<span class='is-bold'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
Alter text to be visually italicised
<span class='is-italic'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
- Framework in Five Minutes
- Setting up Your Development Environment
- Manual Installation of the Adapt Framework
- Adapt Command Line Interface
- Common Issues
- Creating Your First Course
- Styling Your Course
- Core Plugins in the Adapt Learning Framework
- Deploying and Testing Your Adapt Course
- Contributing to the Adapt Framework
- Git Flow
- Adapt API
- Adapt Command Line Interface
- Core Events
- Core Model Attributes
- Core Modules
- Web Security Audit
- Peer Code Review
- Plugins
- Developing Plugins
- Developer's Guide: Components
- Developer's Guide: Theme
- Registering a Plugin
- Semantic Version Numbers
- Core Model Attributes
- Adapt Command Line Interface
- Accessibility
- Adapt Framework Right to Left (RTL) Support