JSON Config and Authoring Tool Options

Alongside Custom Classes, the Vanilla theme can support visual enhancements available either through manual entry via the JSON (Framework) or by configuration via the interface (Authoring Tool). These extras are entirely optional and not every property requires data.

Explanation

_vanilla (object): The following attributes configure the defaults for Vanilla. These include _textAlignment, _backgroundImage, _backgroundStyles, and _minimumHeights. Global attributes are available at contentObject, article, and block level.

Global text alignment

_textAlignment (object): The text alignment object that contains values for _title, _body, and _instruction.

Name	Value	Released
_title (string)	This attribute defines the alignment of the title element. Properties include left, center, and right. left: Aligns the title to the left of the container. center: Aligns the title to the center of the container. right: Aligns the title to the right of the container. The alignment automatically inverses for right-to-left languages. The default is `` which inherits the natural page direction.	v8.1.0
_body (string)	This attribute defines the alignment of the body element. Properties include left, center, and right. left: Aligns the body to the left of the container. center: Aligns the body to the center of the container. right: Aligns the body to the right of the container. The alignment automatically inverses for right-to-left languages. The default is `` which inherits the natural page direction.	v8.1.0
_instruction (string)	This attribute defines the alignment of the instruction element. Properties include left, center, and right. left: Aligns the instruction to the left of the container. center: Aligns the instruction to the center of the container. right: Aligns the instruction to the right of the container. The alignment automatically inverses for right-to-left languages. The default is `` which inherits the natural page direction.	v8.1.0

Global background image

_backgroundImage (object): The backgroundImage object that contains values for _xlarge, _large, _medium, and _small.

Name	Value	Released
_xlarge (string)	File name (including path) of the image used with xlarge device width. Path should be relative to the src folder (e.g., course/en/images/origami-menu-one.jpg).	v9.6.15
_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).	v5.0.0
_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).	v5.0.0
_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).	v5.0.0

Global background image styles

_backgroundStyles (object): Additional attributes available to customise how background images display. The backgroundStyles object contains values for _backgroundRepeat, _backgroundSize, and _backgroundPosition.

Name	Value	Released
_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.	v5.0.0
_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.	v5.0.0
_backgroundPosition (string)	This attribute defines the size the background image position. Properties include left top, left center, left bottom, center top, center center, center bottom, right top, right center, and right bottom. The first value is the horizontal position and the second value is the vertical.	v5.0.0

Global minimum heights

_minimumHeights (object): The minimum heights attribute group specifies the minimum height of the image container at different device widths (_xlarge, _large, _medium, and _small).

Name	Value	Released
_xlarge (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.	v9.6.15
_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.	v5.0.0
_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.	v5.0.0
_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.	v5.0.0

Global responsive classes

_responsiveClasses (object): The responsive classes object adds the associated CSS class(es) to the container element at different device widths (_xlarge, _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 _classes style.

Name	Value	Released
_xlarge (string)	Custom CSS class that is applied at the large device width.	v9.6.15
_large (string)	Custom CSS class that is applied at the large device width.	v5.4.0
_medium (string)	Custom CSS class that is applied at the medium device width.	v5.4.0
_small (string)	Custom CSS class that is applied at the small device width.	v5.4.0

contentObjects specific

_pageHeader (object): The page header object that contains objects for _textAlignment, _backgroundImage, _backgroundStyles, and _minimumHeights.

Name	Value
_textAlignment (object)	See global text alignment for more details.
_backgroundImage (object)	See global background image for more details.
_backgroundStyles (object)	See global background image styles for more details.
_minimumHeights (object)	See global minimum heights for more details.

blocks specific

Name	Value	Released
_isDividerBlock (boolean)	Determines whether the CSS class is-divider-block will be applied. Acceptable values are true and false.	v5.0.0
_paddingTop (string)	Changes the value of the blocks top spacing. double: Doubles the blocks top spacing. standard: Retains the standard blocks top spacing. half: Halves the blocks top spacing. remove: Removes the blocks top spacing. The default value is standard.	v8.0.0
_paddingBottom (string)	Changes the value of the blocks bottom spacing. double: Doubles the blocks bottom spacing. standard: Retains the standard blocks bottom spacing. half: Halves the blocks bottom spacing. remove: Removes the blocks bottom spacing. The default value is standard.	v8.0.0
_componentVerticalAlignment (string)	Defines the vertical alignment of the child component(s) in relation to the block. top: Aligns descendents to the top of the block. center: Aligns descendents to the center of the block. bottom: Aligns descendents to the bottom of the block. The default alignment is top.	v7.1.0
_componentHorizontalAlignment (string)	Defines the horizontal alignment of the child component(s) in relation to the block. left: Aligns descendents to the left of the block. center: Aligns descendents to the center of the block. right: Aligns descendents to the right of the block. The default alignment is left.	v9.5.0

Examples

The example.json file provides all of the configurable json properties as a blank canvas to build from in the Adapt Framework.

contentObjects - page

Available options for the page:

"_vanilla": {
  "_backgroundImage": {
    "_xlarge": "",
    "_large": "",
    "_medium": "",
    "_small": ""
  },
  "_backgroundStyles": {
    "_backgroundSize": "",
    "_backgroundRepeat": "",
    "_backgroundPosition": ""
  },
  "_responsiveClasses": {
    "_xlarge": "",
    "_large": "",
    "_medium": "",
    "_small": ""
  }
}

Equivalent Authoring Tool view:

contentObjects - page header

Available options for the page header:

"_vanilla": {
  "_pageHeader": {
    "_textAlignment": {
      "_title": "",
      "_body": "",
      "_instruction": ""
    },
    "_backgroundImage": {
      "_xlarge": "",
      "_large": "",
      "_medium": "",
      "_small": ""
    },
    "_backgroundStyles": {
      "_backgroundSize": "",
      "_backgroundRepeat": "",
      "_backgroundPosition": ""
    },
    "_minimumHeights": {
      "_xlarge": 600,
      "_large": 500,
      "_medium": 400,
      "_small": 200
    }
  }
}

Equivalent Authoring Tool view:

articles

Available options for the article:

"_vanilla": {
  "_textAlignment": {
    "_title": "",
    "_body": "",
    "_instruction": ""
  },
  "_backgroundImage": {
    "_xlarge": "",
    "_large": "",
    "_medium": "",
    "_small": ""
  },
  "_backgroundStyles": {
    "_backgroundSize": "",
    "_backgroundRepeat": "",
    "_backgroundPosition": ""
  },
  "_responsiveClasses": {
    "_xlarge": "",
    "_large": "",
    "_medium": "",
    "_small": ""
  }
}

Equivalent Authoring Tool view:

blocks

Available options for the block:

"_vanilla": {
  "_textAlignment": {
    "_title": "",
    "_body": "",
    "_instruction": ""
  },
  "_backgroundImage": {
    "_xlarge": "",
    "_large": "",
    "_medium": "",
    "_small": ""
  },
  "_backgroundStyles": {
    "_backgroundSize": "",
    "_backgroundRepeat": "",
    "_backgroundPosition": ""
  },
  "_minimumHeights": {
    "_xlarge": 600,
    "_large": 500,
    "_medium": 400,
    "_small": 200
  },
  "_responsiveClasses": {
    "_xlarge": "",
    "_large": "",
    "_medium": "",
    "_small": ""
  },
  "_isDividerBlock": false,
  "_paddingTop": "double",
  "_paddingBottom": "half",
  "_componentVerticalAlignment": "center",
  "_componentHorizontalAlignment": "right"
}

Equivalent Authoring Tool view:

components

Available options for the component:

// components.json
"_vanilla": {
  "_textAlignment": {
    "_title": "",
    "_body": "",
    "_instruction": ""
  }
}