Misc UI Refactor Guidelines 2

This document describes the steps needed to refactor the back-office components to eliminate embedded styling and make better use of CSS styling.

The following CSS styles are deprecated and should be removed:

inputBox - not needed
selectBox - not needed
textAreaBox - not needed
tabletext - not needed
sepbar - not needed
treeitem - not needed

The following CSS styles are deprecated and should be refactored/replaced. Each instance needs to be evaluated to determine the best way to refactor its usage.

tableheadtext - If it's used in a <td> element, then use the basic-table CSS class on the table and the header-row CSS class on its enclosing <tr> element -OR- convert the <td> element to a <th> element. If it is being used without a table to make text bold, then use <b></b> instead.

col-right - Use one of the new container CSS styles, then change this to opposed.

tabContainer - convert menu to new CSS style "button-bar" plus one of its decorators.

tabButtonSelected - perform above step, then change this to selected.

head1, head2, head3 - can be replaced with <h> elements in many, but not all cases.

Example:

<table width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td><div class="tableheadtext">Column 1 Header</div></td>
      ...
    </tr>
</table>

becomes

<table class="basic-table dark-grid" cellspacing="0">
  <tr class="header-row">
    <td>Column 1 Header</td>
      ...
    </tr>
</table>

or

<table class="basic-table dark-grid" cellspacing="0">
  <tr>
    <th>Column 1 Header</th>
      ...
    </tr>
</table>

Example:

<div>
  <div class="tableheadtext">Some bold text</div>
</div>

becomes

<div>
  <b>Some bold text</b>
</div>

Example:

<div class="head1">Big bold text</div>

becomes

<h1>Big bold text</h1>