Skip to main content

Variables General Info

Variables are a new concept in Journal and they represent stored values which can be used throughout the Journal admin interface. Once a variable is created it will appear in its dedicated editor wherever that particular option is used.

Variables are extremely powerful tools which will speed up your design and allow for super fast site-wide design changes. Once you apply variables throughout the admin, you can just modify the variable values and names and all options will updated at once.

Variable ID​

The Variable ID is a unique system identifier and needs to be named once upon creation. After applying the variable throughout the admin in one or more places, if the ID is then changed the variable will be deselected from wherever it's being used so name the ID something generic that does not reflect the variable's purpose. Use the Variable Name for descriptive namings.

note

Renaming a variable ID after it's been applied on various options will deselect it and will need to be reapplied. Use the variable Name for descriptive namings, as names can always be changed.

Variable Label​

The Variable Label is used to describe the variable and can always be changed to reflect a modified variable without affecting its usage throughout the admin. For example, you might use a Color variable called "Dark" in several places which has an actual dark color. In the future, if you want to change the color to a light one, you can also change its label to "Light" or similar to reflect the modified state. Wherever the color variable is used in your admin, both the color value and label will be updated. This is in contrast to the Variable ID which should not be renamed after it's been used in one or more places as it will unset it.

The advantages of variables are:

  • Create and manage all values from a centralized place.
  • Changing a variable value updates all elements wherever it's being used, automatically.

Available Variables​

  • Breakpoints
  • Colors
  • Font Family
  • Font Size
  • Spacing
  • Radius
  • Gradient
  • Shadow
  • Items per Row