WSRP/WSIA Defined CSS Classes
1. Links (Anchor)
|
Proposed |
WSUI |
IBM |
SilverStream |
|
Will use base <a> tag style attributes. |
|
A |
A.s3-Anchor |
|
|
A:visited |
A.s3-Anchor:visited |
|
|
|
A.s3-Anchor:active |
|
|
|
A.s3-Anchor:link |
|
|
A:hover |
A.s3-Anchor:hover |
Comments:
1.1 Links should use the behavior of the "A"
tag class.
No custom classes are necessary.
2. Fonts
|
Proposed |
WSUI |
IBM |
SilverStream |
|
.wsia-font |
.wsui-font |
.portletText |
.s3-font |
| |
|
.portletTinyText |
.s3-fontExtraSmall |
|
|
.wsui-font-small |
.portletSmText |
.s3-fontSmall |
| |
|
|
.s3-fontMedium |
| |
.wsui-font-large |
|
.s3-fontLarge |
| |
|
|
.s3-fontExtraLarge |
| .wsia-font-error |
.wsui-font-error |
.fieldErrorText |
|
| |
.wsui-font-error-small |
|
|
| .wsia-font-dim |
.wsui-font-dim |
|
|
| |
.wsui-font-dim-small |
|
|
| .wsia-font-info |
.wsui-ok |
|
|
| |
.wsui-ok-small |
|
|
| |
|
|
|
Comments:
2.1 If a portlet writer wants a certain font type to
be larger or smaller, they should indicate this as a relative size.
Example1: <div class="wsia-font-error"
style="font-size: smaller">An Error Occurred.</div>
Example1: <div class="wsia-font-error"
style="font-size: 80%">An Error Occurred.</div>
3. Tables
|
Proposed |
WSUI |
IBM |
Plumbtree |
SilverStream |
|
See 4. Sections |
.wsui-table |
|
|
.s3-table |
| .wsui-table-row-header |
.tableHead |
gHeader |
.s3-table-header |
| .wsui-table-row-sectionheader |
|
gSubHeader |
|
| .wsui-table-row-odd |
|
.gContentSection |
.s3-table-row-odd |
| .wsui-table-row-even |
.tableShdRow |
.gContentSectionGray |
.s3-table-row-even |
| |
.tableText |
|
|
Comments:
3.1 Tables can be styled using the section classes.
Section is a more general approach that can represent div, span, table,
and other types of markup.
4. Sections
|
Proposed |
WSUI |
IBM |
Plumtree |
SilverStream |
| wsia-section |
|
|
|
|
| wsia-section-header |
.wsui-section-title |
|
gHeader |
.s3-paragraphTextHeader |
| .wsia-section-body |
.wsui-trail |
|
.gContentSection |
.s3-paragraphTextBody |
| .wsia-section-alternate |
|
|
.gContentSectionGray |
|
| .wsia-section-selected |
.wsui-trail-current |
|
|
|
| |
|
|
|
|
| wsia-section-subheader |
|
|
gSubHeader |
|
| wsia-section-footer |
|
|
|
|
| wsia-section-background |
|
|
|
|
| wsia-section-text |
|
|
|
|
Comments:
4.1 I'm not familiar with the word trail, is this a
standard publishing term? Is this the paragraph?
4.2 Is wsia-section-text required?
4.3 Is wsia-section-background required? Should be
able to use the section's style attributes for this.
4.4 Is wsia-section-body required? Shouldn't the
body just take the attributes from the wsia-section?
5. Forms
|
Proposed |
WSUI |
IBM |
Plumtree |
SilverStream |
| .wsia-form-label |
.wsui-form-label |
|
|
.s3-formFieldLabel |
| .wsia-form-field |
|
|
.inputBox |
.s3-formField |
| .wsia-form-button |
|
.buttonText |
.button |
.s3-formButton |
| |
|
|
.popupButton |
|
Comments:
5.1 There are possible
issues with radio buttons and checkboxes. If you change the background-color
of the wsia-form-field the
checkboxes and radio buttons may look awkward when
comparing NS to IE. Need specifics.
5.2 popupButton is a button in popup windows, smaller than
the regular button. It was decided that popupButton is not needed.
6. Menus
|
Proposed |
WSUI |
IBM |
SilverStream |
| .wsia-menu |
|
|
|
| .wsia-menu-item |
.wsui-menu |
|
|
| .wsia-menu-item-selected |
.wsui-menu-current |
|
|
| .wsia-menu-item-hover |
|
|
|
| .wsia-menu-item-hover-selected |
|
|
|
| |
|
|
|
| .wsia-menu-cascade-item |
|
|
|
| .wsia-menu-cascade-item-selected |
|
|
|
| |
|
|
|
Comments:
6.1 Are there other areas of a menu that need to be
represented by styles?
6.2 Are menu and cascaded menu the same thing? Can
we eliminate the cascade menu classes?
7. Portlet
|
Proposed |
WSUI |
IBM |
Plumtree |
SilverStream |
| .wsia-portlet |
|
|
|
|
| .wsia-portlet-head |
|
.portletHead |
|
|
| .wsia-portlet-body |
|
.portletBody |
|
|
| .wsia-portlet-background |
|
.portletBack |
.gBackground |
|
| .wsia-portlet-title |
|
.portletTitle |
|
|
|
|
.portletTitleCust |
|
|
| .wsia-portlet-bg-color |
|
|
|
|
| .wsia-portlet-bg-image |
|
|
|
|
Comments:
7.1 Consider eliminating the portlet classes all
together in favor of using section classes instead. Are there use cases
that would support
keeping a higher level class that wraps all of the
portlet's content?
7.2 Can we remov wsia-portlet-background? Should
be able to use the wsia- portal's style attributes for this, correct?.
7.3 What is portletHead used for?
7.4 Does the portlet needs the class portletTitle? Isn't this controlled by the consumer container?
7.5 What is portletTitleCust used for?
8. Colors
|
Proposed |
WSUI |
IBM |
SilverStream |
.wsia-color1-shade1
...
.wsia-color1-shade10 |
|
|
.s3-color1
...
s3color10 |
.wsia-color2-shade1
...
.wsia-color2-shade10 |
|
|
|
.wsia-background-color1-shade1
...
.wsia-background-color1-shade10 |
|
|
.s3-backgroundColor1
...
.
s3backgroundColor10 |
.wsia-background-color2-shade1
...
.wsia-background-color2-shade10 |
|
|
|
.wsia-border-color1-shade1
...
.wsia-border-color1-shade10 |
|
|
.s3-borderColor1
...
.s3borderColor10 |
.wsia-border-color2-shade1
...
.wsia-border-color2-shade10 |
|
|
|
Comments:
8.1 It would be nice to provide a color spectrum that
developers can take advantage of. These colors
can be arranged by
shade from lightest to darkest. It might be worthwhile to provide more
than one
color spectrum. For example: a theme may use 2 or 3 basic
colors. Each color can be represented by a spectrum of x number of
shades.
8.2 Since each element may have different color attributes
(i.e. "bgcolor" for table cells, "color" for fonts), we need multiple
color classes. Hence background-color, border-color, and color.
Can't the class specify all color atributes?
8.3 We should provide some use cases and an explanation
of how the use-case may be implemented using CSS.
8.4 Probably won't be included as part of the first WSRP
specification
9. Other
|
Classification |
Proposed |
WSUI |
Description |
|
Position |
|
Wsui-right
Wsui-left
Wsui-top
Wsui-bottom
Wsui-shape |
This describes
the position of an element |
|
Media properties |
.wsia-media |
Wsui-media format |
Probably for Audio and Video streaming of
content |
|
Background properties |
|
Wsui-backgroung color
Wsui-background pic |
Logo? Or Uniform background color |
|
Margins |
.wsia-margin-left
.wsia-margin-right
.wsia-margin-top
.wsia-margin-bottom |
Wsui-left margin
Wsui-right margin
Wsui-top margin
Wsui-bottom margin |
|
|
Spacing |
.wsia-line-space |
Wsui-space_between_row (of text) |
spacing |
|
Unclassfied |
|
.wsui-block-bgcolor
.wsui-page-title |
|
|
|
|
|
|
Comments:
9.1 Not sure what the position classes are used for.
Can't the section class indicate position information as a style rule?
9.2 Can we get more detail on media formats. A simple
use-case would be good. Does this relate to the CSS media types screen,
aural, print, etc? If so does this need to be defined as part of the wsia
appendix or should this be left up to the implementation style sheet?
9.3 Same issue as 9.1
9.4 Same issue as 9.1
9.5 Same issue as 9.1
9.6 What does wsui-block-bgcolor represent?
9.7 Does a portlet need page title? Do we have a
use case where a portlet would need this?