This module exposes theme-related breakpoints as directly usable Javascript variables.
Usage
When developing client-side Javascript applications,
you might need to know about the breakpoints your currently used theme defines.
Themes can define breakpoints this way,
but they're not exposed automatically for client-side behaviors.
This module helps frontend developers by exposing the breakpoints
as Javascript variables, being directly accessible via
window.themeBreakpoints
.
The function themeBreakpoints.getCurrentBreakpoint()
tells you the currently matching breakpoint for the given client.
A new event themeBreakpoint:changed
is being provided, which fires
when the matching breakpoint of the client has changed. With this event, you're
able to implement responsive Javascript behaviors via event listeners.
Example event listener:
window.addEventListener('themeBreakpoint:changed', function (event) {
alert('The current breakpoint has been changed to ' + event.detail.name);
});
Backend developers can use the theme_breakpoints_js
service for conveniently receiving breakpoints defined by themes.
It already takes care about defined breakpoints by base themes and also
loads them in case a theme doesn't define breakpoints by itself.
Installation
- This module obviously depends on Drupal core's breakpoint module.
- Install this module as usual.
- No configuration required. Once enabled, the currently used theme's breakpoints are available as JS variables.
Project information
- Module categories: Developer Tools
- 201 sites report using this module
- Created by mxh on , updated
- Drupal 10 is here!
This module works with D10.
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.
Releases
Development version: 8.x-1.x-dev updated 16 Apr 2022 at 11:56 UTC