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

NickColley · 2019-08-28T16:36:43Z

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 · 2019-08-29T07:40:17Z

src/govuk/components/footer/_footer.scss

@@ -196,9 +196,9 @@
    }
  }

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


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

This reads loads better thanks Chris

ChrisBAshton · 2019-08-29T09:30:05Z

src/govuk/components/footer/_footer.scss

  @include mq ($from: desktop) {
-    .govuk-footer__section:first-child {
+    .govuk-footer__section:first-child:nth-last-child(2) {


Thanks, this is much better!

This approach is from: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ If you have two sections, then the first section can only be also the the 2nd section (counted backwards) if there's two overall sections.

36degrees · 2019-08-29T14:07:27Z

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 · 2019-08-29T14:09:28Z

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 · 2019-08-29T14:13:07Z

@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 · 2019-08-29T14:21:24Z

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 · 2019-08-29T14:24:41Z

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 · 2019-08-29T15:10:05Z

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

NickColley · 2019-08-30T11:57:24Z

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?

NickColley · 2019-09-02T12:06:18Z

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.

We want the columns in our footers and our grids to align, however currently they do not in several scenarios. This commit adds an example with several combinations of grid and footer layouts to act as a quick visual reference for whether the alignment is correct or not. The examples were based on a [comment in PR #1542][1]. This should aid in developing a new footer layout. [1]: #1542 (comment)

We want the columns in our footers and our grids to align, however currently they do not in several scenarios. This commit adds an example with several combinations of grid and footer layouts to act as a quick visual reference for whether the alignment is correct or not. The examples were based on a [comment in PR alphagov#1542][1]. This should aid in developing a new footer layout. [1]: alphagov#1542 (comment)

Add three equal columns example

df396ee

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1542 August 28, 2019 16:36 Inactive

NickColley changed the title ~~Only default two thirds footer for two sections~~ Only default two thirds/one-third layout when footer has two sections Aug 28, 2019

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1542 August 28, 2019 16:41 Inactive

NickColley added this to the Next milestone Aug 28, 2019

ChrisBAshton reviewed Aug 29, 2019

View reviewed changes

NickColley force-pushed the only-default-two-thirds-footer-for-two-sections branch from fa14fd9 to 2c089b3 Compare August 29, 2019 09:04

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1542 August 29, 2019 09:04 Inactive

NickColley added 2 commits August 29, 2019 10:13

Update CHANGELOG entry

490d145

NickColley force-pushed the only-default-two-thirds-footer-for-two-sections branch from 2c089b3 to 490d145 Compare August 29, 2019 09:13

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1542 August 29, 2019 09:13 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1542 August 29, 2019 14:21 Inactive

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-1542 August 30, 2019 11:54 Inactive

NickColley removed this from the v3.1.0 milestone Aug 30, 2019

NickColley mentioned this pull request Sep 2, 2019

Footer layout isn't aligned with content layout #1539

Closed

2 tasks

NickColley force-pushed the only-default-two-thirds-footer-for-two-sections branch from add871d to 490d145 Compare September 2, 2019 12:07

govuk-design-system-ci deployed to govuk-frontend-review-pr-1542 September 2, 2019 12:07 View deployment

NickColley added this to the v3.1.0 milestone Sep 2, 2019

36degrees approved these changes Sep 2, 2019

View reviewed changes

NickColley merged commit 4baa661 into master Sep 2, 2019

NickColley deleted the only-default-two-thirds-footer-for-two-sections branch September 2, 2019 15:11

NickColley mentioned this pull request Sep 2, 2019

Release v3.1.0 #1547

Merged

snyk-bot mentioned this pull request Feb 25, 2020

[Snyk] Upgrade govuk-frontend from 3.0.0 to 3.5.0 ministryofjustice/offender-categorisation#400

Closed

lfdebrux mentioned this pull request Nov 8, 2021

Add footer alignment examples #2422

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

NickColley commented Aug 28, 2019 •

edited

Loading

ChrisBAshton left a comment

ChrisBAshton Aug 29, 2019

NickColley Aug 29, 2019

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

ChrisBAshton Aug 29, 2019

36degrees commented Aug 29, 2019

36degrees commented Aug 29, 2019

NickColley commented Aug 29, 2019

NickColley commented Aug 29, 2019 •

edited

Loading

36degrees commented Aug 29, 2019

NickColley commented Aug 29, 2019

NickColley commented Aug 30, 2019

NickColley commented Sep 2, 2019

	// 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

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

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

Conversation

NickColley commented Aug 28, 2019 • edited Loading

Screenshots

Before

After

ChrisBAshton left a comment

Choose a reason for hiding this comment

ChrisBAshton Aug 29, 2019

Choose a reason for hiding this comment

NickColley Aug 29, 2019

Choose a reason for hiding this comment

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

ChrisBAshton Aug 29, 2019

Choose a reason for hiding this comment

36degrees commented Aug 29, 2019

36degrees commented Aug 29, 2019

NickColley commented Aug 29, 2019

NickColley commented Aug 29, 2019 • edited Loading

36degrees commented Aug 29, 2019

NickColley commented Aug 29, 2019

NickColley commented Aug 30, 2019

NickColley commented Sep 2, 2019

NickColley commented Aug 28, 2019 •

edited

Loading

NickColley commented Aug 29, 2019 •

edited

Loading