CSS tool chain strategy

Flow
1

Hi all,

I’m quiet new to Vaadin, and overall I’m delighted by the richness and maturity of the framework. However, I have one mayor issue with Vaadin (but that applies to GWT and other frameworks as well), and that is the extensive use of CSS.

Coming from
Echo3
 I was used to set any property (including the “stylish” ones) just with a simple setter:

btnHello.setBackgroundColor(Color.Orange);

or better yet, using a code based color scheme, I just stated:

btnHello.setBackgroundColor(MyColorScheme.getInstance().getHighlightColor());

The same applies to insets or paddings and so on. That way I have never felt the need for an explicit themeing mechanism, and pretty much all of my customers where quiet happy with the resulting look&feel (and the speed of delivering new features).

Now facing Vaadin and CSS, things seem to me considerably more -ahem- “challenging”… I understand the rational for externalizing style information (mainly: applying different styles for different target devices or audiences and providing the designer (which is generally not a programmer as in my case haha…) the means to change the styling with his own tooling set.

So, my question is: What is the best (and most simple) approach for creating visually appealing UIs with Vaadin?

As far as I could see there was no consistent tool chain which I could use out-of-the box. The Vaadin Eclipse Editor for example has no Style editor integrated at all, and less a SASS editor. The only tools I found was
SpaceWrapper
 and
CSSInject
 - but that seems more like a work-around than a real solution to the intrinsic problem.


Note: I do not need necessarily a sophisticated tool chain, but it would be interesting to know who you approach this issue, and what are the steps you take to achieve the desired results.

So any thoughts or suggestions would be welcome… :slight_smile:

2

I just write Sass/CSS :slight_smile: (although Sass support in our themes is less than minimal currently, but we do have plans on making them easier to customize with less pure CSS know-how)

But I understand that this might not work for everyone, so alternatives would be nice, I guess. But as you found out, there aren’t many options available, and even less decent ones.

With Vaadin 7’s extension support, would that be a suitable approach? So something like this:

Button b = new Button("OK");
StyleExtension style = new StyleExtension(b);
style.setBackgroundColor(Color.Orange);
style.setFontSize(16, Units.PX);

The style extension would then directly apply those styles as inline CSS to the component’s root element, or perform some more advanced processing of the styles, depending on the target component.