/
Theming

Theming

Introduction

 

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.

  1. In the themes section, click the “New Theme” button and then go to your newly created style.

  2. In the your theme, you can modify elements to your liking.

  3. 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.

  4. After adjusting styling settings, changes are automatically saved and the styling variant is available for use in the Kajoo builder 

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.

  1. In the Kajoo Builder, select the element for which you would like to change styles

  2. 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.

Related articles

Filter by label

There are no items with the selected labels at this time.

Related content

Styling and Other Functionalities
Styling and Other Functionalities
More like this
Using the New Canvas
Using the New Canvas
Read with this
[Deprecated] Using Classic Canvas and Preview
[Deprecated] Using Classic Canvas and Preview
More like this
Administrative Functionalities
Administrative Functionalities
Read with this
[Deprecated] Using Classic Canvas, Part 2: Layout
[Deprecated] Using Classic Canvas, Part 2: Layout
More like this
Feedback
Read with this