Implement layout grid system
Description
Currently blocks determine their own layout. Some blocks center their content, whereas others take use the full width or align their content to the left. It may be desirable to change this behavior in an app. We can support this using a grid system.
To accomplish this, a page grid will be created. The grid will have number of columns depends on the window width.
A block will support a new property width
. This property will determine how many columns the block
will occupy on the grid row.
By default, a block will occupy the full width.
pages:
- name: Article
blocks:
- type: markdown
width: 6
parameters: { content: lorem }
- type: markdown
width: 6
parameters: { content: ipsum }
- type: markdown
width: 4
parameters: { content: dolor }
- type: markdown
width: 4
parameters: { content: sit }
- type: markdown
width: 4
parameters: { content: amet }
- type: markdown
parameters: { content: consectetur }
On a wide screen (12 columns), this will look as follows:
┌───────────┬───────────┐
│ lorem │ ipsum │
├───────┬───┴───┬───────┤
│ dolor │ sit │ amet │
├───────┴───────┴───────┤
│ consectetur │
└───────────────────────┘
On a medium width screen (8 columns), this will look as follows:
┌───────────────┐
│ lorem │
├───────────────┤
│ ipsum │
├───────┬───────┤
│ dolor │ sit │
├───────┴───────┤
│ amet │
├───────────────┤
│ consectetur │
└───────────────┘
On a small screen (4 columns), this will look as follows:
┌─────────────┐
│ lorem │
├─────────────┤
│ ipsum │
├─────────────┤
│ dolor │
├─────────────┤
│ sit │
├─────────────┤
│ amet │
├─────────────┤
│ consectetur │
└─────────────┘
If no width is defined, the block will always use the full width.
We may need more settings to tweak the exact behavior of such a layout grid.
Backwards compatibility
Because the default is to make a block full width, this is backwards compatible.