Styling Flow Applications

Vaadin uses Cascading Style Sheets (CSS) to separate the appearance of the user interface from its logic. Themes, which are a feature of the Vaadin Design System, are the standard way to organize styles in a Vaadin application.

For further reading, see Using Themes in the Vaadin Design System.

To style your application and components, you should be comfortable writing CSS. The CSS tutorials on MDN Web Docs are a great way to learn the basics of CSS.

Styling Views and Custom Components

Views and custom components, extending from Component, are rendered in the global style scope. You can apply traditional CSS styling techniques to them.

The most common technique is to add CSS classes to the components in the view and target those classes in your style sheets.

@CssImport("./styles/my-view.css")
public class MyView extends VerticalLayout {
  public MyView() {
    addClassName("my-view");

    H1 heading = new H1("My View Title");
    heading.addClassName("heading");

    Paragraph text = new Paragraph("Thanks for stopping by. Not much to see here. Click the button below to go back to start.");

    Button backButton = new Button("Go Back");
    backButton.addClassName("back-button");

    add(heading, text, backButton);
  }
}

See Importing Style Sheets for details about the @CssImport annotation.

Now, the actual style sheet could be as follows:

.heading {
  margin-top: 0;
}

p {
  /* Assuming we are using the Lumo theme. If not, fall back to 1.2em */
  font-size: var(--lumo-font-size-l, 1.2em);
}

.back-button {
  background-color: var(--lumo-shade-90pct);
}

Importing Style Sheets

Style sheets can be either external or bundled, as described later.

You should be familiar with Style Scopes to know whether you need to import a style sheet to the global scope or to a component scope.

To learn where CSS files should be placed in your project, see Loading Resources.

Bundled Style Sheets

Use the @CssImport annotation to import style sheets which are in your application source folder.

Bundled style sheets are included in the application bundle during a production build, together with other client-side resources.

Bundling is recommended for styles that change together with the application logic or component implementations, as the browser can cache them as a single unit of related resources.

// Import a style sheet into the global scope
@CssImport("./styles/shared-styles.css")
public class MyApplication extends Div {
}

The @CssImport annotation can also be used to import component-specific style sheets.

// Import a style sheet into the local scope of the TextField component
@CssImport(value = "./styles/text-field.css",
           themeFor = "vaadin-text-field")

External Style Sheets

The @StyleSheet annotation can be used to import style sheets from an external URL, or from a URL within your application. The latter type of URLs are prefixed with context://, which points to the root of the public resources folder of your application.

External/linked style sheets can be used to import styles without including the contents in the application bundle. This allows the browser to load and cache the style sheet independently from the rest of the application.

External style sheets need to be accessible from a URL, and should be placed in the public resource folder in your web application. They can also come from outside your web application, for example from a different domain or a content delivery network (CDN).

@StyleSheet("context://custom-font.css")
@StyleSheet("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css")
public class MyApplication extends Div {
}

Caution

External CSS can override your styles

There is nothing to prevent the CSS rules in external style sheets from overriding component or view styles.

Styling Templates

When using component templates, you can define styles directly in the templates, without need to reference CSS files. See Styling Templates.

A8FE0F40-A429-4FA9-8547-551E63D73BE3

Documentation