Bulma theme

The Teklia Bulma theme is the stylesheet shared by all Teklia products. It is built on top of Bulma 1.x and brings three things:

  • The Teklia brand: colors, fonts and a recognizable "thick bottom border" look applied to Bulma components.

  • Fixes and improvements to Bulma itself: a softer dark mode, readable colored text in both themes, accessible color contrasts, keyboard focus indicators…

  • Custom components that Bulma does not provide and that several products need: a masonry layout, a multi-part progress bar, a tree view, a styled range slider and the Teklia navigation bar.

Why a shared theme?

Each product used to carry its own copy of these overrides, and they slowly drifted apart. Keeping them in a single package means that:

  • every product looks and behaves the same way, so users moving from one product to another feel at home;

  • a fix (a contrast issue, a browser bug, a dark mode glitch) is done once and shipped everywhere with a version bump;

  • new products start with a complete, tested design system instead of a vanilla Bulma.

The theme stays a Bulma theme: everything documented on the Bulma documentation still applies. This documentation only covers what the theme adds or changes.

What is inside

Feature What it gives you Classes

Light and dark themes

Follows the OS preference, with a persisted switch and elements displayed in one theme only.

data-theme-switch, is-light-theme-only, is-dark-theme-only

Masonry

Justified rows of cards (pages, images, documents…) of any aspect ratio, without cropping and without JavaScript.

masonry, masonry-brick

Multi progress bar

A progress bar split into colored blocks, to show the status breakdown of a task.

multi-progress, progress-block

Tree

A compact, collapsible tree of items, one line per item.

tree, item, line

Range slider

A consistent <input type="range"> look across browsers and themes.

input[type="range"]

Navigation bar and page header

The Teklia main navigation bar and the page header below it.

main-nav, header

Helpers

Small utility classes: table cells that shrink, truncated selects, color squares, line breaks…

shrink, is-truncated, color-square…

Bulma components changes

How the theme restyles Bulma’s own components (buttons, cards, inputs…), and why.

-

How the theme is organized

The theme is written in Sass. The sources are small and split by feature:

teklia.scss          The Teklia brand: colors and fonts, passed to src/main.scss
_index.scss          npm package entry point, forwards teklia.scss
teklia.js            Light / dark theme switch
src/
  main.scss          Entry point: loads theme.scss, dark.scss, the components, and restyles Bulma components
  theme.scss         Bulma configuration (default colors, radius, shadows…)
  dark.scss          Dark mode palette and the *-theme-only helpers
  masonry.scss       Masonry layout
  multiprogress.scss Multi progress bar
  navbar.scss        Teklia main navigation bar
  range.scss         Range slider
  tree.scss          Tree view
  _mixins.scss       Internal helpers (e.g. a rule for every Bulma color)

The theme is compiled into a single teklia.css file (and its minified version teklia.min.css), which is published both as an npm package and as a Django application. See Installation and usage to add it to a project.

The demo page uses every feature of the theme on a realistic interface, in both light and dark themes. It is the demo.html file of the repository: build the theme with npm run build and open it in a browser to see your local changes.