Where are CSS attributes documented?

I’m having a difficult time discovering what CSS attributes are available for each component.

For example, the Embedded component. I looked in the
API doc
and the
Book of Vaadin
. Neither explains any CSS attributes. Sometimes I find CSS attributes in the API doc & Book of Vaadin, but it does not seem consistent.

I looked through the source code for that component, but did not see anything about CSS. Perhaps I was not looking in the correct place.

By searching the forums, I found a few mentions (
) of “.v-embedded”.

How can I discover a component’s CSS?

–Basil Bourque

For all the missing classes and DOM structures you will have to use firebug or webinspector.
It may seem difficult at first but once you get used to the tool and the basic vaadin DOM structure, you will be able to go through without much problem.

Otherwise you may try getting the raw CSS for each component from reindeer in SVN and deduce the selectors from there (thought I have never tried).

Hi Basil,

Yes, many of the component sections in the Book are missing the basic CSS styling documentation. It is added as the component sections are otherwise updated.

I’m not entirely sure how useful it is to have the CSS style documentation in the book. The difficulty is that, to be really useful, it would have to be really detailed. With just a brief documentation as it is now for most components, you anyhow have to use Firebug to examine the CSS/DOM structure.

It also feels somewhat silly to write documentation essentially by browsing the DOM structure with Firebug and writing what I see there, as theme developers can just as well do that themselves.

I think we need a section about using Firebug (and other similar tools) to inspect the DOM tree and the styles.