Dynamic Breakpoints
Frameworks like Bootstrap provide responsive breakpoints in reasonable places to cover just about every device out there. Blocs UI for breakpoints is superb. It's one of the strongest features of the software. But sometimes using a media query can be a valid or even the best solution to a build. Professionals use media queries to solve complex layout issues and push the UX standards forward through techniques like responsive design and progressive enhancement. And oh yeah, it also let's you do things in bulk –make sweeping responsive design changes across a page or site. Media Query is the perfect companion to what Blocs/Bootstrap provides.
Dynamic Breakpoints (Formerly Media Query for Blocs) is sneaky powerful. It doesn't just define the media queries, it both adds and removes your custom defined classes from any target element as well.
With Dynamic Breakpoints you can add additional breakpoints where you need them, stack as many queries as you need!
Bric Settings in the Blocs Sidebar
You assign a custom CLASS and a TARGET element. The class will be added and removed from the element as the query is in and out of range respectively.
Use the Class Manager to create this new class and style it anyway you like, including completely hiding the element. As your style gets both added and removed based on the query, you get powerful control and another responsive design aid in your toolbox.
Key Features
That said, there are 3 different methods of detection for your queries.
Detection Methods:
Parent container’s width
Device or viewport orientation
Image treatments at different breakpoints.
Device Notice: (optional)
Elegant little device notice that tells your visitors when the content is best viewed expanding browser or rotating device. The overlay and text can be completely customized and this notice fades away after a few seconds.
Inverse behavior
By default the class is added to the target element when the media query is within range. It’s removed when the query is out of range. The inverse checkbox will switch the behavior. Now the class you provide will be remove from the target element when the media query is within range. It’s added to the target when the query becomes out of range.
Some uses include
Showing/hiding content for specific breakpoints and custom ones.
Styling fonts for specific breakpoints.
Making project-wide tailorings based on break points.
Notify users when content is best viewed by rotating their device or expanding viewport/browser.
Do things in bulk. Make sweeping responsive design changes across a page or site.
We've updated our website. visit us at:
Dynamic Breakpoints : https://blochead.dev/media-query
Dynamic Breakpoints Demo : https://blochead.dev/media-query-demo
Visit this topic on the Blocs community forum
Follow me for product release news, updates and tutorials.
Twitter: @blochead_dev