Project Settings

This guide explains how to use the Project Settings in Kajoo DX Builder, covering basic project management as well as code optimization options. Follow these clear steps to configure your project settings effectively.

Go to app.kajoo.ai

1. Access Project Settings

Open Kajoo DX Builder: Launch the Kajoo DX Builder by opening the project.
Locate Project Settings: In the left navigation bar, click on Project Settings to access the configuration options for your project.
Project Settings: Project Settings is divided into two main sections:
- General
- Code Optimization Each section allows you to adjust different aspects of your project.

2. General Settings

In the General section, you can manage your project's basic information and sharing options:

Update Project Name: Change the name of your project to accurately reflect its purpose.
Add Thumbnail Image: Upload or update a thumbnail image that represents your project visually.
Share Project: Easily share your project with collaborators or stakeholders using the provided share option.
Delete Project: Remove a project that is no longer needed. Be cautious with this option as deletion is irreversible.

3. Code Optimization Settings

The Code Optimization section offers two key settings to help streamline your generated code:

i) Enable Shorthand

Purpose: This setting automatically converts longhand CSS properties into a shorthand format in the generated code.

How It Works:

Instead of having separate CSS properties (e.g., margin-left: value;, margin-right: value;, etc.), the tool will combine them into a single shorthand declaration such as margin: value;.
The same approach applies to padding and border properties.

Note: This optimization affects only the generated code, not the visual representation within Kajoo DX Builder.

ii) Add All Global Style Variants to Global CSS File

Default Behavior (Disabled): Only the global style variants actively used in your project (for example, a text variant like text.span that is applied somewhere) will be included in the global CSS file.

When Enabled: Every global style variant from your themes will be added to the global CSS file, regardless of whether they are used in your project.

Use Case: Enable this option if you prefer to have all possible style variants available in your CSS file, ensuring no variant is omitted even if it’s not in use.

Summary

General Section: Update your project name, set a thumbnail image, share your project, or delete it when needed.
Code Optimization Section: Improve your generated code by enabling shorthand CSS properties, and control how global style variants are added to your CSS file.

By following these guidelines, you can ensure your project is both well-managed and optimized for clean, efficient code generation.