search

alphagov / govuk-design-system

One place for service teams to find styles, components and patterns for designing government services.
https://www.gov.uk/design-system
MIT License
511 stars 232 forks source link

Set a max-width on the examples container as to more accurately reflect what it will look like #418

Closed joelanman closed 5 years ago

joelanman commented 6 years ago

From @davehaigh on June 29, 2018 14:20

the examples wrapper is filling the entire width of the screen so components are rendered a lot wider than they are normally seen e.g open https://design-system.service.gov.uk/components/panel/ on a desktop pc. The 'confirmation panel' is very wide when normally its only 960px max.

I think the container should have a max width of 960px as to more accurately reflect the prototype kit.

image

Copied from original issue: alphagov/govuk-design-system-backlog#142

dashouse commented 6 years ago

If we want to achieve this we should set the width of the column not the example container. At the moment the paragraphs, images, tables are all constrained to a maximum width to allow for the code blocks to be 100% and break out of the visible layout.

If we no longer want the code blocks to be 100% we can remove all of the individual constraints and set a max width on the column itself.

kr8n3r commented 6 years ago

they're only constrained in the page content, not the example (as that's using a different template

we should be able to add max width to the app-example-page in the example layout

36degrees commented 6 years ago

@dashouse do you think there's a clear change that we need to make here, or does this need more thinking?

dashouse commented 6 years ago

@36degrees More thinking definitely, it's really about whether or not we're trying to represent the components as they actually behave (in this case 100% wide) or how we want them to be used (simulate 2/3 column width).

I prefer as is because it it's more of a representation of what you're going to get and makes the examples that DO have limited widths more obvious.

This caused a big debate so would prefer to look into it...

dashouse commented 5 years ago

Closing this issue as it has been recorded in Trello and will be considered when we look at the the layout improvements to the Design System - for example https://github.com/alphagov/govuk-design-system/tree/center-layout

dashouse commented 5 years ago

Fixed by https://github.com/alphagov/govuk-design-system/pull/687#event-2094443268