Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Full width grid container #416

Closed
chrimesdev opened this issue Mar 14, 2019 · 2 comments
Closed

Full width grid container #416

chrimesdev opened this issue Mar 14, 2019 · 2 comments

Comments

@chrimesdev
Copy link
Member

chrimesdev commented Mar 14, 2019 •
edited
Loading

We've seen a need for new designs to support a full-width page design, spanning the entire width of the viewport. For example to fit content such as large data tables on the page without restricting it to a 'letterbox' design.

The current nhsuk-width-container is restricted to a max width of 960px. This could be modified to allow the 960px to be customisable via variables or an additional nhsuk-width-container class to give a full width layout with the relevant spacing and guttering. Similar to container and container-fluid classes used in the Bootstrap framework.
@chrimesdev
Copy link
Member Author

chrimesdev commented Mar 15, 2019 •
edited
Loading

The documentation for the Layout/Grid will also need information adding about the full-width container. It also might be an opportunity for re-writing some of the Grid pages on the Service Manual, as some classes aren't used any more and some of the guidance is incorrect.

chrimesdev added a commit that referenced this issue Mar 18, 2019
@chrimesdev
[refs #416]Extend the page layout to include a fluid-width container.
a74984e 
The current nhsuk-width-container is restricted to a max width of 960px.
A new container has been added (nhsuk-width-container-fluid), which
which spans the entire width of the viewport and allows for full
screen layouts.
chrimesdev added a commit that referenced this issue Mar 18, 2019
@chrimesdev
[refs #416] Extend the page layout to include a fluid-width container.
22d753e 
The current nhsuk-width-container is restricted to a max width of 960px.
A new container has been added (nhsuk-width-container-fluid), which
which spans the entire width of the viewport and allows for full
screen layouts.
chrimesdev added a commit that referenced this issue Mar 18, 2019
@chrimesdev
[refs #416] Extend the page layout to include a fluid-width container.
d34f0ae 
The current nhsuk-width-container is restricted to a max width of 960px.
A new container has been added (nhsuk-width-container-fluid), which
which spans the entire width of the viewport and allows for full
screen layouts.
chrimesdev added a commit that referenced this issue Mar 18, 2019
@chrimesdev
[refs #416] Extend the page layout to include a fluid-width container.
b0ec921 
The current nhsuk-width-container is restricted to a max width of 960px.
A new container has been added (nhsuk-width-container-fluid), which
which spans the entire width of the viewport and allows for full
screen layouts.
chrimesdev added a commit that referenced this issue Mar 19, 2019
@chrimesdev
[refs #416] Document the fixed-width and fluid-width containers
1c53082 
Add examples for the fixed-width and fluid-width containers to the Core
folder README.
chrimesdev added a commit that referenced this issue Mar 19, 2019
@chrimesdev
[refs #416] Increase the fluid-width container guttering above desktop
61a003e 
Have the guttering to go 32px above the desktop breakpoint of 769px.
davidhunter08 added a commit that referenced this issue Mar 19, 2019
@davidhunter08
Merge pull request #418 from nhsuk/feature/fluid-container
dabc0e2 
[refs #416] Extend the page layout to include a fluid-width container.
@chrimesdev
Copy link
Member Author

Released in version 2.1.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@chrimesdev