The template for FSS classnames (i.e. class names use for styling) looks like fl-[fluid:thing]-[fluid:role]-[fluid:state], with some rulesguidelines:
- multiple words are in camelCase, so they might look like fl-[fluid:multiWordThing]-[fluid:multiWordRole]-[fluid:state]
- 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 columnfl-tabs-left: left-oriented tabsfl-grid-caption: the caption of an image in a gridfl-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:
...