Add option to modify css styling of single visual element in order to not overload main.css

[MaBoMo]

Description Hi all, when creating a multi-page application with many blocks / controls, for custom css styling of single elements one would have to rely on the predefined stylesheet classes like text-center or, alternatively, use either the ID approach or add custom css classes to modify this single element. This can result in unnecessarily overloading the main.css file with only one-time used css definitions where ideally only multiple times used definitions should be placed.

An example: Currently, a card has a default padding of 32px. In cases where I would like to reduce this to 16px for a single element but retain the padding for all other cards, one would have to add another css class to the main.css or modify it by the assigned ID in the same place. tgb.part(class_name = "card padding_16px", ...) with .padding_16px {padding_top = 16px, ...} in the main.css.

Ideally, a solution could be to add another argument like css_styling to all the visual object (blocks / controls) which override the css styling just for this particular visual object --> with tgb.part(class_name = "card", css_styling = {"padding_top": "16px", "padding_bottom: "16px"}, ...): ...

Acceptance Criteria

• [ ] Ensure new code is unit tested, and check code coverage is at least 90%
• [ ] Propagate any change on the demos and run all of them to ensure there is no breaking change
• [ ] Ensure any change is well documented

[FlorianJacta]

Thank you for creating the issue @MaBoMo !

[FabienLelaquais]

Thank you @MaBoMo for this issue, and your thoughts about it. Now we have a few problems with your proposal and I would like to hear your opinion on these:

• Although providing a CSS rule using the Page Builder API seems pretty straightforward, this would be far less readable in the Markdown syntax. You would have to use a variable to store the style, breaking the beauty of linking the element and its style as clearly.
• Most of the elements are rendered using a hierarchy of HTML nodes. The inline style can apply to the first element only, making it usually impossible to access the underlying HTML structure and apply the style.

The only way to allow for proper styling is to use selectors that allow for child selection: CSS rules, not inlined. However, what you seem to dislike is and I quote, the current situation "can result in unnecessarily overloading the main.css file with only one-time used css definitions where ideally only multiple times used definitions should be placed". So we came up with the beginning of an idea that might solve all this: allow for an easier, pure-Python approach: Taipy could provide a way to define CSS stylesheets entirely in Python (and potentially dynamic) that would apply at the application or a given page level (reducing the number of global rules). For example, you would define a style dictionary:

css_rules = {
    # All paragraphs use a bold font except the ones with the 'regular' CSS class
    "p:not(.regular)": "font-weight: bold;"
    ...
}

and indicate that this should be applied for a given page: page = Markdown(<markdown_content>, css_rules=css_rules)

Wouldn't this address the initial problem, and allow for a clearer targeted style?

[MaBoMo]

Hi @FabienLelaquais,

took me a while to come back to you, sorry about that :) Yes, I would support your approach, sounds very reasonable to define css rules on page/markdown level and thereby untangle the global css file.

In case a page element is defined in both the page/markdown-specific css rules and the global css file, which of the two definitions would be applied? Or would you just merge the page/markdown-specific css rules with the global css file in the background before applying it?

[FlorianJacta]

@FabienLelaquais Your solution seems complex to me.

@MaBoMo's solution is really straightforward. I have seen people trying to do this syntax with Taipy because they thought they could, and it seemed natural to them. I have more people asking for styling; this issue is maybe getting more and more relevant.