When I made the transition from agency-life to product development, my eyes were opened to the concept of truly modular components. Working under WordPress as our frontend platform; with the concept of "widgets" - it comes with "certain uncertainty" that any type of content can be placed... well anywhere. That perfectly responsive card-grid you intended to be used on a full-width homepage widget position? Well, it was just placed in a sidebar.

What would you have to do as a work-around? Well, two options come to mind:

1. Add a modifier class to the component itself based on its position.
2. Override any/all components that could exist in different widths and rewrite all media queries to match each scenario as needed.

Neither of which are ideal. Hey, it's not all our fault. Media queries have been around for quite a while and we've done a damn good job of extending them to the best of our ability. But, like everything else in life, it's just not good enough and we want more. Enter element queries.

Element queries is the concept of being able to interact with individual components, not based on window size, but the size of the component itself.

This isn't anything new; Smashing Magazine laid it out pretty thick - and I whole heartedly agree with them. The concept of creating "polyfills" for this type of functionality isn't new either; there's plenty of libraries that approach this same problem. So, when fellow developer Craig Anthony and I both came across a need to use element queries, we quickly found all of the existing libraries to be too intrusive on either our DOM and/or styles. We wanted a simple manipulation library that could be molded into our existing structure and could prove to be performant enough to deal with dozens... hell hundreds of listener elements if we required it. At the end of the day, we wrote our own and we called it BoomQueries.

Some benefits of our library are:

1. Vanilla JS
2. Made for modern browsers (IE9+) to keep dependencies small
3. NO DOM changes to get setup
4. Debounce method used on resize for more controlled intervals
5. Control over sizing classes added for more granular control

Registering, removing and refreshing components is incredibly simple thanks to a dead-simple API that still has tons of room for flexibility based on your project's setup.

It's as simple as passing your component into a new BoomQueries instance:

Huge props to Mark Funk and Jason Benesch for helping clean everything up and getting it ready for the masses.