But what if we don’t want that behaviour on a small screen, perhaps because it takes too much space? Sure, we can change our CSS class to say that the menu only becomes sticky if the viewport is wider than a certain amount:
So, adding the class
Cool, that works! But there goes the beauty of storing the breakpoints once — we’re referencing
768 again, not DRY anymore!
Enter include-media plugins
I’ve been working a lot with Hugo Giraudel on include-media lately, and while we were determined to keep the library simple and lightweight, we felt that it could be extended to include more interesting features. The solution for that was to keep the core at its simplest and distribute individual pieces of functionality as plugins.
This plugin consists of a bit of Sass that automatically exports your breakpoints to a hidden element in the DOM (by default,
We can then rewrite the function above like so:
Controlling the update process
However, this might become expensive when polling too many times — the code above is a good example for that, because we’re querying the library every time the resize event fires, which is not a good idea even if we debounce the function.
The library allows the developer to handle the updating, by calling
im.setUpdateMode('manual') to cache the JSON string and
im.update() to update it. ∎