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

[Rich Thompson <richt2@us.ibm.com>]

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 <rexb@starbourne.com> 05/20/2003 09:33 PM

To:        "Guyot, Noah" <Noah.Guyot@vignette.com>         cc:        wsrp-markup@lists.oasis-open.org         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: rexb@starbourne.com
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?