WebUI mobile-first CSS

Breakpoints

Almost all WebUI CSS utility classes have corresponding breakpoint specific classes. 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 classes using the format -bp-[breakpoint number]-[direction]. The direction is either under or over.

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

Breakpoint Examples

In this example, a button is only hidden at breakpoint 3 and under.

    
<button class="button-lg button-accent-1 
    rounded-sm hidden-bp-3-under">
  Show for large device only
</button>
            
HTML

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 display an element between breakpoint 2 and 4, you might use hidden-bp-2-under and hidden-bp-4-over classes together.

There can be situations where a change in the order of flex items between two breakpoints is required. Although somewhat contrived, the following example shows a flex item containing a shape being in the center only for medium sized devices.

Lorem ipsum dolor sit amet

    
  

      
<div class="flex-row flex-nowrap info-dark">
  <div class="flex-size-9 pad-xs border-xs border-info">
    Lorem ipsum dolor sit amet
  </div> 
  <div class="flex-size-6 order-2-bp-2-under order-2-bp-4-over pad-xs border-xs border-info">     
    <div class="width-sm-md height-sm-md align-center custom-image-1 kite-clip-shape"></div>      
  </div>
  <div class="flex-size-9 pad-xs border-xs border-info">
    Lorem ipsum dolor sit amet
  </div>  
</div>
              
      
HTML

Breakpoint Settings

Media breakpoint sizes are defined in the _settings.scss and _settings.js files, 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.

CSS Breakpoint Settings

Here are the default sizes defined in _settings.scss.

General media breakpoints

$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;

HTML Table media breakpoint

$settings_table_bp: 39.99rem;

Modal Window media breakpoints

$settings_modal_bp_2_under: 39.99rem;
$settings_modal_bp_2_over: 40rem;
$settings_modal_bp_3_under: 49.99rem;
$settings_modal_bp_3_over: 50rem;
$settings_modal_bp_4_under: 69.99rem;

JavaScript Breakpoint Settings

These are the corresponding general breakpoints in _settings.js.

NOTE: These settings are used for some JavaScript functions. No JavaScript settings are required for responsive HTML tables or modal windows.

webui.bp_1_under = "29.99rem";
webui.bp_1_over = "30rem";
webui.bp_2_under = "39.99rem";
webui.bp_2_over = "40rem";
webui.bp_3_under = "49.99rem";
webui.bp_3_over = "50rem";
webui.bp_4_under = "69.99rem";
webui.bp_4_over = "70rem";
webui.bp_5_under = "89.99rem";
webui.bp_5_over = "90rem";

Build Required

In order for any changes to take effect WebUI must be built using the build tools provided. For more information on editing source files and building the project, see the WebUI Build section.