Variables

1. Breakpoints. See Breakpoints These breakpoints will be used throughout the admin to add rules for responsive design in virtually any editable CSS based option.
2. Set up Color Tokens, e.g. branding colors, a color scale from light to dark, and some accent colors.
3. Set up Color Schemes, See Color Schemes These allow to easy color changes from one scheme to another in various sections throughout the Journal admin. Setting individual colors to a color scheme value is recommended.
4. Gradients will appear in every Background option throughout the admin. Can be used on backgrounds or even text.
5. Shadows will appear in every Shadow option throughout the admin.
6. Set up Font Family variables. Decide on the fonts you want to use. Various system fonts are available, as well as the entire Google Fonts library.
7. Set up a few Font Sizes. You need some common sizes for starters, like a body text font and some heading sizes. You can always come back to edit or create more sizes.
8. Set up Spacing variables. These are very useful for adding spacing between grid items such as products, banners, blocks, gallery images, etc.

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