Functional Examples
Functional Examples: plug and play component samples for application integration
(formerly Springboards)
HTML Patterns
CSS Patterns
<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 |
|---|---|---|
| | |
| | |
|
| |
| | |
|
| |
| | |