Easy theming with ValoSubmitted on 07 September 2014
I’m not a front-end designer and that’s the main reason why I love Vaadin. The framework lets you create professionally looking applications with no front-end skills. However, let’s face it: to create your own theme is not really easy (as a reminder, please check this previous post and this one), and the Vaadin team even recommends to use an existing theme and tweak it..
Contrary to other themes and thanks to the power of Syntactically Awesome Style Sheets, Valo offers plenty of specific hooks in the form of functions and mixins to create new themes in a very easy way.
Those can be categorized into the following settings:
- General: general settings cover background color and line height
- Font: font settings govern… font, including size, weight, color and family
- Layout: layout settings configure the spacing and margin. It is finally possible to easily manage those parameters beside
- Component: component settings are realted to focus, border, shadow, gradient, etc.
- Compilation and optimization: thos settings can tweak the compilation process
Valo is really well documented, but here’s a small example of a custom
styles.scss file for a so-called
custom theme located under
Valo comes with a bunch of documentation and resources, including:
- The Book of Vaadin has a dedicated chapter dedicated to the Valo theme
- The SASS documentation generated by the
- Finally, this Github sub-project uses the above snippet to display some components