Page History

\[Show » \] Adrian Crum \[16/Mar/07 02:06 PM\]Misc UI Refactor Guidelines 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 viewManyTR1 - 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. bothclear, endcolumns - Replace with clear. viewManyTR2 - Use the basic-table CSS class on the table and replace viewManyTR2 with alternate-row. 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"> &nbsp;&nbsp;<tr> &nbsp;&nbsp;&nbsp;&nbsp;<td><div class="tableheadtext">Column 1 Header</div></td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;... &nbsp;&nbsp;&nbsp;&nbsp;</tr> </table> becomes <table class="basic-table dark-grid" cellspacing="0"> &nbsp;&nbsp;<tr class="header-row"> &nbsp;&nbsp;&nbsp;&nbsp;<td>Column 1 Header</td> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;... &nbsp;&nbsp;&nbsp;&nbsp;</tr> </table> or <table class="basic-table dark-grid" cellspacing="0"> &nbsp;&nbsp;<tr> &nbsp;&nbsp;&nbsp;&nbsp;<th>Column 1 Header</th> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;... &nbsp;&nbsp;&nbsp;&nbsp;</tr> </table> Example: <div> &nbsp;&nbsp;<div class="tableheadtext">Some bold text</div> </div> becomes <div> &nbsp;&nbsp;<b>Some bold text</b> </div> Example: <div class="head1">Big bold text</div> becomes <h1>Big bold text</h1>