Best Practice

To keep the styling of the web application consistent, this step-by-step list can be used as a guide.

  1. Custom Theme Workflow
    Custom themes can be used to make the most extensive changes. They unify the entire application. However, themes cannot be changed during runtime.

  2. ThemeVariant Workflow
    Theme variants can change component without breaking the overhanging theme. Are easy-to-use via Rapidclipse dialog and are good when a component needs an alternative design or should stand out.

  3. Css class workflow
    If the theme variants are not enough, you can create css classes yourself. This requires more manual effort, but allows finer control over the properties.

  4. Component Styling Workflow
    Properties that are in the shadow dome of a component cannot be changed with pure css classes. For that, extra styling must be created for each component. However, this allows the finest control over the appearance of a component.

  5. Styling Panel Workflow
    For view-specific small css styling changes like margins, or simple properties that don’t need shadow-dom access, the styling dialog in the Rapidclipse Properties panel can be used.

For help and more in-depth descriptions, you can contact the Vaadin documentation can be opened.