Problem/Motivation
Currently GridStack only supports magazine layouts. They are commonly identified by responsive widths, fixed heights, js-and-css-driven layouts.
With the newly exposed layouts, GridStack has potential to be a dynamic static-layout builder. Some css-driven layouts.
This change shall make GridStack a generic layout builder for both needs.
These css-driven layouts may require core Layout Discovery, Field Layout, DS, Panelizer, Widget modules to function. And a theme, or module (e.g.: Bootstrap library), which load the relevant CSS grid library.
As a layout builder, GridStack doesn't require/ depend on any.
Benefits
- A "
design layout on the browser" approach useful to better suit custom design needs.
- Two template files for practically unlimited layout variants.
- There will be time when you are tired of modifying and hard-coding template files again and again for different site needs. This will be part of an answer.
- Consider this as a dynamic alternative for Radix/ Bootstrap layouts.
- No GridStack JS/ CSS assets are loaded at front-end.
- Exportables.
Limitation/ known issues
- Must have a theme, or module, that loads Bootstrap/ Foundation CSS for you.
- The
pull and push classes may not be supported, yet.
- The preview uses dynamic JS with fixed heights, while the front-end output static with dynamic/ auto heights. Bear with it.
- This requires basic comprehension on how a static grid like Bootstrap, or Foundation, works. Basically on how columns and rows build up the grid system. Failing to understand it may result in broken grids (this is no issue if using GridStack JS alone). But the benefits outweigh technical limitation.
- No fixed height, just auto height which is the nature of floating layouts.
- Boxes are floating like normal CSS floats, no longer absolutely positioned. The preview may trick you, bear with it.
- This layout is only available for core Field Layout, DS, Panelizer, or Widget modules. Useless for GridStack alone.
Proposed resolution
- Add a global option to choose either: Bootstrap or Foundation, as the working CSS grid system.
- Add ability to activate/ toggle the css-driven layouts per optionset.
Remaining tasks
Implement #2856034: Make a generic layout builder or optional layout_plugin integration.
Provide a hook_update() to accommodate the new schema. This will be a separate child issue.
Provide new defaults for Bootstrap and Foundation as they require some media queries to match the CSS, at least matching their defaults. Foundation uses "em", and may be converted to 16px-based pixels for the start. This will be a separate child issue.
User interface changes
- Add a new toggle option "Use static Bootstrap/Foundation framework".
API changes
None.
Data model changes
- This change may require updating the schema for "nested" elements which were previously a sequence, and converted into string to reduce complexity, or bulky array. A new
hook_update() will be provided on a separate issue.
Comments
Comment #2
gausarts commentedComment #3
gausarts commentedComment #4
gausarts commentedAttached to begin with.
Also renamed "
.gridstack" class into ".gridstack--js" to avoid conflict when both JS and CSS layouts are present on the same page.Comment #6
gausarts commentedCommitted for wider feedback. Thanks.
Comment #7
gausarts commented