Responsive Group Settings
Below are some suggested settings for creating responsive groups, feel free to adapt them to your current purpose and content.
As a starting point for most groups, try using the layout settings described below:
Min width
0
Max width
inf
Fit width to content
No
These three width settings allow for the greatest responsive flexibility
Min Height
24
This allows for 16px text to fit inside it comfortable
Max height
inf
Fit height to content
yes
This keeps groups tight and usually doesn't affect responsiveness
GP {Page} Container padding
4 x 20px (desktop), 4 x 16px (tablet), 4 x 8px (Mobile)
Top and side paddings may differ depending on Navbars and related margins.
GP Padding
4 x 16/12px (desktop), 4 x 12/8px (tablet), 4 x 8/4px (Mobile)
Aim to primarily use 16, 12 and 8, but where necessary use 12, 8, 4... or whatever is appropriate, just try to be consistent.
Intra gap spacing (grouped elements)
8px (desktop),
6px (tablet),
4px (Mobile)
Intra gap spacing (Titles and descriptions
4/6px (desktop),
4px (tablet),
4/2px (Mobile)
Inter gap spacing (between groups of elements)
16px (desktop),
12px (tablet),
8px (Mobile)
GP {Page} Container gap spacing
32px (desktop),
24px (tablet),
16/20px (Mobile)
Inter Section gap spacing is managed on the parent group's gap spacing rather than with individual top and bottom margins which makes it much easier to adjust. Any variance should be created with individual groups' margins.
To create responsive elements and pages you can combine these layout settings suggestions with conditional expressions as described below (note: pick and choose what's appropriate for your app, or make your own):
When Current page width ≤ 576
GP {Pg} Container
Left & Right (or all) padding = 4px
When Current page width ≤ 776
GP {Pg} Container
Left & Right (or all) padding = 8px
When Current page width ≤ 992
GP {Pg} Container
Left & Right (or all) padding = 16px
When Current page width ≥ 1200
GP {Pg} Container
Max width = 1200px
When Current page width ≥ 1400
GP {Pg} Container
Max width = 1200px
When Current page width ≤ 576
GP
Left & Right (or all) padding = 4px
When Current page width ≤ 776
GP
Left & Right (or all) padding = 8px
When Current page width ≤ 992
GP
Left & Right (or all) padding = 16px
When Current page width ≤ 576
BTN
Max width = 100%
When Current page width ≤ 776
BTN
Max width = 100%
Last updated