Module layouts

[Wilto]

So, we need a single-breakpoint module dealie that breaks in especially visible ways when dropped into an inappropriate context. Once we have these layouts sorted, I’ll replace the Layout A/B placeholders in the layout wireframes with these (see #1). I’m working on a couple of things for this, but if anyone wants to take a stab at it here’s the template:

[Wilto]

I’m working on this now, but it’s pretty much just text—it won’t look ideal when shown at the wrong size, but all this text will reflow more or less okay.

What we really need is something that’s like “whoop, woah, that is busted” when Layout B is applied at Layout A sizes, and looks awkwardly spaced-out when Layout A is applied at Layout B sizes.

[BPScott]

I think the easiest way to create woah, busted is to create another module-like thing within the current module to create a new eq context.

A potential way of doing this is placing an overlay above the image in your module whose size / content changes based on the size of the image. An example of this in the wild is the play icon / "days to watch" overlay on the bbc.co.uk/programmes' programme object.

An alternative is to display a number of modules in a list that is vertical at small sizes, but at larger sizes becomes a grid - in this case the column count is dependant upon viewport size, but the module depends on the width of the grid column.