Improve the layout options for the footer component.

[maxgds]

What

Let the layout for the contents of a footer be more flexible to support more potential footer layouts.

Why

I'm currently trying to rebuild the GOV.UK website's existing footer using this component but the desired layout doesn't seem to be possible.

Further detail

The live site (http://www.gov.uk) looks like this:

During different iterations of this footer the first section has contained a Brexit header with many list items in 2 columns, and as now, a Transition header with a single list item. In both cases this section should take up 2/3 of the space and line up with the next section, which also takes 2/3 of the space and is followed by a 3rd section taking the remainder of that pseudo-row. The problem is that using the footer component classes Section 1 and Section 2 don't align properly:

This layout could be easily achieved using the design system layout classes, but it seems wrong to try to do that when the design system has implemented specific footer classes. Is there a reason why it is using flexbox instead of the custom classes?

Having sought feedback from design they are keen to keep the layout as-is in our design so we may be forced into using the non-footer approach.

Done when

• [x] "Details of breaking change" section below completed to help with writing release notes

Details of breaking change

• which users are affected: TBC
• the change that’s been made: TBC
• changes users will have to make: TBC
• impact of users not making those changes: TBC

[NickColley]

We're aware of some other footer layout issues that we want to address so this is helpful.

The footer doesnt use the regular grid layout classes so that it flows better between breakpoints but I think this has made it more difficult to extend and use outside how we expected it to be used.

So I think when we address the other footer layout issues we'll want to consider taking a step away from flexbox and doing something simpler like you have suggested, perhaps exploring CSS Grid.

It would be nice to ensure that content in the footer columns have opportunity to determine how this component responds when on smaller screens but our priority is making sure it aligns with the overall grid so we'll keep this in mind.

I'm going to try and give you an example of a workaround you could consider in the meantime.

[NickColley]

One option is what you suggested is to use the grid classes:

<div class="govuk-width-container">
    <div class="govuk-grid-row govuk-!-margin-bottom-6">
        <div class="govuk-!-margin-bottom-6 govuk-grid-column-two-thirds-from-desktop">
            <!-- section stuff goes in here -->
        </div>
    </div>
    <div class="govuk-grid-row">
        <div class="govuk-!-margin-bottom-6 govuk-grid-column-two-thirds-from-desktop">
            <!-- section stuff goes in here -->
        </div>
        <div class="govuk-!-margin-bottom-6 govuk-grid-column-one-third-from-desktop">
            <!-- section stuff goes in here -->
        </div>
    </div>
</div>

[NickColley]

Another alternative would be to add a 'dummy' empty section and ensure all last sections are a minimum width, this feels hacky:

@include govuk-media-query($from: desktop) {
  .govuk-footer__section:last-child {
    min-width: 33.3%;
  }
}

I've demonstrated that here: https://govuk-frontend-issue-1726.glitch.me/

[vanitabarrett]

As discussed in v4 prioritisation, we think this work is important but it's quite broad at the moment. We should probably do a timeboxed investigation into this issue and this related one to explore a few different layout systems for the footer and see how they perform.

We should keep in mind these other issues with the footer, some of which may be fixed by switching to a new layout system.