Layout & Offset
- jcrowther
Description
All widgets within the DSL, excluding the LayoutBreak widget, support layout & offset options. The layout specification adopted by the DSL is largely based on the Bootstrap grid and allows for the creation of more interesting UI layouts as opposed to each widget being positioned underneath one another. Furthermore the layout can be adjusted according to predefined screen sizes or breakpoints, allowing control of layouts for any device.
Breakpoints
Extra small | xs | Small to large phone | < 600px |
Small | sm | Small to medium tablet | 600px > < 960px |
Medium | md | Large tablet to laptop | 960px > < 1280px |
Large | lg | Laptop to desktop | 1280px > < 1920px |
Extra large | xl | 1080p to 1440p desktop | 1920px > < 2560px |
Extra extra large | xxl | 4k and ultra-wide | > 2560px |
Understanding the grid layout
When deciding on implementing a grid layout for your applications it is important to consider how the grid is setup. All widgets within the DSL are rendered within a containing row which essentially leads each widget to be wrapped in a column. Following the Bootstrap grid, which is based on having a maximum of 12 columns within a row, each widget can therefore be seen as 1 column.
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
Limitations
Having all widgets housed under one containing row comes with limitations in how you can structure you layouts.
Any one widget can only take up a maximum of 12 columns.
If we have two widgets (A & B) where A is assigned 6 columns and B is assigned 7, this would result in widget B dropping below widget A.
Grouping of content is not possible (yet)
Default behaviour
By default all widgets are assigned a column value of 12, meaning they will take up the full width of the containing row and result in a stacked layout on all screen sizes.
Certain widgets such as the DataInput & DataOutput widgets have been limited to 50% on screen sizes larger than XL if no layout options are specified. This will however be overridden if any layout options are specified.
Implementing a grid layout
Implementing a grid layout is done by applying layout options to a particular widget. You are free to specify all options or any particular option of your choice.
The layout options are:
cols-xs="12"cols-sm="12"cols-md="12"cols-lg="12"cols-xl="12"cols-xxl="12"
It should be noted that cols-xs is the default option for layouts and will traverse up unless another option is specified. This also applies to options above a particular option, eg: If we set cols-md="6", when the screen size is larger than 960px the widget will take up 50% of the container.
The below example illustrates two TextInput widgets with layout options applied for two screen sizes. On mobile each widget is assigned 12 columns, making each widget full width. When on a large tablet or above, each widget is assigned 6 columns, placing the two inputs next to each other.
<textfield label="textfield.first_name" tooltip="textfield.first_name" cols-xs="12" cols-md="6">
<visible function="mustShowForm"/>
<binding variable="farmer">
<attribute name="firstName"/>
</binding>
</textfield>
<textfield label="textfield.last_name" tooltip="textfield.last_name" cols-xs="12" cols-md="6">
<visible function="mustShowForm"/>
<binding variable="farmer">
<attribute name="lastName"/>
</binding>
</textfield>
Implementing offsets
Offsets work in the same fashion as assigning columns to widgets. Offsets are useful if you would like to offset the starting position of a widget - positioning it in centre of the screen for example.
The offset options are:
offset-xs="4"offset-sm="4"offset-md="4"offset-lg="4"offset-xl="4"offset-xxl="4"
The below example illustrates a text field which is offset on tablet but not on mobile
<textfield label="textfield.first_name" tooltip="textfield.first_name" cols-xs="12" offset-xs="0" cols-md="6" offset-md="3">
<visible function="mustShowForm"/>
<binding variable="farmer">
<attribute name="firstName"/>
</binding>
</textfield>Layout Break
The layout break is useful for creating sections within a page. This widget takes one attribute of render which can either be set to line or dash
<break render="line"/>It is also possible to omit the render attribute altogether which will simply result in a break without rendering a line or dash. Visibility bindings are also supported.