Skip to main content

Levels & Precedence

Default Styling​

  • Default styling is a collection of visual styles applied to Askribe consumer if no customizations are made
  • As of now, these styles cannot be customized
  • This applicable for all Blocks from all Flows

Theme​

  • A Theme is a re-usable collection of styling customizations that can be applied to one or more Flows
  • The visibility of themes can be set at Workspace, Business or Public
    • Workspace themes can be applied to Flows in the Workspace
    • Business themes can be applied to Flows from any Workspace in the Business
    • Public themes are available for all Businesses on Askribe. They can be applied on any Flow from any Business
  • When a theme is applied to a Flow, these customizations are applicable for all Blocks in the Flow
note

Themes with public visibility need approval before they are published

Flow Styling​

  • Flow Styling is a collection of styling customizations that are applied to a particular Flow
  • These customizations are done over
    • Theme, if a theme is applied to Flow
    • Default Styling, if no theme is applied to Flow
  • These are applicable to all the blocks present in the flow

Block Styling​

  • Block Styling is a collection of styling customizations that are applied to a particular Block in a Flow
  • These customizations are done over Flow Styling
  • These are only applicable to the block on which they are defined

Precedence Order​

If a style is customized to different values for the same property at different levels, there is an ambiguity in which value should be applied to the consumer.

Let's take an example. Let's apply a font-size of 16px at Block Styling level and a font-size of 12px at Flow Styling level. In this case, one of these values have to be picked for font-size when that block is displayed to the user in consumer.

The precedence order defines which value will be applied to the consumer in such cases. The order of precedence for consumer customization is as follows.

  1. Block Styling (highest precedence)
  2. Flow Styling
  3. Theme
  4. Default Styling (lowest precedence)

In the above example, font-size of 16px will be applied because Block Styling has higher precedence than Flow Styling.