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?