Page Comparison

...

Reference Information

...

• Naming convention

...

• Namespace

...

Best Practices

...

To provide a central location to discuss naming conventions to be used for both channels/portlets and uPortal themes. Ideally, I think this would become a living/working document that developers could use to:

• document current practices
• provide a forum to discuss standard conventions for markup and style

Please contribute any comments or additions you may have if this is something you are interested in.

Interested/Contributing Parties

• Rutgers University - ~jayshao
• BCcampus.ca - ~mxt

Prior Work

• Rutgers XHTML-CSS work (ZIP)
• Terence Ordona's Nested Divs

References

• JSR-168 Portlet Site
• JSR-168 Portlet v1.0 API (attached PDF)
• JSR-168 PLT.C CSS Style Definitions section
• JSR-168 PLT.C CSS Style Definitions section (HTML page)
• WSRP Spec (attached)
• uPortal specific CSS naming conventions

Desired Features

• Valid XHTML/CSS which supports a broad range of standards compliant browsers, and downgrades gracefully in user agents that do not support css.
• Presentation controlled through the use of CSS with simple markup expressing content
• Accessibility support (Conformance With W3C Accessibility guidelines?)
• Common markup and CSS naming conventions to allow channel developers to produce "widgets" like toolbars, tabular displays, etc. while still allowing individual portals to customize their appearence in a standard fashion.
• Support internationalization

Examples

Toolbars

Rutgers has developed a somewhat standard format for toolbars within channels. We've restyled links and form inputs to display similarly, using both the JSR-168 portlet-form-button class, and we've added individual classes to allow decorating specific "buttons" with images, colors, etc.

Image Removed

...

<div class="toolbar">
  <ul>
    <li><a href="#" class="portlet-form-button inbox"/></li>
    <li><a href="#" class="portlet-form-button preferences"/></li>
    <li><input type="submit" class="portlet-form-button delete-selected"/></li>
  </ul>
</div>

CSS snippet was pulled out of our current skin, items may be missing/incomplete

...

.toolbar {
	width:100%;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	background-color:#eee;
	}

.toolbar ul {
	line-height:1.6em;
	list-style:none;
	margin:3px;
	padding:0;
	}

.toolbar ul:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility:hidden;
	}

/* Hides from IE-mac \*/
* html .toolbar ul {height: 1%;}
/* End hide from IE-mac */

.toolbar li {
	display:block;
	line-height:1.6em;
	float:left;
	margin:-1px 2px 0 0;
	padding:0;
	}

.toolbar select {font-size:.8em;}

.portlet-form-button,.uportal-button {
	border-style:solid;
	border-color:#fff #336 #336 #fff;
	border-width:1px;
	background-color:#ccf;
	color:#66c;
	cursor:pointer;
	white-space:nowrap;
	text-align: center;
	font:bold .9em sans-serif;
	}

a.portlet-form-button, a.uportal-button {
	display:block;
	background-color:#ccf;
	text-decoration:none;
	padding:3px 1px 3px 20px;
	margin:2px 0 0 0;
	}

* html input.portlet-form-button, * html input.uportal-button{
	padding:0;
	margin:0px;
	}

a.inbox {background:#ccf url(inbox.gif) no-repeat 2px scroll;}
a.compose {background:#ccf url(compose.gif) no-repeat 2px scroll;}

input.delete-selected {
	background:#ccf url(delete-selected.gif) no-repeat 2px scroll;
	padding:2px 0 2px 2em;
	margin-top:2px;
	}

Tables

Todo.

Expandable Trees

...

class="portlet-titlebar"

id="portletTitlebar"

class="portlet-titlebar"

class="portlet_titlebar"

class="portlet-titlebar"

class="titlebar"

class="portlet-titlebar"

class="big-red-bar"

class="fl-container-flex up-portlet-container portlet-titlebar my-custom-class"

CSS Namespaces