Functional Examples: plug and play component samples for application integration

(formerly Springboards)

Overview A "one-stop shop" for developers, containing simple, working, well-styled versions of the Fluid components ready for cut-and-paste integration. Goals To help developers better understand Fluid components and how they work To help foster widespread adoption of Fluid components To assist developers in writing sematic markup and applications that are AT friendly To provide useful and easily customizable themes for Fluid components and beyond Guidelines clean semantic markup with wrappers for styling namespaced CSS no "context" unified CSS theme cut-and-paste-able well documented (excellent inline comments)

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: )

Image Reorderer (see also: Image Reorderer API, Lightbox Tutorial, Drag and Drop Design Pattern)

Reorderer (see also: Reorderer API)

Uploader Design Overview (see also: Tutorial - Uploader, Uploader API, Uploader Design Pattern )

Inline Edit (see also: Simple Text Inline Edit API, Tutorial - Simple Text Inline Edit, Inline Edit Design Pattern)

Pager (see also: Pager Tutorial - Markup-driven, Pager API, Pagination Design Pattern)

elements and states

functionality, presentation and accessibility

Mapping out what are all the elements that we want to support in components and what states and attributes we need to support for those elements

 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

Generic HTML elements:

• a [link]

Form elements

• input type="text"
• input type="image"
• input type="button"
• input type="checkbox"
• input type="radio"
• input type="file"
• input type="reset"
• input type="password"
• textarea
• button
• select
• optgroup
• option

Text elements

• label

ARIA defined meta elements (Roles)

• alert
• alertdialog
• application
• button
• checkbox
• columnheader
• combobox
• description
• dialog
• directory
• document
• grid
• gridcell
• group
• label
• link
• list
• listbox
• listitem
• log
• menu
• menuitem
• menuitemcheckbox
• menuitemradio
• option
• presentation
• progressbar
• radio
• radiogroup
• region
• row
• rowheader
• separator
• slider
• spinbutton
• status
• tab
• tablist
• tabpanel
• textbox
• timer
• toolbar
• tooltip
• tree
• treegrid
• treeitem

Fluid component specific objects:

• avatar
• vertical scrolling area
• portlet
• draggable element