Using an existing CSS theme with Vaadin

Hello everyone,

I would like to style my Vaadin application to resemble the look of a Windows 8 application. Doing some quick research on Google, I’ve found this site, and I think the template looks amazing:

http://metroui.org.ua/examples.html

I can imagine that the *.css files provided on this side would not map to Vaadin directly (class selectors etc). Since I’m a total CSS noob, can someone tell me: how hard would it be to modify the theme provided on the website above to match the Vaadin components? In other words: how hard is it to convert a CSS theme that was written for an HTML page to a CSS theme for Vaadin? Is it doable for a beginner or does one need to be a total CSS pro to pull it off, having in-depth knowledge of all the pitfalls?

To make it clear: I’m talking about the visual style only, not all the additional components (Fluent Menu, Diashows etc.) that are based on Javascript. I’m happy with the component functionality that Vaadin provides out-of-the-box.

Thank you,

Martin

You first have to modify the selectors of the css file to match the Vaadin Components. (otherwise you would have to do something like vaadinbutton.setStyleName(input-somestyle…) which would be just confusing). After that you just try it out and then tweak it when maybe the DOM Structure the css expects doesn’t fit to the Vaadin component or the Vaadin style overwrites one of the Win8 html styles. I wouldn’t think that you have to be a css pro to pull this off. I’m not one myself (although i also wouldn’t see myself a beginner) and i would thing i’ll be capable of doing this with my css knowledge.
…and if you run into a problem you can’t solve with your knowledge there should be plenty information out on the web.

@Marius: Thank you for the pointers, that sounds doable :slight_smile: I think I’ll give it a shot, if nothing else then perhaps it helps me to improve my CSS skills a bit.

Hi,

Should be doable, but yes, requires a bit more CSS expertise and knowledge of the Vaadin DOM structure, or at least a will to get familiar with them :slight_smile:

The approach I would take is the same as I tried with my integration of Bootstrap CSS. You can find the discussion
here
, and the code
here
.

Basically I’m using the Sass compiler to map the Vaadin CSS class names or DOM elements to the Bootstrap class names as well as possible. Also, start by extending the Vaadin Base theme instead of the other core themes, and you have a cleaner starting point and you don’t have to fight with selector specificity etc.

A simple example:

@import "../base/legacy-styles.css";
@import "bootstrap.css";

.v-button {
@extend .btn;
}

Hope this helps!