Versions Compared


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

Wiki MarkupThe template for *FSS classnames* (i.e. class names use for styling) looks like *fl\-\[fluid:thing\]\-\[fluid:role\]\-\[fluid:state\]*, with some guidelines:

  1. Wiki Markupmultiple words are in camelCase, so they might look like *fl\-\[fluid:multiWordThing\]\-\[fluid:multiWordRole\]\-\[fluid:state\]*
  2. Wiki Markupcomponents are always the first "thing", so they would look like *fl-\[fluid:componentName\]\-\[fluid:thing\]\-\[fluid:role\]-\[fluid:state\]*

Wiki Markup*\[fluid:thing\]* = _required_ the concept the class name is referring to at the most general yet still meaningful level (eg. fl\-*tabs*, fl\-*widget*, fl\-*col*, fl\-*container*, etc) *\
[fluid:role\]* = _optional_ the purpose or action of {{THING}}, which could be a more detailed version of {{THING}} (eg. fl-tabs\-*centered*, fl-col\-*flex*, fl-container\-*500*, fl-widget\-*titleBar*) *\
[fluid:state\]* = _optional_ a modifier of the {{ROLE}} or {{THING}}, which is only temporary and dependant on other actions (eg. fl-button-left\-*disabled*, fl-widget-content\-*draggable*)

Some examples of FSS class names:

  • fl-col-flex: a flexible width column
  • fl-tabs-left: left-oriented tabs
  • fl-grid-caption: the caption of an image in a grid
  • fl-widget-titlebar: the titlebar of a widget

Wiki MarkupThe template for *Infusion selectors* (i.e. classnames used for programmatic manipulation of the DOM) looks like *flc\-\[fluid:componentName\]\-\[fluid:thing\]\-\[fluid:role\]\-\[fluid:state\]*, with the same guidelines as FSS selectors.

Some examples of component selectors: