Create a new theme in seconds with Vaadin’s theming engine Valo. With the power of our own Java based Sass compiler, you can quickly create a new, complete and polished theme to answer to the requirements of your app.
Theming with Vaadin Framework is designed to make it as easy as possible to style your app to have a coherent and polished layout without spending hours on customizing css.
Take a pre-made template, modify some variables to suit your taste, and compile. That's all you need to do to get a custom looking theme, which is tested to work on all the browsers Vaadin supports. No more figuring out all the dozens of CSS selectors and properties you need to override to get a cohesive end result.
And if you feel the need, you can dive deeper and leverage the full power of Sass and customize the theme even more.
From the clean typographic hierarchy and carefully adjusted spacing of elements in all components, to the fine-tuned animations, Valo has hundreds of cohesive design decisions baked in its core.
All this means that there is less detail for you to worry about, while still getting a coherent and polished end result.
In today's multi-device environment, an application needs to adapt to a variety of viewport sizes. Valo and the responsive layout capabilities in Vaadin provide you excellent tools to cover all the use cases you need.
Adjust text and component sizes, layout and even the whole color scheme of your app so that it feels right running on any platform.
Valo uses CSS for all of the styling, meaning there are practically no raster images used for any of the parts of the components. The comprehensive Font Awesome icon set in Vaadin also works beautifully with Valo.
This has the benefit of making all themes look as intended on every screen and zoom level, no matter the pixel density (think of Retina and HDPI displays). Also, it means less HTTP requests to the server, since everything is nicely bundled in one CSS file, reducing the application startup time.
Valo is built so that it allows you to include just the necessary parts in your theme, the ones that are actually used. This means less bytes for the end user to download.
But it also means that you have the ability to leverage all the different Sass variables, functions and mixins in your custom themes or add-ons, creating an infinite amount of possibilities for variation.