Default GWT Style Sheet

[John LaBanca]

Contributors -

The attached style sheet will serve as the default style for GWT applications as of GWT 1.5.  Of course, feel free to comment on the look or make suggestions before we commit it to the trunk.

Four important notes, in random order:
3. Some of the widget style definitions we used are only available in the trunk or have not even been checked in, but most of them should work correctly with GWT 1.4.
1. The styles work across all supported browsers
4. We did not add style to basic inputs (buttons, text boxes, check boxes, radio buttons)
2. I only had three important notes

For those of you who cannot convert from CSS to a visual image in your mind, the attached screen shots will help you visualize the styles.

--
Thanks,
John LaBanca
jlab...@google.com

[Emily Crutcher]

Very nice! I especially like the stack panel and dialog box styles.

--
"There are only 10 types of people in the world: Those who understand binary, and those who don't"

[Bruce Johnson]

Take all this with a grain of salt -- I'm certainly no designer -- but I can point out some things that look ripe for tweaking from my perspective as a user:

- There are some aliasing artifacts on the corners of the tabs. Would be nice for the tab corners look extremely smooth.

- Perhaps the tabs should be slightly closer together? For some reason, right now it reminds me of teeth that are too far apart :-)

- The gradient on the tabs, especially the active one, seems a bit stark. Not sure how to explain that in design terms. Anyone else feel that way?

- Anyone else want dialog boxes to have rounded corners by default? That style seems to be so popular, and I have to admit that I am more impressed when I see rounded corners, even though I know it's a small thing technically. Maybe this should apply to all of the panels that have a natural border ( e.g. TabPanel, DisclosurePanel, StackPanel)?

- Perhaps the active tab and the TabPanel border should be a non-gray color to indicate clearly that it is clickable. For that matter, perhaps shades of gray is a generally confusing color for tabs. How would you represent tabs that are disabled?

- The submenu menu items and the separators need a little love. The <hr> elements around "Recent >>" have too much vertical padding, and the ">>" in "Recent >>" seems like it wants to be a little icon instead of characters.

Great work so far. I hope you take the amount of feedback as an indication of how close this is to being finish (IOW, people are starting to imagine it shipping soon and bringing up points they procrastinated on sharing before :-).

--- Bruce

On Jan 10, 2008 10:33 AM, John LaBanca <jlab...@google.com> wrote:

[Fred Sauer]

John,

Do you mean that this style sheet will be one of the template files used by applicationCreator? Or is the style sheet going to be included via User.gwt.xml? I'll assume that the latter is going to wait until we have stylesheet merging and 'compiling' (=at a minimum remove comments and whitespace) so that 1.5 doesn't introduce another HTTP round trip.


I'm a bit concerned with the font-size and line-height being set in points, due to accessibility issues (e.g. IE6 does not allow resizing) and because of the example that it sets to application developers. There are many articles about controlling text size via CSS which attempt to balance designer control and consistency across browsers with accessibility. This one touches on some of the main points and isn't too lengthy: http://www.alistapart.com/articles/howtosizetextincss

Fred

--
Fred Sauer
fr...@allen-sauer.com

[John LaBanca]

While I agree with all your comments in theory, some of them are feature enhancements rather than stylings.  I think we can create a default style and then add those additional features in later.  We have a while before these styles are committed to the trunk, so the more feedback the better.

- There are some aliasing artifacts on the corners of the tabs. Would be nice for the tab corners look extremely smooth.

This is a product of my lack of image editing prowess.  I'll play around with the GIMP a little more.

- Perhaps the tabs should be slightly closer together? For some reason, right now it reminds me of teeth that are too far apart :-)

What's wrong with teeth that are far apart?  Some people like to drink from a straw with their teeth clenched.  But, since you asked, I'll see if I can put some braces on the tabs and close the gaps.

- The gradient on the tabs, especially the active one, seems a bit stark. Not sure how to explain that in design terms. Anyone else feel that way?

Tabs are a big pain, so I'm open to any suggestions or alternatives from this list.  The basic problem is that the light colors don't show up well against a white background, but dark colors tend to make the tabs look non-interactive.

- Anyone else want dialog boxes to have rounded corners by default? That style seems to be so popular, and I have to admit that I am more impressed when I see rounded corners, even though I know it's a small thing technically. Maybe this should apply to all of the panels that have a natural border ( e.g. TabPanel, DisclosurePanel, StackPanel)?

This requires code changes that will affect the DOM structure of the elements and may require the use of tables or at least many more DOM elements per widget.  I tried to provide the best possible styling without any impact on performance, so I think rounded corners should be optional.  One proposal was to have a DecoratorPanel that could wrap any Widget in rounded corners.  The TabPanel is a special case because it already had a structure that allows for rounded corners on the top using the sliding method.

- Perhaps the active tab and the TabPanel border should be a non-gray color to indicate clearly that it is clickable. For that matter, perhaps shades of gray is a generally confusing color for tabs. How would you represent tabs that are disabled?

Again, tabs are tough.  I tried a bunch of colors and looked at a bunch of examples, but I couldn't find a great color to use.  Again, if anyone has an example they want to share, let me know.

- The submenu menu items and the separators need a little love. The <hr> elements around "Recent >>" have too much vertical padding, and the ">>" in "Recent >>" seems like it wants to be a little icon instead of characters.

I definitely agree that we need an option to add a break to a menu, and an automatic way of displaying an expand image if a submenu is available.  However, these are features that we can add later and do not really affect the style sheet.  If we add a menu break option, users can then choose to use it instead of an "<hr>" element.  Likewise, if we automatically display a fancy ">>" image to indicate a submenu, users do not need to add the ">>" characters.  However, this could be a breaking change unless its optional and disabled by default.

All of the styles that we applied required only a few additional style definitions, but no actual changes to the underlying DOM structure, which means very few code changes and backward compatibility (almost) with GWT 1.4.  I'm definitely open to suggestions that will improve the look and feel, but I don't want to start incorporating feature enhancements into the style sheet because that process can go on forever.

One important question to consider is how we will distribute new versions of the GWT-default.css style.  We could version it with GWT-default100.css so that future versions are optional, or we can replace it, which seems like a bad idea since people will need to merge their changes into the new version.  Or, are we truly stuck with the first version for life?

[Kelly Norton]

John, This is awesome. Having a good style sheet for people to use is going to be very helpful. Here's some additional feedback for you that I hope will be helpful.

I agree with all of Bruce's points and I have a few things I wanted to add.

Menus:

- It seems like the basic style for menus should be very similar to the style you have for suggest drop downs. 

- Also, the vertical menu seems to have some arbitrary margin on the left side. It seems more natural for the one that is shown to align with the left edge of the highlight for the "File" link. Seems that should also hold for the horizontal menu as well. Actually, I'll attach a screenshot, menu-alignment.png, to show the alignment I have in mind.

- I'd +1 Bruce's suggestions about the >> and the <hr/>. I feel like the hr's should be a 1px solid line that goes the width of the menu and consume a lot less vertical space.

- The light blue indicator for selection doesn't have very much contrast against the gray gradient in the menu bar. I think it would be a good idea overall to invert selection so that it's a dark background with a light text and then use that color combination for selection through the stylesheet.

StackPanel:

- For some reason the stack labelled Mail is about 6 pixels taller than the stacks associated with Filters and Contacts.

- Also, I think the text in the stacks should all be the same color (even the one that is selected). The positioning above the open panel is a much strong indicator of which one is selected so it just seems like unnecessary contrast. Even though you use the gray consistently to indicated something isn't selected, I think it will still feel consistent.

DialogBox:

- Given the conventions in the other screenshots, it seems like DialogBox needs its title bolded.

Tabs:

- Overall I just don't think the tabs have the same feel as the other widgets. The other gradients are blue tinted and feel fairly soft. The tab gradients are pure gray and pretty stark. The gradients are also very different from the other backgrounds. Most of the gradients on the other widgets are light at the top and fade to a darker color at the bottom. In the TabPanel, the unselected tab is the opposite and the selected tab does something entirely different. 

- Also, the borders on the tabpanel are also different than other widgets. They're asymmetric in that the top and bottom borders are wider than the left and right borders. They are also wider overall and colored differently.

/kel

On Jan 10, 2008 11:15 AM, Bruce Johnson <br...@google.com > wrote:

--
If you received this communication by mistake, you are entitled to one free ice cream cone on me. Simply print out this email including all relevant SMTP headers and present them at my desk to claim your creamy treat. We'll have a laugh at my emailing incompetence, and play a game of ping pong. (offer may not be valid in all States).

[Eric Ayers]

Hi John,

I applied the GWT-default.css stylesheet to a demo app I'm working on and the buttons I had started looking very strange.  Although it might be appropriate for the Showcase demo, I don't think forcing the width like this belongs in a default stylesheet:

/**
 * Applied to buttons.
 */
.gwt-Button {
  width: 10em;

--
Eric Z. Ayers - GWT Team - Atlanta, GA USA
http://code.google.com/webtoolkit/

[GWT Express]

John,
I tried it on Kitchen Sink in GWT 1.5 trunk, the rich text editor
toolbar buttons looks odd. Also it would be better to have the the
rich text editor's background color in white. The popup & dialog boxes
background are transperent.

Thanks!

> > of the GWT-default.css style.  We could version it with GWT-default100.cssso that future versions are optional, or we can replace it, which seems like

> > > On Jan 10, 2008 10:33 AM, John LaBanca < jlaba...@google.com> wrote:
>
> > > > Contributors -
>
> > > > The attached style sheet will serve as the default style for GWT
> > > > applications as of GWT 1.5.  Of course, feel free to comment on the
> > > > look or make suggestions before we commit it to the trunk.
>
> > > > Four important notes, in random order:
> > > > 3. Some of the widget style definitions we used are only available in
> > > > the trunk or have not even been checked in, but most of them should work
> > > > correctly with GWT 1.4.
> > > > 1. The styles work across all supported browsers
> > > > 4. We did not add style to basic inputs (buttons, text boxes, check
> > > > boxes, radio buttons)
> > > > 2. I only had three important notes
>
> > > > For those of you who cannot convert from CSS to a visual image in your
> > > > mind, the attached screen shots will help you visualize the styles.
>
> > > > --
> > > > Thanks,
> > > > John LaBanca

> > > > jlaba...@google.com
>
> > --
> > Thanks,
> > John LaBanca
> > jlaba...@google.com

[GWT Express]

Here is the screen shot of what I noticed... http://gwtexpress.googlepages.com/css1.jpg