CSS Theming & Styling in Vaadin 14

Thu, 22 Aug 2019 14:10:00 +0000

Last week, the new LTS version of the presentation framework was announced.
While you can find more information about the new features in the official site, I would like to focus on one specific feature that I’ve found interesting: styles management.
Across the years we saw different approaches in how to handle styles in Vaadin applications.
In Vaadin 6 you could just modify styles using plain CSS. Of course you had two choices: either build everything from scratch, or inherit the built-in themes like Reindeer, Runo or Chameleon. That inheritance scheme was based in the @import css statement, which is the basis of the cascading part of the theming technology.
The problem with this approach was that the customization was difficult, because the complexity of the rendered DOM, and the lack of variables that could help in modifying certain aspects of the base themes such as sizing and spacing, that several rules had in common.

Style on Flowing Code

CSS Theming & Styling in Vaadin 14