One of our major goals is to make layouts generated by this tool work without Javascript, so the layouts for different breakpoints (steps) will use the same markup and they'd only react to media query changes from the CSS. That means if you want to build any of the following layouts for different breakpoints, it should be possible:

---A ---B ---C    F
-------------D    |
-------------E    |

F  ---A ---B ---C 
|  -------------D
|  -------------E 

---A ---B ---C 
-------------D
-------------E 
-------------F

But these layouts would not be possible with the same markup (in different breakpoints if any of the above layouts were in another breakpoint):

---A ---B ---C 
-------------D
-----E ------F

---A ---B ---C 
---D ---E ---F

These would require different wrappers I believe and might therefore not be possible.

Comments

mustanggb’s picture

mustanggb commented

You could do something nasty like rendering the same region multiple times in different wrappers then show/hide the relevant one on media queries.
But I would tend to suggest just listing this as a known limitation, perhaps with some diagrams showing the wrappers to better explain the problem.

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented

Yeah, we don't want to render the same thing multiple times in the markup, especially that one of our focus points is to support mobile better (where bandwidth is an issue).

big_smile’s picture

big_smile commented
Version: » 7.x-1.x-dev

Being able to show content in different places is vital to creating rich web experiences, as there are lots of cases where content that works well in one place for mobile would work better in another place for desktop. Without out this functionality, you can only create 'compromised' designs.

I think it would be better to put a checkbox on each region. When the check box is unchecked a "display:none" is applied to that region for that device.
That way, the designer can choose:
To have better performance, the designer will have to avoid using hidden regions
To have a better looking layout, the designer can use hidden regions at the cost of performance.

mustanggb’s picture

mustanggb commented

I think a better way to do that would be when you delete a region ask "Delete this region for [All breakpoints] [This breakpoint only]". Which IIRC was the original plan and may have already been implemented.

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented

@akamustang is right, that is the plan, not yet implemented unfortunately.

lee20’s picture

lee20 commented

Thought that i would point out that this post is somewhat misleading..

That means if you want to build any of the following layouts for different breakpoints, it should be possible

---A ---B ---C    F
-------------D    |
-------------E    |

F  ---A ---B ---C 
|  -------------D
|  -------------E

It doesn't seem possible to produce these layouts without grouping regions, and as far as I can tell, it is not yet possible to group regions.

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented

That is indeed true. We did not reach implementing grouping, but even if we would, the rest of the limitations would stand due to the shared markup nature of the breakpoint styles.

Mario Baron’s picture

Mario Baron commented

Any progress on nesting/grouping regions and deleting regions only for specific breakpoint?
I plan to use layout module for an upcoming project but without nested regions feature it won't be suitable... Have some time before project is due so happy to start with layout now if there is a timeframe when this feature may be released...
Anyone?

gábor hojtsy’s picture

gábor hojtsy
he/him
Primary language Hungarian
Location Hungary
commented

Sorry, we are not actively working on this project. Contributions however are welcome :)