[wsrp][markup] CSS Classes Update

There are still quite a few outstanding questions 
regarding some of the submitted CSS styles.  Please review and provide any 
comments/answers you might have to the posed questions.  

 

We talked about most of these issues on the call 
today but I would like some closure on the issues related to some of the 
submitted css classes.  Specifically classes from IBM and WSUI.  I'll 
compile all of the comments and revise the document as needed.

 

Thanks,

 

Chris

Title: Links

 

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?