Helpers

The theme adds a few utility classes, on top of Bulma’s helpers. Each of them solves a recurring need of Teklia products.

Tables

Shrinking cells: shrink

On a th or td, shrink makes the column as narrow as its content, on a single line. The other columns share the remaining width. It is meant for columns with short values: checkboxes, dates, statuses, action buttons.

<table class="table is-fullwidth">
  <thead>
    <tr>
      <th class="shrink"><input type="checkbox" aria-label="Select all"></th>
      <th>Name</th>
      <th class="shrink">Updated</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="shrink"><input type="checkbox"></td>
      <td>Folio 12r</td>
      <td class="shrink">12 min ago</td>
    </tr>
  </tbody>
</table>

User-defined names: is-word-break-all

Names typed by users (projects, processes, files…) can be a single very long word, which would overflow the page. is-word-break-all allows breaking them at any character. It is most often needed in table cells:

<td class="is-word-break-all">{{ process.name }}</td>

Text

Keeping line breaks: has-line-breaks

Displays the line breaks of a text as is (white-space: pre-line), for example for a multi-line description or error message, while still wrapping long lines:

<p class="has-line-breaks">{{ process.error }}</p>

Text colors

Bulma’s has-text-<color> helpers use the base color, which can be unreadable: yellow text on a white background, or dark red in the dark theme. The theme makes has-text-primary, has-text-link, has-text-info, has-text-success, has-text-warning and has-text-danger use the variant of the color that Bulma computes to contrast with the current background. Nothing changes in the markup.

Bulma’s grey helpers (has-text-grey…) keep the same color in both themes. For secondary or emphasized text, prefer the theme’s helpers, which follow the theme:

Class Color

has-text-weak

Secondary text (--bulma-text-weak).

has-text-strong

Emphasized text (--bulma-text-strong).

Keyboard keys: kbd

<kbd> elements are displayed as keyboard keys, with the thick bottom border of the theme:

<p><kbd>Ctrl</kbd> + <kbd>Enter</kbd> validate the line</p>

Color squares: color-square

A small square of color, the size of the text, aligned with it. It shows the color of an object (an element type, a class…) or serves as a legend:

<span class="color-square has-background-success"></span> 796 done

<!-- With a color from the data -->
<span class="color-square" style="background-color: #e6c3a0"></span> Act

Forms

Truncated selects: is-truncated

On a Bulma .select, is-truncated limits its width to about 30 characters, and cuts the selected option with an ellipsis. Useful for selects with long options in a toolbar:

<div class="select is-truncated">
  <select>
    <option>All types</option>
    <option>Act (baptism, marriage or burial record)</option>
  </select>
</div>

Large checkboxes: is-large

input[type="checkbox"].is-large displays a checkbox twice as large, for example in a table where rows are selected:

<input type="checkbox" class="is-large">

Soft colors: is-soft

Bulma’s is-light variant of tags and notifications stays pale in the dark theme, where it is far too bright. Bulma only provides a variant following the theme, is-soft, for buttons. The theme adds it to tags and notifications, for every color:

<span class="tag is-success is-soft">96%</span>

<div class="notification is-warning is-soft">
  Some pages could not be processed.
</div>

Other helpers

Class Effect

dropdown-item is-disabled

Displays a dropdown item as disabled (weak text color, "not allowed" cursor). Bulma does not support the disabled attribute on links anymore. The item can still be clicked: also disable its action in your code.

footer is-paddingless

Removes the padding of a Bulma footer.