This PR adds grid layouts. Currently these apply to cards and area.
A layout part (such as area/card) layout now takes the "grid" value, and have new properties grid-size-columns and grid-size-rows (default 3x5). You can set layout to grid in the editor or in the context menu like so:
Note: i have updated the context menu to better display and respond to various layout options, so play around and let me know...
A layout sub-part, ie something contained in an area/card, have grid-column and grid-row properties. These allow the element to set itself in a specific row or column. If these are not set then the default is to put the part in the first available grid cell (this is what the DOM/css default is as well and I think makes sense here).
For example, here the buttons are set in cells 1,1 and 5,3 respectively on a 5,3 col,row grid.
Main Points
This PR adds grid layouts. Currently these apply to cards and area.
A layout part (such as area/card) layout now takes the "grid" value, and have new properties
grid-size-columnsandgrid-size-rows(default 3x5). You can set layout to grid in the editor or in the context menu like so:Note: i have updated the context menu to better display and respond to various layout options, so play around and let me know...
A layout sub-part, ie something contained in an area/card, have
grid-columnandgrid-rowproperties. These allow the element to set itself in a specific row or column. If these are not set then the default is to put the part in the first available grid cell (this is what the DOM/css default is as well and I think makes sense here).For example, here the buttons are set in cells 1,1 and 5,3 respectively on a 5,3 col,row grid.
Tests
Basic styler related tests have been added
ISSUES
We want something similar to the dev tools grid layout hinter, like so
as well as snapping to grid-cells, as described in #147 issue.
There is a bug #150 related to initial load for Card and cssStyle/properties.