v4 Documentation Preview

# Styling Pages & Widgets

# Predefined CSS Classes

As seen before, you can use CSS classes in the class property (as an array) or set CSS properties in the style property (as a dictionary) on your components.

You cannot define new CSS classes, but you can use classes from Framework7, for instance:

# CSS Variables

Another interesting technique is to override the many CSS Variables (opens new window) defined by Framework7 to suit your particular component's needs. The override will be applied to all descendants in the HTML DOM tree, in case of the Framework7 variables the underlying components which use them will use the new value. It is recommended to use Framework7 CSS variables in your components too, when appropriate, so that way you'll be sure the properties change according to the current theme and dark mode setting.

To redefine a CSS variable for the component and its descendants, use this syntax:

style:
  --f7-button-border-color: rgb(255, 0, 0)

To reuse a CSS variable, use:

  border-color: var(--f7-button-border-color)

You can even define your own CSS variables and use them in your components:

config:
  style:
    --my-color: =props.color
slots:
  ...
     ...
        ...
           config:
             style:
               background-color: var(--my-color)

# Applying CSS Properties Directly

Applying CSS properties like border-color directly on components is sometimes enough; but contrary to CSS variables like --f7-button-border-color which will be inherited to descendants in the tree, either by your own components or by f7 components (or their OH derivatives) that make use of these variables, they will only work on the element where you put the style configuration.

There are hundreds of CSS properties (opens new window) you can use to design your widgets. Use the resources at W3Schools (opens new window) or the CSS-Tricks Properties Almanac (opens new window) to learn more about CSS properties and techniques - these resources will provide code in HTML and CSS class definitions but you can most of the time adapt them for usage in components' YAML definitions.

While openHAB's layout components (oh-block, oh-grid-row, oh-grid-col) can help you with the placement of your widgets, to layout sub-components within a widget, you shouldn't use them because they include design mode controls that you don't need. Though you can use their f7-block, f7-row and f7-col equivalents instead, in many cases this is still "overkill": Consider directly applying the Flexbox or Grid properties to the components.

These resources will help you with Flexbox and Grid:

# Dynamic Styling & Positioning using CSS calc()

You can dynamically style and position elements by calculating their CSS properties with the calc() function. The calc() function is able to perform math (+, -, * & /) on multiple CSS values, which can even have different units.

For example, to set the height of a component to the current page's maximum content height (without scrolling), use the following calc() statement:

calc(96vh - var(--f7-navbar-height) - var(--f7-toolbar-height))

This subtracts the height of the navbar and the toolbar, which are stored in CSS vars, from 96% of the viewport's height.

These resources will help you with calc():

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub (opens new window)

← Component Reference →