Valo

A completely new look and feel for your applications.

Different styles for different people. Keeping up with the appearances.

Trends Trends

Trends keep changing, and it's almost impossible to predict what will be "popular" tomorrow. And with the wide variety of devices, platforms, OS versions and increased awareness of and demand for design by end users, it's becoming much more important to take all of these differences into account when designing the look and feel of your app.

With Valo, your style is always up to the task.

Valo is the Finnish word for "light" (as in colors), and the name reflects the attitude we had when building the new visual language - from loading at the speed of light to customizability and to the new bright color scheme.

A perfect look for every app. Create a new theme in seconds.

Valo is designed to adjust to any situation, with minimal effort required from the developer. With the power of our own Java based Sass compiler, you can quickly create a new, complete and polished theme to answer to the new requirements.

Road to a new theme.

"Every major Vaadin version up to 6.0 has been released with a new theme to cater for the current day aesthetics. Our initial plan was to design and implement a new theme for Vaadin 7 as well.

But at the same time as version 7 was being developed, we released a new version of Vaadin TouchKit, which was finally almost pixel identical with iOS 6 on the iPad. Unfortunately for us, Apple also released the first public version of iOS 7 at the same time, making our TouchKit applications look outdated that very second.

That got us to backtrack a little, and rethink our strategy for themes in future releases. We needed a way to stay up to speed with future device iterations so that your application would always look fresh. As a result, we went on to build our own, Java based Sass compiler, and designed and implemented the new built-in theme "Valo" to utilize the power of Sass to a maximum. So that you could have a polished look and feel for any type of application with the least amount of effort.

We're very excited about what the future of your Vaadin applications is going to look like – literally!"

Profile Jouni Koivuviita, Lead Designer
 

Features

The full spectrum of Valo.
Valo App

Customizability A custom theme for every app, without all the complexity of 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.

Valo App

Design Thought-through to a tee.

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. Making the UI delightful to use, without distracting the end user, is what it's all about.

All this means that there is less detail for you to worry about, while still getting a coherent and polished end result.

Design Thought-through to a tee.

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. Making the UI delightful to use, without distracting the end user, is what it's all about.

All this means that there is less detail for you to worry about, while still getting a coherent and polished end result.

Valo App

Responsive At home on every screen.

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.

Resolution Independent

Resolution independent Farewell to raster graphics.

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.

Resolution independent Farewell to raster graphics.

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.

Resolution Independent
Modularity

Modularity Pick and choose the parts that you need.

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.

Demo

Feel Valo in practice.
See the Demo Open demo in external window

Valo is available in Vaadin 7.3Share the good news.