Only default two thirds/one-third layout when footer has two sections

[NickColley]

This approach is from: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/

Changes the default layout of two-thirds/one-third only when there's two sections.

The first section can only be also the the 2nd last section (counted backwards) if there's two overall sections.

Screenshots

Before

After

Improves #1539

[ChrisBAshton]

Not heard of the nth-last-child selector before! 😄 left an inline question.

[ChrisBAshton]

Suggested change

	// If the there are only two sections and set the layout to be two-third:one-third on desktop
	// If there are only two sections, set the layout to be two-third:one-third on desktop

[NickColley]

This reads loads better thanks Chris

[ChrisBAshton]

Thanks, this is much better!

[36degrees]

I think there's still a couple of places where this isn't doing what we want – I think we're hardcoding some logic to try and meet a couple of specific examples (the GOV.UK Footer, three columns and one column) but there's a couple of other scenarios that are breaking the grid too.

For example, if you put the 2-column section on the right, it does not fit with the grid (you end up with a ⅖ column and a ⅗ column:

If you have two columns, it should either go to two ½ columns, or two ⅓ columns and a third blank ⅓ column, but at the minute we get two uneven columns:

If we have only one column it kind of works as-is as it fills the entire footer, though I question whether there might be cases where a user might want to restrict it to a ⅓ column:

[36degrees]

I've currently these as examples on top of this branch – would it be useful for me to commit them and push them as something to work from?

[NickColley]

@36degrees yes please, we may be able to make use of the column modifier classes that already exist to tighten this up even more.

[NickColley]

Actually I've changed my mind I think those examples look how I'd expect, given the context of a fall page where most layouts are two thirds / one thirds it feels balanced. Having an empty slot feels worse
?

I think to do what you're proposing it'd require extra flags and functionality (perhaps a breaking change), so I think it's worth shipping this work as is.

[36degrees]

Neither of the examples align with the grid – the first example is more like a ⅖ column and a ⅗ column, and the second example is two uneven columns.

[NickColley]

I think I know what you're saying, I wonder if it's always been a bit off...

[NickColley]

I've pushed up a change that uses CSS Grid instead of Flexbox.

This would mean IE11 would use the fallback layout (simple inline block that does not align with the grid).

Would also be a breaking change since I've moved the modifier...

What do you think?

• https://caniuse.com/#feat=flexbox
• https://caniuse.com/#feat=css-grid

[NickColley]

I think we can make a small breaking change to sort this properly, so have pushed the main issues around the grid alignment back into the main issue for the next milestone: #1539 (comment)

I will reduce this pull request back to the original intent, so we can ship a small improvement to three column layouts only.