I was developing Vaadin application with the assumption, that after my general component layout is ready, our HTML designer will just make a custom Vaadin theme to “rebrand” the application to our liking. I used Runo theme as a base.
It turned out, it was very difficult task to our designer. She has a vision about what she wants to achieve, implemented in a bunch of pictures with desired design. And it is very difficult for her to convert that pictures into Vaadin styles.
Was my assumption wrong and “rebranding” of Vaadin application is not something easy? Or had we approach this task from the wrong side? Can somebody give my some suggestions, how can I help our designer to transfer her vision onto Vaadin?
Creating own Vaadin theme is a nice, but definitely not an easy task. The are basically 2 main difficulties:
Many things in original Vaadin themes like Runo or Reindeer are realized with the help of images.
Particular UI components are composed of more HTML elements which need to be styled separately.
For example, look at Button styling in Reindeer theme - you need to rewrite one CSS style to handle button caption, another one to change left part of background and another one is for the right part of background. And Button is one of the most simple components of course, styling Table for example is much more complicated.
I hope I can offer some insight and help for you guys. I’ve been the main responsible for designing and implementing the core themes, so my perception is probably biased and I’m probably blind and oblivious to many issues there might be for newcomers to Vaadin. Anyway…
Theming Vaadin apps is definitely no walk in the park if you compare it to styling normal web sites/pages. You can’t really affect the HTML structure, just add style names (class names) to the elements from the Java code, which is usually enough, but in some rare cases the HTML structure just doesn’t allow you to achieve what the designer is after.
Btw, Vaadin 7 is much easier for theming, so I’m hoping you’re using that instead of Vaadin 6. The older layouts are much more limiting to CSS than the new ones.
To help out your designer,
here are a couple of things you as developers can do to make it easier :
Use as little hard coded sizes on the Java code as possible. Use percentage sizes when you need expand ratios, but otherwise to try to make it work with CSS based sizing (easier for the designer to override).
Add semantic style names to all of your components, to offer as much CSS hooks as possible for the designer. It will bloat the code a bit, but it’s a very minor issue for performance, but a huge issue many times for the designer productivity.
If you can, use CssLayout as much as possible, and let your designer align and position all the components using CSS. Expand ratios are of course an exception, you can’t really make those with pure CSS if you have multiple components whose size you can’t fix (i.e. they shrink/grow with dynamic content).
Then some hints and suggestions for your designer (I’m assuming you’re using Vaadin 7, some of these won’t work for Vaadin 6):
Start from the Base theme, if you’re going to alter the look of the application considerable. Trying to override all the stuff from a built-in theme is just a waste of effort and bandwidth, since the application needs to load the core built-in theme styles as well. The Base theme is light weight, and only specifies enough styles to make the application functional, but doesn’t try to make it look pretty, leaving the designer free to add styles on top of it.
[code]
// Using plain CSS @import “…/base/legacy-styles.css”;
// Using SCSS @import “…/base/base”; @include base;
[/code]- Learn to use Sass/SCSS, it will make styling a bit easier (less code to write), and help organizing and maintaining your styles.
If you need to completely change how a particular instance of a component looks like, ask the developers to set the primary style name for that component instance. This will in effect strip out all of the Vaadin styles and leave you with browser default styles for that component. Very handy if you have completely different looking buttons in your application for different purposes (not talking about simple color changes here, but for instance rectangle+gradient vs. circular+flat buttons).
Well, it’s getting a bit long already, so I’ll stop here and let you ask more questions
Thank you very much for your answer. It has really moved us to right direction. We have started implementing this plan step-by-step.
One of the questions I would like to ask is about form fields. If I add e.g. TextField to my component, then it will render itself in very specific way: div element followed by input element. Is it possible or feasible to try to change this, if I can say, “compound rendering”? E.g. if we would like to render this just in one div element, containing label and input elements?
The components themselves dictate what the DOM structure for their part is.This is something that is very hard to change. On the other hand, we usually haven’t had the need to change it to achieve what we want. Getting a hang on what to do to get the theme done is something you learn when you’ve themed Vaadin apps for a while. I can assure you that is waay easier to theme stuff in Vaadin 7 than Vaadin 6 as it is moving away from background pictures for everything and inline pixel sizes for every div. The part that made changing these things in Vaadin 7 possible was the decision to drop support for IE6 and IE7. Every minor release of Vaadin 7 will make these things even easier when componentes are partially or completely rewritten.
In your example, if it is about getting a div around the component, then I’d suggest wrapping the one component into a CssLayout, which basically just does that - adds a div around (in Vaadin 7. Vaadin 6 has three divs).
Almost all of the projects we do get a theme design made in Photoshop, and those mastering CSS as well as Vaadin translate it to a project theme. Jouni’s tip for starting with starting with the “base” theme is a good one if you plan to actually modify most of the looks, and that is what awesome heavy weight designers like Jouni tend to do. I am, however, more of a guy that works with cranking out projects with the right functionality in them with a nice looking theme. Looks are important but not the top priority. It usually not required in my projects to create a custom theme for every single component in the application, and it is neither cost effective to do a full makeover for every little detail. The fields can look as they do in some ready-made theme, while we then focus the theming in creating totally custom looking menu bars, backgrounds, “chrome”, form panels, custom looking icon buttons etc. For example taking Chameleon as a base and focusing on theming the normally invisible components like Vertical-/Horizontal/CssLayout in certain sections is usually a winning strategy. You can most likely see a lot of projects that has done something like this by browsing the
“Who is using Vaadin” -section
Chameleon is a quite fresh look when you have looked at a lot of Reindeer applications. It takes away the components’ rounded corners present in Reindeer, and uses a more boxy look. That seems to be the “cool” design direction right now anyways with the likes of Microsoft Metro and such popping up.
