Media WebUI

Breakpoint Settings

Media breakpoint sizes are defined in the _settings.scss file, so can easily be changed according to your requirements. Please be aware that you will need to specify breakpoint sizes to at least 2 decimal places if you are using em or rem units, and also ensure that there is a maximum 0.01 unit difference between converging breakpoints.

Here are the default sizes

$settings_bp_1_under: 29.99rem;
$settings_bp_1_over: 30rem;
$settings_bp_2_under: 39.99rem;
$settings_bp_2_over: 40rem;
$settings_bp_3_under: 49.99rem;
$settings_bp_3_over: 50rem;
$settings_bp_4_under: 69.99rem;
$settings_bp_4_over: 70rem;
$settings_bp_5_under: 89.99rem;
$settings_bp_5_over: 90rem;

These are the variables used by the WebUI media queries.

Breakpoints

Almost all WebUI CSS utility classes have corresponding breakpoint specific classes using the same naming convention as the variables above. The format is -bp-[breakpoint number]-[direction]. The direction is either under or over. For example -bp-1-under or -bp-3-over.

Naming convention

Breakpoints are numbered 1 to 5, with 1 being the smallest. A breakpoint suffix can be added to most utility class using the format -bp-[breakpoint number]-[direction]. The direction is either under or over.

For example -bp-1-under or -bp-3-over.

Because WebUI implements breakpoints for minimum media sizes as well as maximum media sizes, utility classes can be combined to produce responsive behaviour within a range. For example, if you only wanted to show an element between breakpoint 2 and 4, you could use show-bp-2-over and hide-bp-4-over classes together. A very important thing to note is that to implement behaviour within a range, or in multiple step-up / step-down fashion, the utility classes must always point in the same direction.

Another example could be combining text-md-bp-2-under and text-xl-bp-4-under to increase the text size between breakpoints 2 and 4 only. text-md is 1em, so the size will be unchnaged under breakpoint 2.

Example
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Markup
<div class="flex-row">
  <div class="flex-size-14">     
    <div class="flex-col pad-xs border-sm border-accent-4 background-accent-1-light">
      <span class="text-xl text-xs-bp-2-under text-md-bp-4-under">Lorem ipsum dolor sit amet</span>        
    </div>
  </div>
  <div class="flex-size-6">
    <div class="flex-col pad-xs border-sm border-accent-4 background-accent-1-light">
      <span class="show-bp-2-over hide-bp-4-over">Lorem ipsum dolor sit amet</span>
    </div>
  </div>  
</div>