CSS properties and options

Flow
1

Are all the possible properties and available value choices for each vaadin GUI components documented? It would be really helpful to have a dictionary of CSS properties and values. Now I can only search the existing “reindeer” and “runo” style files and hope to find a matching property/value.

Is this already documented? If yes, my apologies for this post. If not, how does everyone develop vaadin GUI? Is there another way?

Please help.

Jason

2

Hi Jason,

Sorry to say, but availabel/supported CSS properties are not documented anywhere, and the general documentation for themes is rather lacking, to say the least. But here’s the current documentation anyhow:
Creating and Using Themes
.

I guess I’m the one to blame, I should have more time to document how things work. But somehow my time is spent doing everything else than documentation.

I’ll try to give some quick pointers here about what’s supported and what isn’t:

  • I mention some tips here:
    Requirements for new theme design
  • Mainly margins are really badly supported, and using them for widget root elements is totally unsupported, since layouts do not take them into account in their calculations (apart from my own layout,
    DashLayout
    )
  • All CSS values (if you mean px/pt/%/em etc.) are supported, but using pixels usually gives you best performance, since no the client side layout engine doesn’t have to do any conversions to pixels.

I urge you to create a new vote to
Vaadin UserVoice
 about themeing documentation if you wish to see things improve on that area. Actually, there’s one open already (
Theme customizing documentation improvement
), I suggest you go vote on that.

3

I’d also point out that the Vaadin Cheat Sheet, which I keep forgetting exists, lists the css class of every component, as well as lots of other very useful stuff.


http://vaadin.com/cheat-sheet

Cheers,

Charles.

4

Thanks Charles!

I didn’t remember that one either, that looks like it has a bit more comprehensive list of the available class names.

Still, those are only for the root elements of the components. For example Table, ComboBox and other more complex components contain so many other class names, that it’s even hard for me to keep track of them :slight_smile: