Join the infusion-users mailing list and ask your questions there.
FSS and Infusion both adhere to a strict naming convention for class name selectors.
[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 columnfl-tabs-left
: left-oriented tabsfl-grid-caption
: the caption of an image in a gridfl-widget-titlebar
: the titlebar of a widgetThe 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:
flc-progress-label
: the label for a progress bar (Progress component)flc-reorderer-dropWarning
: the drop warning used with the reorderer (Reorderer component)flc-inlineEdit-textEditButton
: the 'edit' button used with an inline edit (Inline Edit componentflc-pager-pageLink-skip
: a page link that should be skipped (Pager component)When combining class names for styling and class names for selectors, the convention is
<el class="flc-* fl-*">
so that the DOM selectors are before the CSS selectors.
The reason we do this is to separate the different purposes of selectors: one to style things, one to find things in the DOM. This way, you could change your behavioural code without affecting your appearance and vice versa.