Purpose
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
Prior Work
References
- JSR-168 Portlet Site
- JSR-168 Portlet v1.0 API (PDF v1.0 2003.10.07 132pp)
- JSR-168 PLT.C CSS Style Definitions section
- JSR-168 PLT.C CSS Style Definitions section (HTML page)
- (HTML page)
- WSRP Spec (PDF v1.0 2003.03.09 86pp)
- 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.
XHTML
<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
CSS
.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
Todo.