WSRP/WSIA Defined CSS Classes
The purpose of specifying a set of WSRP Portlet CSS Classes is to give Portlet writers/designers/administrators standard design tools, and to make easier the task for Consumer-intermediaries to
1. Fonts
Proposed / Vignette / IBM / Novell.portlet-font / .vignette-font / .portletText / .s3-font
.portletTinyText / .s3-fontExtraSmall
.vignette-font-small / .portletSmText / .s3-fontSmall
.s3-fontMedium
.vignette-font-large / .s3-fontLarge
.s3-fontExtraLarge
.portlet-font-error / .vignette-font-error / .fieldErrorText
.vignette-font-error-small
.portlet-font-dim / .vignette-font-dim
.vignette-font-dim-small
.portlet-font-info / .vignette-ok
.vignette-ok-small
Comments:
1.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="portlet-font-error" style="font-size: smaller">An Error Occurred.</div>
Example1: <div class="portlet-font-error" style="font-size: 80%">An Error Occurred.</div>
2. Tables
Proposed / VIGNETTE / IBM / Plumtree / Novell.portlet-table / .vignette-table / .s3-table
.portlet-table-row-header / .vignette-table-row-header / .tableHead / .gHeader / .s3-table-row-header
.vignette-table-row-section-header / .gSubHeader
portlet-table-row-odd / .gContentSection / .s3-table-row-odd
portlet-table-row-even / .tableShdRow / .gContentSectionGray / .s3-table-row-even
.tableText
Comments:
Comments:
2.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.
3. Sections
Proposed / VIGNETTE / IBM / Plumtree / Novellportlet-section
portlet-section-header / .vignette-section-title / gHeader / .s3-paragraphTextHeader
.portlet-section-body / .vignette-trail / .gContentSection / .s3-paragraphTextBody
.portlet-section-alternate / .gContentSectionGray
.portlet-section-selected / .vignette-trail-current
portlet-section-subheader / gSubHeader
portlet-section-footer
portlet-section-background
portlet-section-text
Comments:
3.1 I'm not familiar with the word trail, is this a standard publishing term? Is this the paragraph?
3.2 Is portlet-section-text required?
3.3 Is portlet-section-background required? Should be able to use the section's style attributes for this.
3.4 Is portlet-section-body required? Shouldn't the body just take the attributes from the portlet-section?
4. Forms
Proposed / VIGNETTE / IBM / Plumtree / Novell.portlet-form-label / .vignette-form-label / .s3-formFieldLabel
.portlet-form-field / .inputBox / .s3-formField
.portlet-form-button / .buttonText / .button / .s3-formButton
.popupButton
Comments:
4.1 There are possible issues with radio buttons and checkboxes. If you change the background-color of the portlet-form-field the
checkboxes and radio buttons may look awkward when comparing NS to IE. Need specifics.
4.2 popupButton is a button in popup windows, smaller than the regular button. It was decided that popupButton is not needed.
5. Menus
Proposed / VIGNETTE / IBM / Novell.portlet-menu
.portlet-menu-item / .Vignette-menu
.portlet-menu-item-selected / .Vignette-menu-current
.portlet-menu-item-hover
.portlet-menu-item-hover-selected
.portlet-menu-cascade-item
.portlet-menu-cascade-item-selected
Comments:
5.1 Are there other areas of a menu that need to be represented by styles?
5.2 Are menu and cascaded menu the same thing? Can we eliminate the cascade menu classes?
6. Colors
Proposed / VIGNETTE / IBM / Novell.portlet-color1-shade1
...
.portlet-color1-shade10 / .s3-color1
...
s3color10
.portlet-color2-shade1
...
.portlet-color2-shade10
.portlet-background-color1-shade1
...
.portlet-background-color1-shade10 / .s3-backgroundColor1
...
. s3backgroundColor10
.portlet-background-color2-shade1
...
.portlet-background-color2-shade10
.portlet-border-color1-shade1
...
.portlet-border-color1-shade10 / .s3-borderColor1
...
.s3borderColor10
.portlet-border-color2-shade1
...
.portlet-border-color2-shade10
Comments:
6.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.6.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?
6.3 We should provide some use cases and an explanation of how the use-case may be implemented using CSS.
6.4 Probably won't be included as part of the first PORTLET specification
7. Tabs
Proposed / VIGNETTE / IBM / Novell
.portlet-tab1- …
.portlet-tabX / .
.portlet-tab-labelComments:
6.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.6.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?
6.3 We should provide some use cases and an explanation of how the use-case may be implemented using CSS.
6.4 Probably won't be included as part of the first PORTLET specification