User Story

As an app dev, I want to implement my responsive design policy upon a certain screen size without specifying pixel range in each composer/viewmodel.

Acceptance Criteria

Details

• inspired by https://blog.angular-university.io/angular-responsive-design/

Key concept

• Breakpoint Definition: dev can define breakpoints zk.xml (optional) for various sizes including xsmall, small, medium, large, xlarge, Handset, HandsetLandscape, HandsetPortrait, Tablet, TabletPortrait, TabletLandscape. if no specified, default breakpoints ranges are applied.
• Responsive Breakpoint Listener: zk automatically registers a ResponsiveBreakpointListener(ResponsiveBreakpointObserver) in application-scope which reiceves ClienInfoEvent and sends events to a corresponding desktop to notify the width of a device
• Responsive Design Implementation: app dev registers a listener for a specific width and implements his responsive design logic e.g. hide a component or remove a component

Benefits and comparison

1. comparing to the existing @MatchMedia, app dev can implement responsive design upon a higher level size (small, medium, large) instead of specifying pixel range
2. app devs have to copy-paste pixel ranges specified in @MatchMedia to each controller

Integration Option

ZK doesn't have its own CSS grid system, and we encourage users to use Bootstrap CSS Grid. It's better, zk uses the same default breakpoints setting as Boostrap.