Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 23 Next »

CSS Naming Conventions

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

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.

  • No labels