Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

The template for FSS looks like fl-[thing]-[role]-[state], with some rules:

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

[thing] = required the concept the class name is referring to at the most general yet still meaningful level (eg. fl-tabs, fl-widget, fl-component, fl-col, fl-container, etc)
[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)
[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)

The template for FLUID selectors looks like flc-[componentName]-[thing]-[role]-[state], with the same rules as FSS selectors.

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.

  • No labels