MISC helpers

Lists

<ul class="unstyled">
  …
</ul>
Removes styles for ul or ol. Example:
  • Normal
  • list
  • unstyled
  • list
<ul class="list-2columns ontablet-list-1column">
  …
</ul>
Will use css multicolumn to display the list on 2 columns. On tablet, the list will be put on one column. Same helper exists also for mobile onmobile-list-1column.
  • Normal
  • list
  • list
  • list
  • list
  • list end

Increase click/tap surface

<div class="relative"> <a class="increase-surface-click">
Increase link/button tap/click zone to the closest parent that has position: relative.
(used in pagination drop down)

Something that should appear on hover in a parent

<button class="button-showOnHover">
  hover me, pikaaaaa…
  <span class="nonvisible button-showOnHover-element">CHU</span>

Careful when using this, might create issues with some tap devices like iPhone/iPads, etc.

For media print

<span class="reset4print">Lorem ipsum dolor</span>
Applies a big reset of all properties for @media print
<span class="noprint">Lorem ipsum dolor</span>
Applies display: none for @media print (element won't be printed)
<span class="onprint">Lorem ipsum dolor</span>
Applies display: block for @media print (hidden elements will be printed)

Dark Mode

For React applications, a isDarkMode (appConfigBody-darkmode for Angular) class is applied to the body when dark mode is triggered.

Then you have two helpers: hide-on-darkmode will hide something when dark mode is triggered, and display-on-darkmode (which is hidden by default) will be displayed when dark mode is triggered.

Test: Dark mode is triggered.

Test: Dark mode is not triggered.