Hi @BlackChrome,
I suspect many feel your frustration on getting the layouts to coordinate properly. But I’ve found Layout Blocks to be indispensable. It took some patience and testing but now I prefer them for their convenience and ease. Through Trial-and-Error (thus, maybe erroneous) I came up with four tips and developed a series of associated steps for my own work.
(FYI: I’ve not watched the video on Layout Blocks yet because it came well after I began using them. It may include more accurate/better tips.)
Tip 1: Layout Blocks (LoB) have a hierarchy that can be seen in the Layers. A new LoB enters as top layer and pushes existing LoBs down. The hierarchy is relative to the TOP edge (I believe), meaning LoBs can overlap without automatic repositioning as long as the top remains below a higher level LoB.
Tip 2: Dragging to resize and reposition moves lower Layout Blocks. However, entering numbers in the Inspector minimises impact on other blocks. That means, a LoB’s position and height can be adjusted without moving those lower in the page, within some limits (see Tip 1).
Tip 3: Having ‘perfected’ a page, ASSUME the blocks could reposition. Prepare for it by recording LoB’s locations/heights. If needed, repositioning happens quickly by entering numbers in the Inspector (see Tip 2).
Tip 4: LoBs are mostly independent across Custom sizes UNTIL you exceed a limit.
–I’m still learning some of the exact limits but they include
a) changing hierarchical order (planned or not),
b) adding/altering a multi-paged element (Footer sizes or “move with bottom” are my usual culprits),
c) dragging to change the size, and
d) probably a few more.
With these tips, I adopted a stepwise strategy that lessens and usually (mostly) eliminates the frustrations around layouts and break points. It’s become an “Aw, man” and no longer an “Oh! Sh**!!” ![]()
- Create a page of whichever size (usually the one most users will encounter)
a) Note relative sizes and positions of key elements
–Easiest to open Preview on the target device and/or adjust width of Safari to the target size.
b) Note the Layout Block’s pixel locations and heights
–This is KEY when using Layout Blocks especially because they occasionally move. - Convert the page to the other Custom sizes
- For each Custom, position elements, adjust fonts, alter sizes, etc.
a) Repeat 1.b) for each - Return to the template page; use the notes to reposition LoBs (if needed)
- Duplicate the page. All Custom sizes are created too.
a) Now, when you change an element in one Custom, it is correctly altered on the others
b) HOWEVER, changing an LoB position or size does NOT change it on the other Customs (unless you hit a limit) and may need to adjust LoBs on each Custom (see Tip 4). - Confirm the positions of LoBs on all Customs whenever an LoB is altered.
And I saw in the latest update that popups can now be embedded within Layout Blocks (or something like that). I think Blocks will become even more powerful. (But I need to figure out what exactly this means.
)
Keep at it. Sparkle’s development has been fabulous and with added features regularly. Duncan et al. are highly responsive to suggestions with clear rationale for why “yea/nay.”
Hope the building continues well.