Toubiz Widget Development

Random bootstrap template used as wrapper to emulate real world usage in development. Don't use bootstrap, kids

Usage

Example

<toubiz-widget
    route="/article"
    class="toubiz-widget"
    api-token="..."
    base-uri="https://toubiz.nimius-wip.de"
    serialized-configuration="{
        query: {
            filter: {
                category: '4c5fffa9-b6df-4ca6-98aa-063d848b4e0b'
            }
         }
    }"
></toubiz-widget>
                

Attributes

route The default route opened when executing the widget. The following routes are available:
  • /article
  • /article/:id
  • /event
  • /event/:id
api-token API Token of the user or channel that should be used for this widget.
base-uri (optional) URI of the toubiz instance the widget should use. Defaults to https://mein.toubiz.de
serialized-configuration Configuration, serialized in JSON5 format. The following keys may be configurred:
  • query: The default query sent to the article.index endpoint as deep object. Please refer to the API Documentation for an overview of possible filters. Please note, that query encoded keys such as filter[category]=... become a deep object such as { filter: { category: '...' } }

Styling

Widgets are being rendered as web components with the actual contents being part of the shadow DOM.

This makes it resistant with colliding styles from the website they are embedded in.

In order to align the look and feel of the widget with the identity of the host website, some configuration options are are exposed as CSS Custom Properties (often also called CSS Variables). These options can be overridden by assigning new values from any CSS within the host site.

Doing so needs to be done withing the scope of .toubiz-widget, for example:


.toubiz-widget {
    --tb-w-color-primary: #16bdca;
    --tb-w-color-body: #014451;
}
                

Design Options

--tb-w-color-primary

Used as color accent throughout the application. Lighter and darker shades are generated automatically. If needed, the lighter and darker shades can also be overridden by redefining the following variables and appending the !important keyword:

  • --tb-w-color-primary-100
  • --tb-w-color-primary-200
  • --tb-w-color-primary-300
  • --tb-w-color-primary-400
  • --tb-w-color-primary-600
  • --tb-w-color-primary-700
  • --tb-w-color-primary-800
  • --tb-w-color-primary-900

Note: --tb-w-color-primary-500 is omitted on purpose, as this middle value is already represented by --tb-w-color-primary itself.

--tb-font-heading:

Set headings to any valid font-family. Web fonts that already available on the host website can be referenced.

--tb-font-body:

Set body copy to any valid font-family. Web fonts that already available on the host website can be referenced.

--tb-font-weight-heading

Set headings to any valid font weight.

--tb-font-weight-body

Set body copy to any valid font weight.

  • --tb-text-xs
  • --tb-text-sm
  • --tb-text-base
  • --tb-text-lg
  • --tb-text-xl
  • --tb-text-2xl
  • --tb-text-3xl
  • --tb-text-4xl
  • --tb-text-5xl

⚠️ Subject to change

Change the font size scale. Possible use cases:

  • Better fit the general typography of the host site
  • Improve accessiblity by switching to rem units in accordance with your individual root font size.

Note: The default scales makes use of pixel-based font sizes to ensure consistent looks across a wide range of host site assumptions.

land in sicht ag


Wiesentalstr. 5
79115 Freiburg
P: +49 (0) 761 887917-0
E: info@land-in-sicht.de