Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0

...

Section
Column

Overview

A "one-stop shop" for developers, containing simple, working, well-styled versions of the Fluid components ready for cut-and-paste integration.

Goals

  1. To help developers better understand Fluid components and how they work
  2. To help foster widespread adoption of Fluid components
  3. To assist developers in writing sematic markup and applications that are AT friendly
  4. 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)
Column
Panel
borderColor#566b30
bgColor#fff
titleBGColor#D3E3C4
titleOn this Page
borderStylesolid
Table of Contents
minLevel2
maxLevel5
excludeIntroduction*

...

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

...

  • [

...

...

  • and

...

...

Components and html elements

a quick inventory of what we have

General

  • mouseover highlight
  • element focus highlight

Layout Reorderer (see also: )

element

states

notes

  • layout


is the layout an "element"?

  • pane
    • pane header
    • pane body
  • locked
  • keyboard focus
  • drag state (avatar)
  • placeholder


  • drop target



  • drop remediation



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

element

states

notes

  • image container
    • thumbnail
    • figure text
  • keyboard focus
  • drag state (avatar)
  • placeholder


  • drop target



  • instructional text



Reorderer (see also: Reorderer API)

element

states

notes

  • list item



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

element

states

notes

  • dialog



  • file queue



  • queue item
  • ready
  • uploaded
  • error
  • mouseover highlight


  • scrolling area



  • buttons
  • active
  • disabled


  • progress



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

element

states

notes

  • text



  • field



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

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

...