Update footer to use CSS grid instead of flexbox #2423
Conversation
Breaking change, moves column modifier to section so that the columns influence how far the overall section spans in the grid.
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2423
|
Screenshot of some previous GOV.UK footer layouts with the new CSS, based on comments from #1729
I think the screenshots show that the alignment issues preventing Max from using the design system footer for GOV.UK are fixed by using CSS grids. |
|
One of the immediate disadvantages of using CSS grids is the same CSS won't work with IE11: this screenshot of the code in d0b4bd6 in IE11 shows that the footer sections are all bunched up to the left and mis-aligned. It might be possible however to add some IE11 specific CSS that uses the version of grid that IE11 does support, but it won't look perfect in IE8 or 9.
|
|
It looks like support for a grid-based footer in IE11 is going to be severely constrained by the fact that Internet Explorer doesn't support auto-placement:
So we'd probably need totally different CSS for IE if we wanted to get the alignment right. |
lfdebrux
force-pushed
the
nickcolley-ldeb-spike-footer-grid
branch
from
9bf8b87
to
b3ece26
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2423
Allow having a footer section that spans multiple columns but does not have multiple columns of list items. Useful if you have multiple rows of sections and want to align a section with only a few items with a section with many items (for instance the current GOV.UK footer layout).
lfdebrux
force-pushed
the
nickcolley-ldeb-spike-footer-grid
branch
from
b3ece26
to
b680d22
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-2423
This PR resurrects a spike by @NickColley in 2019 and rebases it on top of our code today.
I've done a little testing and I think it fixes issues #1539 and #1729 (with the addition of a span parameter).
I'm opening this draft PR now as I'd like to pair with another dev to explore it further and find any pitfalls early.