Layout

[govuk-design-system]

Use this issue to discuss layout in the GOV.UK Design System.

[christaylor-hod]

Does the layout system support being able to position columns one way on mobile, but differently on larger screens?

An example of this would be a search results page which has a sidebar with controls for filtering the page. We may want to display the sidebar underneath the search results on mobile size views but on the left of the screen on larger screens.

I'm also wondering if this would help with assistive technologies not having to read out the sidebar controls before the actual search results

[36degrees]

Copying this from an issue in GOV.UK Elements by @joelanman:

Idea - a new 2/3 column which doesn't get smaller until screen-width

Sometimes a service will use a 2/3 column with no column to the right, in order to keep line lengths readable.

In those situations, when a browser width is less than 1020px but more than 690px, it's not helpful for that 2/3 column to get smaller, but instead to stay 690px.

Register to vote works in this way.

There is more discussion about this idea in the issue.

[NickColley]

See also this recent discussion alphagov/govuk-frontend#760

[kr8n3r]

comments deleted as per direct conversation with @penx, a better suited issue to clarify template blocks will be raised in the Design System repository

[nnagewad]

I am curious whether the existing GOV.UK’s breakpoints are in need of reconsideration, particularly the smallest breakpoint of 320px.

As per the compiled data, dating from October 2020 to the end of September 2021, there is no viewport width smaller than 320px. That begs the question, whether that breakpoint is necessary? or should that breakpoint be designated at another pixel value?