You can make the same app respond to various screen sizes and adapt it's looks and behaviour. This is done by adding standard CSS Breakpoints.
At the screen shot above:
I M P O R T A N T !!! - THE DEFAULT SETTING IS FROM ZERO px to INFINITY px. So if you do not add any Breakpoints, it will be the same stretched/compressed app for all screen sizes. So for example Adding just one Breakpoint, say "M" will make all screens LESS then M's 1440 be the same, so XS, S & M will have the same appearance. For everything over 1440 it will also be the same. |
---|
You can study how the screen responsiveness works you can pull in samples layout called Dashboard (marked Green ↓) from the left menu (marked Purple ↓) and click between screen sizes to see its changing.
The platform uses a standard 12 column grid for all rows. This setting only belongs to a Cell inside of the Flex Row component, as it the container for any other set of components.
Cell is either a Column or a Row within a Flex Row, depending on which span direction is in settings tab for the Flex Row (Row or Column) So to access it open a Flex Row and click a Column (marked orange ↓) and at the Properties tab (marked purple ↓) you will see the Adaptive Width section ( marked green ↓).
This allows placing needed elements of your application into a needed position on each particular screen size. Or hide Columns/Rows of Flex Row, as in the example above, 0 (zero) means it will have NO width available for this very Column. If we had, say 4, it would mean that Column takes 4/12 or = to 1/3 of the total width available to it. Setting 8 would mean 8/12th or 2/3 of the width and so on.
Width is by default cut out of the right side, so the cell will hang to left. This setting can be changed at the Flew Row itself in Settings tab > Blocks align. "Start" is the default one.
|
---|
You can select a Breakpoint and set how many grid cells will be used in it. You can add and delete certain Breakpoints for this very Row - Column.
.
Each of the Components has ability to set looks and design for each type of the screen, to better match UX/UI requirements.
At the View tab (marked green ↓) open CSS Scope block (marked red ↓). You can Add new break points by pressing the menu dots (marked blue ↓), also edit and delete Breakpoints.
Everything you set for a certain Breakpoint on the View tab (Fonts, sizes, colors, margins, etc etc) will ONLY be applied from that screen size and up to the next Breakpoint you set.
You can also set elements invisible for certain Breakpoints. Allowing you to:
You just need to set one Component invisible and the other visible, for each Breakpoint:
Related articles appear here based on the labels you select. Click to edit the macro and add or change labels.
|