Layout
Groups, rows and the twelve-column grid.
Groups, rows and the twelve-column grid
Structure here is not a checkbox on a field, it is an element of its own. That has consequences for where something may sit and how wide it becomes.
Three kinds, 33 types
Only the third kind takes anything at all.
your-shop.example/admin
FormsCancelSave
FormStructureElement
Form element
GeneralOptionsConditions
A single-line input for short text. Character limits and an optional default value can be maintained under "Options".
Company
Single-line text (text)
StructureGroupRow
Input fieldsSingle-line text (text)Multi-line text (textarea)Dropdown menu (select)Checkbox (checkbox)Date (date)
Company
1/2
Required field
CancelSave
Structure 2
Group and row. In the storefront a group becomes a fieldset with its own heading, a row divides up the width.
Content 8
Heading, vertical line, line break, free text and four message kinds. They output, they do not ask.
Input 23
The field types. Only these are validated and stored, and only these turn up in the submission.
Three rules for nesting
The editor keeps to them, and the server checks them again on save.
your-shop.example/admin
FormsCancelSave
FormStructureElement
Elements
#NameTypeWidth
Create top-level element
- 01A group sits at the top
Groups exist only at the top level. A group inside a group is not provided for.
- 02A row sits at the top or in a group
A row inside a row does not exist. That keeps the depth at three levels.
- 03Everything else may go anywhere
Inputs and content sit at the top, in a group or in a row.
The check does not only live in the editor. On save the server tidies up the parent relationships by the same rules. So a tree set by hand or through the API cannot end up in a state the output cannot render.
Six widths, and they only apply inside a row
The width is a setting on the element, not a column of its own.
1 2 3 4 5 6 7 8 9 10 11 12
Planned quantity 4
Urgency 4
Preferred date 4
Salutation 3
First name 3
Email address 6
Above, the project row from the demo form, three times 4. Below, a mixed row: 3, 3 and 6 add up to 12 again.
Twelve is the full width, and every other number is its share of it. Three fields at 4 each stand side by side, two at 6 each likewise.
If an element is not inside a row, the full width always applies. For groups and rows themselves it always applies too, which is why the outline shows a dash there instead of a fraction.
On narrow screens the storefront wraps the row. Three thirds then become three full widths below one another.
- full width
- three quarters
- two thirds
- a half
- a third
- a quarter
Going deeper
Fields
All 23 field types and what they do.
Validation
Mandatory fields, limits, CAPTCHA.
Conditions
Twelve operators and the OR rule.