Responsive helpers

Responsive breakpoints

Values are given in “pixels” (in standard cases: with base font size to 16px), but breakpoints are computed into em, which helps to better manage zoom. (for example, “mobile” breakpoint can be triggered on a large screen if you zoom a lot)

The current active breakpoint value is available in body::before content value (for major breakpoints), if you need to know (from JavaScript pov) which major breakpoint is active, use the useActiveBreakpoint.ts helper in react-components.

Major breakpoints

  • $breakpoint-medium: set up to 910px by default
  • $breakpoint-small: set up to 680px by default
  • $breakpoint-tiny: set up to 450px by default

Minor breakpoints

  • $breakpoint-large: set up to 1500px by default
  • $breakpoint-medium-landscape: set up to 1100px by default

They can be overidden depending of the needs of the project. Be careful while updating major breakpoints, good that Proton universe keeps some consistency.

“deskop” helper

Hiding something between deskop and tablet

<span class="nodesktop">Lorem ipsum dolor</span>
Applies display: none to the element for desktop breakpoint.
On tablet breakpoint, will be “reseted” by display: block.

“tablet” helpers

Hiding something between tablet and mobile

<span class="notablet">Lorem ipsum dolor</span>
Applies display: none to the element for tablet breakpoint.
On mobile breakpoint, will be “reseted” by display: block.

Linearizing content on tablet

<span class="autotablet">Lorem ipsum dolor</span>
Applies float: none; display: block; width: auto; to the element for tablet and smaller breakpoints.

Flexbox version: resize the window, by default, elements take all the width on tablet thanks to ontablet-flex-column.

.w30
.w30 .w30
<div class="flex flex-spacebetween ontablet-flex-column">
  <div class="w30">div</div>
  <span class="w30">span</span>
  <em class="w30">em</em>
</div>

Margin/padding helpers

Please check before how margin/padding helpers work.

  • .ontablet-m = margin
  • .ontablet-p = padding
  • t/r/b/l = top/right/bottom/left
  • 0/1/2 = 0/1em/2em

Examples:

.ontablet-pt2 = padding-top: 2em on tablet and smaller.
.ontablet-pl2 = padding-left: 2em on tablet and smaller.
.ontablet-p1 = padding: 1em on tablet and smaller.
.ontablet-pl1 + .ontablet-pr1 + .ontablet-m1 = padding-left: 1em + padding-right: 1em + margin: 1em on tablet and smaller.

Width/max-width helpers

  • .ontablet-w25 = { width: 25%; }
  • .ontablet-w100 = { width: 100%; }
  • .ontablet-wauto = { width: auto; }
  • .ontablet-mw100 = { max-width: 100%; }

These apply for tablet breakpoint and smaller.

Text alignments

<span class="ontablet-alignleft">Lorem ipsum dolor</span>
<span class="ontablet-aligncenter">Lorem ipsum dolor</span>
<span class="ontablet-alignright">Lorem ipsum dolor</span>
Applies text-align: left to the element for tablet and smaller breakpoints.
Applies text-align: center to the element for tablet and smaller breakpoints.
Applies text-align: right to the element for tablet and smaller breakpoints.

Table helpers

<table class="ontablet-hideTd2 ontablet-hideTd3">…
Hides the second and third column of a table for tablet breakpoint and smaller.

List helper

<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.
  • Normal
  • list
  • list
  • list
  • list
  • list end

“mobile” helpers

Hiding something on mobile

<span class="nomobile">Lorem ipsum dolor</span>
Applies display: none to the element for mobile breakpoint. (will stay hidden even on tinymobile breakpoint)

Linearizing content on mobile

<span class="automobile">Lorem ipsum dolor</span>
Applies float: none; display: block; width: auto; to the element for mobile and smaller breakpoints.

Flexbox version: resize the window, by default, elements take all the width on mobile thanks to onmobile-flex-column.

.w30
.w30 .w30
<div class="flex flex-spacebetween onmobile-flex-column">
  <div class="w30">div</div>
  <span class="w30">span</span>
  <em class="w30">em</em>
</div>

This can be avoided using onmobile-flex-column-nostretch.

.w30
.w30 .w30
<div class="flex flex-spacebetween onmobile-flex-column-nostretch">
  <div class="w30">div</div>
  <span class="w30">span</span>
  <em class="w30">em</em>
</div>

This can also be used on .autogrid class.

.flex-autogrid-item
.flex-autogrid-item
<div class="flex-autogrid onmobile-flex-column">
  <div class="flex-autogrid-item">…</div>
  <div class="flex-autogrid-item">…</div>
</div>

Other flexbox helpers for mobile:

  • onmobile-flex-item-fluid applies flex: 1 1 0px to the element for mobile and smaller breakpoints.
  • onmobile-flex-item-fluid-auto applies flex: 1 1 auto to the element for mobile and smaller breakpoints.
  • onmobile-no-flex applies flex: 0 0 auto to the element for mobile and smaller breakpoints.
  • onmobile-flex-shrink applies flex-shrink: 1 to the element for mobile and smaller breakpoints.
  • onmobile-flex-self-start applies align-self: start to the element for mobile and smaller breakpoints.
  • onmobile-flex-wrap applies flex-wrap: wrap; to the element for mobile and smaller breakpoints.
<span class="onmobile-static">Lorem ipsum dolor</span>
Applies position: static to the element for mobile and smaller breakpoints.

Margin/padding helpers

Please check before how margin/padding helpers work.

  • .onmobile-m = margin
  • .onmobile-p = padding
  • t/r/b/l = top/right/bottom/left
  • 0/0.25/0.5/1/2/3.5 = 0/0.25em/0.5em/1em/2em/3.5em

Examples:

.onmobile-pt2 = padding-top: 2em on mobile and smaller.
.onmobile-pl2 = padding-left: 2em on mobile and smaller.
.onmobile-p1 = padding: 1em on mobile and smaller.
.onmobile-pl1 + .onmobile-pr1 + .onmobile-m1 = padding-left: 1em + padding-right: 1em + margin: 1em on mobile and smaller.

Text alignments

<span class="onmobile-alignleft">Lorem ipsum dolor</span>
<span class="onmobile-aligncenter">Lorem ipsum dolor</span>
<span class="onmobile-alignright">Lorem ipsum dolor</span>
Applies text-align: left to the element for mobile and smaller breakpoints.
Applies text-align: center to the element for mobile and smaller breakpoints.
Applies text-align: right to the element for mobile and smaller breakpoints.

Width/max-width helpers

  • .onmobile-w25 = { width: 25%; }
  • .onmobile-w100 = { width: 100%; }
  • .onmobile-wauto = { width: auto; }
  • .onmobile-mw100 = { max-width: 100%; }
  • .onmobile-min-w100 = { min-width: 100%; }

These apply for mobile breakpoint and smaller.

Table helpers

<table class="onmobile-hideTd2 onmobile-hideTd3 onmobile-hideTd4 onmobile-hideTd5">…
Hides the second, third, fourth and fifth column of a table for mobile breakpoint and smaller.

“tinymobile” helpers

Hiding something on tinymobile

<span class="notinymobile">Lorem ipsum dolor</span>
Applies display: none to the element for tinymobile breakpoint.

Linearizing content on tinymobile

<span class="autotinymobile">Lorem ipsum dolor</span>
Applies float: none; display: block; width: auto; to the element for tinymobile breakpoint.

Flexbox version: resize the window, by default, elements take all the width on tinymobile thanks to ontinymobile-flex-column.

.w30
.w30 .w30
<div class="flex flex-spacebetween ontinymobile-flex-column">
  <div class="w30">div</div>
  <span class="w30">span</span>
  <em class="w30">em</em>
</div>

Table helpers

<table class="ontinymobile-hideTd3">…
Hides the third column of a table for tinymobile breakpoint.