Responsive Triggers

One of the headline features of Genero 4.00 was the concept of Responsive Layout, the ability for forms to react to the size of the front-end.  One of the key components of this was the @screen-size specifier where syntax such as FLIPPED, HIDDEN, ORIENTATION, STRETCH could have a specifier @SMALL, @MEDIUM, @LARGE appended to the syntax to indicate a change when used in screens of different sizes.

For example, an HBOX could have ORIENTATION@SMALL=VERTICAL to turn into a VBOX on small devices.

The first question was what size does @SMALL, @MEDIUM, @LARGE relate to.  Our default sizes are small <= 576px < medium <= 768px < large.  Ostensibly that was for  small = phone, medium = tablet, large = desktop.

If you look at other technologies, you might note that they have more breakpoints and break at different positions, for instance Bootstrap  has x-small <= 576 px < small <= 768px < medium <=  992px < large <= 1200px ….

Fortunately you can change the values used to define responsiveness via GBC Customization.  You can change the Theme Variables, $gbc-responsive-small-width, and $gbc-responsive-medium-width and override our trigger points with your own.  You could for example, increase them so instead of small = phone, medium = tablet, large = desktop, you have $gbc-responsive-small-width = 768px, and $gbc-responsive-medium-width = 1200 px , this would give you an effective implementation of small = tablet portait, medium = tablet landscape, large = desktop.

With our current implementation, you are limited to the two trigger points.  The time for requesting more was during the 4.00 Early Access Program, if you do find yourself needing more than two trigger points, make sure you put in a feature request via your Customer Care contact so that the demand is appropriately captured.