Less Files

• contain Less code related to a single UI element
• may use specific global Less code.

Component selector

The component's machine name should be used as the outermost selector (class or id) for all main rules. Less rule nesting should be used to ensure this.

Example:

.finna-panel {
  // All main rules nested here
}

Variation classes

A component may have variations that can be used by adding a variation class to the outermost HTML element. Variation class names should start with the component machine name.

If a component has several variations, it can be useful to have a separate default variation class so that other variations have less properties to override.

Example:

.finna-panel-default {
  // All "default" variation rules nested here
}

.finna-panel-borderless {
  // All "borderless" variation rules nested here
}

Dependencies

Component Less files may depend on anything imported in the global.less file in finna2 theme. This includes Bootstrap, Font Awesome and Less variables.