We’re planning to create a custom theme which is based on the reindeer theme. As far as i can see we’ve got 3 possibilities to do so:
a.) Copy the whole reindeer theme and change what we like to change
b.) Create a new theme and create a new styles.css which inherits from …/reindeer/styles.css. Then create new css classes and overwrite existing ones.
c.) Use the reindeer theme and user component.addStyleName(customStyleName) for the changed components.
The reason i’m writing this is because we’re discussing HOW app programmer and css-designer should work together.
Note that we got a running app (under development) and the CSS designers are working directly on a dev-system (changing images & css).
a.) is very bad in my opinion because if we have to update the used vaadin version (e.g. because of a bugfix) we would have to know which changes we did.
b.) Here is the same point… if the vaadin developers change a css in the used theme, the custom theme may not match anymore.
c.) this seems to be the best solution?
i hope it’s clear what my problem is and that anyone can point us into the right direction
Option a is something that I strongly advice against. You will very easily get a mismatch between vaadin version and theme version
A combination of options b and c are what almost all projects do. You start with inheriting either Reindeer or Base. Reindeer is good if you just want to change the look of some components but most of them is okay in Reindeer. Base is better when you want to pretty much theme every single component in your app. Base is a starting point for theming with no images or colors. Most go with Reindeer or another ready theme.
When you want to theme for example every button in your application, you go with option b and just override the existing theme. When you want one or a few buttons to have a custom look in your application you go with option c.
The themes are so stable that you don’t have to worry about updates breaking your theme. That has happend to me very seldom in the last four years that I have been creating web applications with Vaadin. When something changes however, there is always an attached migration guide which you can follow to get everything fixed. Not much work.
The only exception to this seldomness is the major versions. I know that Vaadin 7 changes a lot of the layouts and their divs, styling and all that, so if you are going to update from Vaadin 6 to Vaadin 7 during the project’s life, then you might have to redo a bit more. Last time a big change like that happend was version 5 when VerticalLayout and HorizontalLayout was introduced as a replacement for OrderedLayout
