The CSS Style Kit

Elevate your Taipy application’s design!

Get ready for a revolutionary change in your Taipy applications! The new CSS Style Kit has just been released and will take your application’s aesthetics to a whole new level. With predefined cascading stylesheets, the CSS Style Kit will automatically modify your Taipy GUI without any extra effort on your part.

But the fun doesn’t stop there – with some customization, you can make your application look even better!

The CSS Style Kit comes with a range of fantastic features:

• • Predefined styles for Taipy GUI elements.
  • CSS variables that can be modified to easily change graphical attributes like color or spacing values.
  • Utility CSS classes to add appealing attributes to elements.

Your application is styled by default

By default, the CSS Style Kit is enabled, meaning its style sheets are loaded with your application and impact your page rendering. You can disable it by setting the CSS Style Kit parameter of the Gui.run() method to False.

Main CSS variables

The CSS Style Kit offers a comprehensive list of variables that impact the overall style of your Taipy GUI application pages. You’ll have access to several predefined CSS classes for styling text fragments, adding margins and padding to elements, impacting the CSS display property, and dealing with element opacity.

Don’t worry if you do not understand all these terms. All you have to know is that we made it easy for you to change the style of your text. To give it some color, for example, or to center it.

Let’s apply it to our application:

<|text-center| Taipy **App**{: .color-primary} |>

or 

Taipy **App**{: .color-primary}
{: .text-center}

let’s apply it to our application

Sections

The CSS Style Kit even provides styled sections like containers, cards, headers, and sidebars, which can be used to make blocks stand out in pages or be physically constrained at specific locations with specific sizes.

You can put your Markdown in a container to create space around.

<|container|
...
|>

This will create a card to put your Markdown/Visual elements in.

<|card|
...
|>

In the example below, the container is put around the entire application and a card is created for the parameters at the top.

Creating your own theme!

You could also customize the default theme of the CSS Style Kit. Just define a set of variables with default values and overload them by setting the CSS Style Kit parameter of the Gui.run() method to a dictionary.

In conclusion, the CSS CSS Style Kit is a game-changing feature for Taipy applications, offering incredible customization and control over your application’s aesthetics. Don’t miss the opportunity to make your Taipy GUI application look better than ever!