...
Kajoo’s Theming functionality allows users to create collections of styling rules for different elements, with multiple variants per element. Setting up multiple themes with different default styling rules allows users to rapidly switch between different styles when testing in the canvas.
Themes
How to add a Style Guide Variant for an element
Kajoo offers you the ability to create multiple styling variants for the different elements it offers. For this example, we’re going to create a new variant for a Button element.
In the
...
themes section, click the
...
When the new variant appears under the element name, click on it to show the properties pane on the right hand side of the screen.
...
“New Theme” button and then go to your newly created style.
In the your theme, you can modify elements to your liking.
Inside those elements you can change the colour, background colour, border style, font style, width, height, margins and
...
flex properties. Customize these so your element looks the way you want it to.
After adjusting styling settings, changes are automatically saved and the styling variant is available for use in the Kajoo builder
| Info |
|---|
You can view a preview of the styling code generated by your style guide variant at the bottom of the right-hand properties window. |
...
How to use a Style Guide Variant in the Kajoo Builder
Once you’ve created the style guide variants you need, you can assign them to elements in the builder. The process is very simple.
In the Kajoo Builder, select the element for which you would like to change styles
In the right-hand properties pane, navigate to the “Variant” section, and select the desired style guide variant from the dropdown list.
...
Deleting Themes
...
Styling Themes can be deleted from the Themes screen. However, if a Theme is currently being used by a project, the user must first select a replacement theme for that project. After the deletion of the old Theme and replacement by the new Theme, all elements in the project will automatically utilize the default variants in the replacement Theme.
...