Styling your app

With JitBlox, you have maximum control over the appearance of your app. And we want you to take full advantage of what the UI libraries we support already have to offer. Why reinvent the wheel? JitBlox integrates CSS utilities and CSS variables from 3rd party libraries and makes them as easy to use as possible. And if you need more control, you can also create your own theme or write your own CSS code.

Quick styling

JitBlox encourages a utility-first approach: CSS utilities (or utility classes) are small, reusable classes that apply specific, single-purpose styling rules to elements. They allow web designers to style elements quickly and consistently without writing custom CSS for each component. Most component libraries, like Bootstrap, offer CSS utilities alongside UI components. And Tailwind CSS is even fully dedicated to CSS utilities.

The fastest and most intuitive way to apply CSS utilities is with our quick styling feature. It allows you to quickly search, discover and apply utilities without coding, and without getting lost in documentation. There are two ways to apply a utility, depending on whether you already know which one you need.

In addition to utilities, the quick styling panel also allows you to directly add CSS classes to an element - for example, CSS classes that you have defined in a custom stylesheet.

Discovering utilities by category

This method functions as an integrated utility reference, which lists all utilities by category: helpful if you don't know the name of a utility, or if you just want to know what utilities are at your disposal:

Note that once you select a utility from a list, the list automatically gets out of the way. If you want a list to stick, you can use the small pin icon above the list. This is useful if you want to quickly add the same utility to other elements as well.

The shortcut key "q" gives you quick access to the quick search input of a selected element.

Find by name

A faster way to add a utility, if you already know which one you need, is to search for it directly:

Responsive design using utility modifiers

Many utilities can also be applied conditionally - for example, only when the app is displayed on a small screen. You can achieve this using utility modifiers: modifiers are special prefixes or suffixes added to utility classes to alter their behavior based on specific states, screen sizes, or conditions. You can search for and apply modifiers by expanding an already applied utility. The following example demonstrates how to conditionally set a background color.

You can add the same utility multiple times, giving each utility a different modifier. For example, you could give an element a text size utility for the base text size and another text size utility to set the text size specifically for small screens.

In Tailwind CSS, multiple conditions can also be combined: you then add multiple modifiers to the same utility. A good example of this is targeting a breakpoint range.

Creating a custom theme

Our custom theme editor lets you adjust your application to your branding using an easy-to-use UI. Themes make extensive use of CSS custom properties (often called CSS variables), which modern UI libraries are increasingly adopting. By overriding predefined CSS variables, you can use the colors, dimensions, and other styling aspects that transform a standard look and feel into one that better matches their app's identity.

For a comprehensive overview of the theme editor, please refer to this introductory post.

Writing custom CSS

When you find yourself craving more flexibility and control over your project, nothing beats rolling up your sleeves and diving into the code yourself. By writing custom CSS code, you have the freedom to define CSS variables, fine-tune styles, and implement advanced techniques like targeting CSS parts when using web components.

The JitBlox CSS editor is an integrated code editor that offers syntax highlighting and code completion. It lets you write custom CSS as part of a theme, or specific to a custom component.

Writing CSS in the theme editor

As mentioned above, the theme editor lets you configure CSS variables that are used throughout your application. If you need more control over the overall layout of your application, you can enhance your theme using the integrated CSS editor. You can easily toggle between the CSS variables editor and the Custom CSS editor, or display all aspects of your theme in a single view.

Writing CSS in the component editor

If you want to write CSS that will only be used in a specific custom component, we recommend doing this in the component editor. Any styles you create here will only apply to the current component and will never affect the rest of your app. Just like in the theme editor, you can easily switch between the CSS editor, template editor and the component preview.

Styling individual elements

By now you will have noticed the Style tab in the details editor. The style editor allows you to adjust the style of the currently selected element. It supports all CSS properties and is particularly useful when working with CSS grid and flex layouts. Use the style editor if you:

• Override component-specific CSS properties (variables) when working with web components.
• Want to quickly to set an element's display to Grid, Horizontal Flexbox, Vertical Flexbox (or any other value). Typically you will use a CSS utility for this, unless you want to...
• ... configure CSS grid settings using the integrated CSS grid editor.
• ... configure flex containers and flex children.

Contrary to what you might expect, styles you create with the style editor do not result in inline styles in your application: all styles you create will become part of the component stylesheet in the generated application, using a unique class name that is generated automatically.