Comments by Carsten Leue in red,
prefixed with [CL].
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
|
|
[CL: moved to
messages] .wsia-font-error
|
.wsui-font-error
|
.fieldErrorText
|
|
|
|
.wsui-font-error-small
|
|
|
|
.wsia-font-dim
|
.wsui-font-dim
|
|
|
|
|
.wsui-font-dim-small
|
|
|
|
[CL: moved to
messages].wsia-font-info
|
.wsui-ok
|
|
|
|
|
.wsui-ok-small
|
|
|
Messaging
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>
Agreed
2.1. Messages
[CL:
introduce new message section]
|
Proposed
|
Comment
|
|
.wsia-msg-status
|
Display status messages
|
|
.wsia-msg-info
|
Help/info
messages
|
|
.wsia-msg-error
|
Errors
|
|
.wsia-msg-alert
|
Warnings
|
|
.wsia-msg-success
|
Successful
completion
|
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
([CL: what is the sense of this 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
|
|
|
.wsia-icon-label
|
|
Text that appears
besides a context dependent action icon.
|
|
|
|
.wsia-dlg-icon-label
|
|
Text that appears
besides a “standard” icon (e.g. Ok, or Cancel)
|
|
|
|
.wsia-form-field-label
|
|
Text for a separator
of fields (e.g. checkboxed, etc.)
|
|
|
|
.wsia-form-field
|
|
Text for a field
(not input field, e.g. checkboxes, etc)
|
|
|
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
|
|
|
|
|
.wsia-menu-item-background
|
Menu item
background color - highlighted and non-highlighted
|
|
|
|
.wsia-menu-item-selected-background
|
|
|
|
|
.wsia-menu-description-background
|
Description box background color and font.
|
|
|
|
.wsia-menu-description
|
|
|
|
|
.wsia-menu-caption
|
|
|
|
|
.wsia-menu-caption-background
|
|
|
|
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
|
|
|
[CL: not
required, will be managed by the portal itself] .wsia-portlet-title
|
|
.portletTitle
|
|
|
|
|
|
.portletTitleCust
|
|
|
|
.wsia-portlet-bg-color
|
|
|
|
|
|
.wsia-portlet-bg-image ?
|
|
|
|
|
|
|
|
|
|
|
|
.wsia-portlet-background-edit
|
|
Allow for
different backgrounds in edit and config mode.
|
|
|
|
.wsia-portlet-background-config
|
|
Do we need to redefine
all styles mode dependent?
|
|
|
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?
[CL: Is there a possibility that
the portal redefines stylesheets for single portlets
in a mode dependent way. That way we could omit the background-edit and
background-config styles]
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
[CL: maybe it is sufficient to
define a small palette of colors instead of defininig
all possible shades. What about the usecases for
this?]
9. Other
|
Classification
|
Proposed
|
WSUI
|
Description
|
|
Position
|
|
Wsui-right
Wsui-left
Wsui-top
Wsui-bottom
Wsui-shape ([CL: what is this
style for?])
|
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?