Page Comparison

The template for FSS classnames (i.e. class names use for styling) looks like fl-[fluid:thing]-[fluid:role]-[fluid:state], with some rulesguidelines:

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

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

...

• 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

The template for FLUID selectors 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 rules guidelines as FSS selectors.

Some examples of component selectors:

...