CSS Framework Rules - Interaction States to Start With...
Let's seriously discuss framework rules.
Documentation as of today: http://wiki.jqueryui.com/jQuery-UI-CSS-Framework
(docs from now on)
If you know some other public discussions or concepts behind, stop me
right here and send me links;)
Check out if you disagree:
[X] multiple CSS classes is not pure stuff
[X] CSS framework can leverage multiple classes, power collaboration
and enable mashups.
[X] ThemeRoller is cool proof of that
[X] Without restrains, CSS framework bloats to stratosphere.
To minimize the last point let's find a balance between convenience,
bloat and common sense inside ThemeRoller and jQuery UI widgets.
Topics:
*new classes
*relationships between classes on the same element
*class positions withing DOM
...
name yours.
My notes:
IMHO what could make sense in ThemeRoller and for theming does not
need to go hand in hand with jQuery UI.
=== Adding New Classes:
In docs I noticed a new suggestion "Form states":
ui-form-default :: normal appearance of a form element
ui-form-hover :: appearance on mouse over
ui-form-active :: appearance in the selected state (checked
radiobutton, checkbox, etc.)
The form style can be achieved with inheritance:
.form .ui-state-default etc. the question is more connected with
expanding ThemeRoller. I think ThemeRoller should be expandable but
jQuery UI widgets should stick with ui-state-XXX for interactions.
[RULE 1: don't add new interaction classes for style or other when the
basic behavior is already defined]
Probably, I don't know the whole story behind but from far distance -
not persuaded.. For the next one I know the story:
New interaction state "ui-state-pressed" Yes or no? Regular 2 state
clickable element can have 2 styles as far as mouse click is concerned
- pressed and relieved. Pressed is new interaction state - should have
class in order to theme it. (so far I don't see big use of 'relieved'
but as well it seems justified). Here, the style is connected to
behavior which does not exist, yet;)
=== Relationships Between Classes On The Same Element
In Tabs, selected tab has the following classes: "ui-state-default ui-
state-active..."
In Accordion, selected header (tab) has the following: "ui-state-
active..."
Something begs explanation here, either one of them is wrong or they
both run on different set of rules.
[RULE 2 - classes are not added at convenience but have relationships
between each other ]
Do we compound or not? If yes I would expect:
ui-state-default (default)
ui-state-default ui-state-active (active)
ui-state-default ui-state-disabled (disabled)
ui-state-default ui-state-highlight (highlighted)
ui-state-default ui-state-active ui-state-highlight (active
highlighted)
(see Datepicker date field for example)
Are there any exceptions?
ui-state-disabled X ui-state-active (does not sound good but
possible)
=== Classes Positions within DOM
...
(to be continued)