v7.3.0

What's new in TaskBoard v7.0.0

New themes & CSS

All products in the Bryntum suite now has new themes:

  • Svalbard Light & Dark
  • Stockholm Light & Dark
  • Visby Light & Dark
  • Material3 Light & Dark
  • High Contrast Light & Dark

The new themes are based on CSS variables and are easier to customize than the old themes. The themes only change CSS variable (CSS custom properties) values, there are no custom selectors etc. in them. A single theme file has the custom values for all products.

The structural CSS for each product is separated from the theme CSS, making the theme files much smaller than before.

To for example include the "Material3 Light" theme in your app for TaskBoard, you need to include the following CSS files:

<!-- Structural CSS -->
<link rel="stylesheet" href="build/taskboard.css">
<!-- Theme CSS -->
<link rel="stylesheet" href="build/material3-light.css">

Also note that none of the new themes applies any font-family. The demo styling does, but the themes themselves do not. Previously the Material theme pulled in Roboto.

No built-in FontAwesome Free

The themes also no longer include FontAwesome Free, so you need to include it yourself if you want to use icons. This change was made to not bloat the CSS files for apps that do not use our default icons.

This also means that we no longer re-scope FontAwesome (there are no b-fa-xx rules). Instead, use FontAwesome classes as you normally would.

There is still a version of FontAwesome Free included in the build folder of the TaskBoard package for your convenience. Include it in your app with something like this:

<!-- Optionally include FontAwesome Free -->
<link rel="stylesheet" href="build/fontawesome/css/fontawesome.css">
<link rel="stylesheet" href="build/fontawesome/css/solid.css">

If you chose to not include it (or your own version of FontAwesome), your app will need to override our b-icon-xx rules to show the icons you are using instead.

CSS variables

As mentioned above, the styling is now based on CSS variables (CSS custom properties). All Bryntum CSS variables are prefixed with --b- to avoid conflicts with other CSS variables in your app. For example, the background of a Panel is set using the --b-panel-background variable:

.my-custom-panel {
  --b-panel-background : #ccc;
}

Available CSS variables are listed in the docs. Make sure to also check the updated customization guides.

Selector normalization

Previously we used a somewhat random mix of single words and kebab-casing for the CSS selectors (for example b-celledit, but b-grid-cell). This has been normalized to use kebab-case. For example the CellEdit features no longer adds the .b-celledit class, but instead correctly kebab cased .b-cell-edit.

This will likely affect any custom styling you have, please check your selectors.

Advanced - Loading from sources

When loading from sources, the CSS is pulled in automatically. Each imported class adds a <link> tag to the head of the document. This should not be used in production, and it might lead to some timing issues. But, it lets you create custom structural CSS files with only the components you need. We will be adding a guide on this later.

Contents