Vaadin Media Css in Java Code

Flow
1

Hi, as i am diving deeper into the theming/layouting i am checking now how to react to different screen sizes.

Using LumoUtility is great, but how can i add or remove CSS Styles depending the screen size. For Example if a screen is wider then 1920px (24 inch screen) i would like to have a global padding to the left and right of 10% to center the content.

Adding a css like .addClassName(“maincontent”) class to the main layout (and css file) will work, but does it also work in pure Java like:

if(screenSize > 1920){
     layout.getStyle().addPaddingLeft("10%");
     layout.getStyle().addPaddingRight("10%");
   } else {
     layout.getStyle().addPaddingLeft("0%");
     layout.getStyle().addPaddingRight("0%");
}

I am asking myself (and you ;)) Which way is the best, using CSS class constantly or Java only for adding Styling. Currently i have a mix of both but its disgusting to add style classes in CSS and having Styling in Java Classes. Its probalby the best to only use one of them or?

2

Yes, using CSS from within the themes folder with the traditional way (by class, id or theme) - using getStyle() should be your last resort for highly dynamic styling… otherwise it creates a nightmare to maintain.

1 Like
3

Thanks for your advice, but haveing addClassName(LumoUtil.xxxx) is fine or do you recommend to have this in Css as well? Then the advantage is gone with the Util Classes, right ?

So in general we could say “if i use getStyle.set my alarm should go on” and move this to css

To make it have a good structure, i would create a css file per View. Can you recommend that or is there any other best practice?

I just want to make it a good structure from the beginning

4

Personally I’m using a mixture of custom css within my theme - ordered by views / components and use lumo utilities where feasible… re-creating a working wheel feels wrong… especially since their play nicely with vaadin’s css variables.

getStyle can be an alternative, but it also creates inline styles… which are really hard to overwrite with other means - so I would only use them for special use-cases or highly dynamic styling. Normally styling is kinda “static” (except mobile vs desktop media query stuff)

If I remember correctly, tomorrow is a free webinar that also has styling as a topic Full Stack Way of Thinking | Webinar

1 Like
5

Great, i am already enrolled to this webinar tomorrow :)

I think i need a course or some teaching to get a clear view of this topic. Are there any (paid) courses or personal trainings anywhere?

6

Not sure… but @Tatu2 might know some :)

7

We have training videos available for registered Vaadin users

https://vaadin.com/learn/training

One of the training modules is about theming and styling

https://vaadin.com/learn/training/v24-theming-1

We do arrange paid customized trainings to our customers as well.

8

Correct. Using Vaadin’s Java Element API and getStyle from there is pretty much analogous to direct style manipulation by JavaScript. It is considered a bad practice in application level code, but allowed for custom component functional behaviors that are purposed not to be manipulated by the stylesheet.