Re: [wsrp-markup] Re: WSRP CSS Documentation

Here is the document the Markup SC  produced
about a year ago for correlating classes in use by various vendors. There
is no mapping to the current classes, but hopefully they will be relatively
obvious.

Rich Thompson

Rex Brooks <>

05/20/2003 09:33 PM
        

        To:
       "Guyot, Noah" <>

        cc:
       

        Subject:
       [wsrp-markup] Re: WSRP CSS Documentation

Hi Noah, I believe you have just run into the primary
reason behind 

our Subcommittee--the paucity of specific classes, documentation and 

best practices. We have a meeting tomorrow morning, and I will add 

this to the agenda. If I get the time, which is unlikely, I will try 

to search through the minutes of last years' TC meetings for the 

first few lists of classes (which were from Epicentric, btw, so Alan 

might also have them somewhere in his archives).

I think this comprises one of the major tasks assigned to us last 

week, but since I was ill for that particular session, I can't say 

for certain. I am copying our list with this in case Andre or someone 

else can fill in the gaps for me. I know this falls under the "Markup

Fragment Rules" we are especially tasked with clarifying.

Ciao,

Rex

>Rex

>--

>

>Is there any documentation for the usage of the WSRP CSS classes?

>

>I'm working on developing a workable 'bridge' between the WSRP classes
and

>Vignette's current classes. But I'm finding the descriptions of the
classes

>in the spec are a bit vague, and in some cases contradictory.

>

>Ideally there would be a sample HTML and CSS file to illustrate the
intended

>usage, is there such a beast?

>

>thanks

>--

>noah

>

>

>

>Vignette's content management and portal solutions enable organizations
to

>rapidly build, manage and deploy Web applications for the real-time

>enterprise.

-- 

Rex Brooks

GeoAddress: 1361-A Addison, Berkeley, CA, 94702 USA, Earth

W3Address: http://www.starbourne.com

Email: 

Tel: 510-849-2309

Fax: By Request

You may leave a Technical Committee at any time by visiting http://www.oasis-open.org/apps/org/workgroup/wsrp-markup/members/leave_workgroup.php

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?