Summary

We learned some classic, old-school web development stuff in this chapter. Look at what we have covered:

• We met four out-of-the-box Vaadin themes.

• We learned how Vaadin allows us to define our own themes using Sass.

• We learned some basics of CSS.

• We learned how Sass extends CSS by adding variables, nesting, and mixins.

• We learned that Vaadin UI components are rendered as HTML elements with proper CSS classes according to the component's type.

• We learned how to use inspect HTML in Firefox and Chrome.

• We learned how to create a new Vaadin theme.

• We saw several examples of customizing some of the most common Vaadin UI components.

At this point you must be quite proficient with Vaadin. You have used most Vaadin UI components, you know how Vaadin data model works, and you can use some basic CSS and Sass to customize your components and create new themes.

The next chapter is going to be the perfect closure for our Vaadin trip: We'll learn how to develop custom components. See you there!