Breakpoint classes on <body>

How to use it

1. In Bricks > Kiln, turn on Site: breakpoint classes on the body.

2. Style against the class of the breakpoint you want. Kiln adds these to <body>:

   • kiln-bp-{key}: the active breakpoint, and only that one. For example kiln-bp-mobile_portrait.
   • kiln-bp-in-{key}: every breakpoint whose styles apply right now, following Bricks' own cascade. That is the base breakpoint plus each breakpoint whose media query currently matches. To style "tablet portrait and smaller", target .kiln-bp-in-tablet_portrait.
   • data-kiln-bp="{key}": the active breakpoint as an attribute.

3. To react in JavaScript, listen for the kiln:breakpoint event on document:

   document.addEventListener( 'kiln:breakpoint', function ( e ) {
    console.log( e.detail.previous, '->', e.detail.key );
   } );
   

{key} is the key Bricks gives the breakpoint, such as tablet_portrait. Custom breakpoints get classes too. Paused breakpoints are skipped.

How it works with your breakpoint setup

Kiln builds its media queries the way Bricks does. A breakpoint wider than the base uses min-width. A narrower one uses max-width. Desktop-first sites, mobile-first sites and a base in the middle (a desktop base plus a custom wider breakpoint) all match the CSS Bricks prints for the site.

The active breakpoint is the matching one farthest from the base.

Limits

• The classes are set by JavaScript, so the HTML sent by the server has none of them. A small inline script at the top of <body> sets them before the content paints.
• The kiln:breakpoint event fires when the breakpoint changes. It does not fire for the first one on page load.
• The script carries opt-out attributes for the "delay JavaScript" features of WP Rocket, LiteSpeed, Perfmatters and Cloudflare Rocket Loader, so they should leave it alone.

Settings

None. The module is off by default, because it prints a script on every page.

Requirements

Bricks 2.4 or newer.