Simple extension to bind CSS Media query in Java, help to build responsive UI
Feature 1
Add CustomMediaQuery in your view with a action and a Media query. When the result of the CSS media query result changed, call the action. This helps to build responsive UI from the Java side. For example, you can show a component only if the width of the view is less than 800px.
Use Case
Display or hide a column for a Vaadin Grid if screen size < 1000px
Feature 2
Use ClientMediaQuery to update your styles from Java.
Feature 3
ElementMediaQuery is similar to CustomMediaQuery but you can apply the Media Query to an element. For example, you can show a component only if the width of the component is less than 800px. It's based on ResizeObserver so not working in Internet Explorer 11. https://caniuse.com/#feat=resizeobserver It's heavier than CustomMediaQuery since it emulates the native media query to an element in Javascript.
You can find an example in github.
Install
Fix a javascript error when the element is not defined https://github.com/jcgueriaud1/custom-media-query/issues/9