Skip to main content

Styling

Styling through the FMC framework is done using CSS which can be imported through your plugin or instrument. CSS classes are applied in either of the two ways below, one of which is always done and the other of which allows for manual custom styling to be applied.

The FMC framework, will not by default apply any styling of it's own, and all styling is the responsibility of the developer.

Modifying existing styles​

The FMC framework by default uses 3 CSS classes:

  • fmc-letter which is applied to every letter rendered by the FMC
  • fmc-container which contains the FMC
  • fmc-row which applies to every row (but not the individual cells)

Additional styling can be done through using html as a selector, such as for fonts.

Applying styling to templates​

You can also apply custom styling to items in an FmcRenderTemplate. To do so you want to suffix the text it applies to with [style1 style2 ...], where style# is the name of the CSS class to apply. If you wish to apply different styling to text within the same template column, you can do the same.

For example, in a render template column you might have the below string:

"TAILWIND[amber]   LEFT[green]";

In this above example, TAILWIND will have the amber style applied to it, and LEFT will have the green style applied to it.