1.2 M5E6: Additional classes for Core/Theme CSS

Marty Vance <[email protected]> Thu, 30 Apr 2009 22:44:57 -0600
Newsgroups gmane.comp.cms.xaraya.devel
Organization Xaraya
Message-ID <[email protected]>
Xaraya makes extensive use of CSS to promote a consistent user interface 
across all system components, defining numerous rules as "building 
blocks" for interface elements.  Xaraya currently segregates these 
classes into two areas. "Core CSS" contains utility rules intended for 
use as shortcuts to achieve basic styling.  "Theme CSS" defines a 
standardized set of rules for use in themes.

It is time to identify and address deficiencies in our use of CSS.

Theme CSS

A few absences have been identified in Theme CSS, and a couple have been 
introduced by recent changes.  Proposed additions are:

.xar-items: Applied wherever data items are displayed in a table.

.xar-item-actions: Applied to the table cell which contains the action 
(modify, delete, etc) links for each item, typically the right-most cell.

.xar-item-controls: Applied to parent elements of inputs used to control 
or filter displayed items.  Examples are the horizontal tables displayed 
at the top of the UI in many admin-list functions.

.xar-form-footer: Applied to parent elements of buttons used to control 
a form (at the bottom of the form).

.xar-icon: Applied to icon img elements or their immediate parent, such 
as links.

.xar-icon-disabled: Applied to icon img elements or their immediate 
parent when the represented action is not allowed.

The icon classes are premised on the practice of always showing an icon, 
even when the action is not allowed.

Core CSS

No changes are planned at this time, unless suggestions arise from this 
discussion.

Tabs

Tabs as a UI element have become widespread since their introduction, 
yet the CSS for them is still relegated to a dedicated file, located in 
base/xarstyles/navtabs.css.

Currently, navtabs.css mixes style properties which could be separated 
out to Core and Theme CSS.  Layout properties (display, margin, padding, 
white-space) are mixed with presentation (font-weight, colors, border). 
  The layout properties are necessary to achieve a tab-like appearance, 
while the specified presentation property values often don't harmonize 
with the theme styles.

There are multiple remedies for this situation:

- Move the contents of navtabs.css to the Theme CSS.  This doesn't solve 
the layout/presentation mingling issue, only removes the separate file.

- Move the tab classes (with their layout properties) to Core CSS, 
remove the presentation properties, and apply other .xar-* utility 
classes in the templates to restore the presentation.  Ideal according 
to the rationale of our CSS usage, but will require many template changes.

- Move the tab classes to Core CSS as above, and duplicate them in Theme 
CSS with presentation properties.  This would be a new construct in 
Xaraya, as we don't currently redeclare and CSS classes.  This could 
influence the order in which CSS files are called in the output, as 
browsers apply rules from later CSS on top of earlier rules, thus 
creating potential inheritance issues.  Not ideal in the long run., as 
our current best practice is to call the Theme CSS first, and everything 
else including Core CSS later.

- Other solutions?

Navtabs also contains a few browser-specific "hacks", and other niceties 
for more compliant browsers.  Some of the hacks can be removed, as they 
are for dead browsers, such as IE-Mac.

Suggestions?