Panel | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
This section is a work-in-progress. We're still fleshing out the definition of Functional Examples. If you have questions, please contact ~jacob.farber@utoronto.ca or ~Eli Unlicensed user or Unlicensed user. |
Functional Examples: plug and play component samples for application integration
...
Section | |||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
Code Block |
---|
<div class="theme"> <div class="selector state">foo</div> </div> |
Notes:
- all Fluid style definitions will be name spaced to the theme (ie. .fluid-infusion button.disabled) so that they will not collide with some other button style already defined for the page, but can inherit from previously defined buttons
- state: where possible use the ARIA state definition as the state
- we will need to avoid the very useful (but buggy [IE6]) pattern of chaining multiple classes on a single element as a way of modifying one class with another ie. foo.className.anotherClassName [http://sonspring.com/index.php?id=102] and [http://www.ryanbrill.com/archives/multiple-classes-in-ie]
Components and html elements
a quick inventory of what we have
General
- mouseover highlight
- element focus highlight
Layout Reorderer (see also: )
element | states | notes |
---|---|---|
| is the layout an "element"? | |
|
| |
| ||
|
Image Reorderer (see also: Image Reorderer API, Lightbox Tutorial, Drag and Drop Design Pattern)
element | states | notes |
---|---|---|
|
| |
| ||
|
Reorderer (see also: Reorderer API)
element | states | notes |
---|---|---|
|
Uploader Design Overview (see also: Tutorial - Uploader, Uploader API, Uploader Design Pattern )
element | states | notes |
---|---|---|
| ||
| ||
|
| |
| ||
|
| |
|
Inline Edit (see also: Simple Text Inline Edit API, Tutorial - Simple Text Inline Edit, Inline Edit Design Pattern)
element | states | notes |
---|---|---|
| ||
|
Pager (see also: Pager Tutorial - Markup-driven, Pager API, Pagination Design Pattern)
...
Brainstorming some lists here....
Conceptual States:
- focused
- disabled/enabled
- editable/un-editable
- movable/locked
- draggable/locked
- open/closed
- active
- checked
- selected
- read only
- ready
- changed
- uploaded
- success
- error
- hover
- default
- hidden
- expanded
<aside>Interesting conversation here about uploaded and success. "Uploaded" is really just "success" in the Uploader context. One could also see "checked" and "selected" as synonymous even if HTML does not. </aside>
HTML States:
- disabled
- selected
- readonly
CSS States:
css2
- focus
- linked
- active
- hover
- pseudo-elements (first-child, first-letter, before, after, etc.)
css3
- checked
- indeterminate
- disabled
- open
- default
- hidden
- more pseudo-elements
ARIA States:
- autocomplete
- checked
- disabled
- expanded
- haspopup
- invalid
- level
- multiline
- multiselectable
- pressed
- readonly
- required
- selected
- valuemax
- valuemin
- valuenow
- valuetext
...