Add layouts that use the gem layout component #2411
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
injms
force-pushed
the
add-gem-layout
branch
2 times, most recently
from
39cbfd0 to
1d94589
Compare
injms
changed the title
injms
force-pushed
the
add-gem-layout
branch
2 times, most recently
from
8e9f8bc to
75f1af7
Compare
alex-ju
reviewed
Apr 12, 2021
| @@ -48,7 +50,7 @@ Restarting the app should pick up the changes. | |||
| For example, to see changes made to static templates which | |||
| are wrapped around feedback pages, run `bowl feedback | |||
There was a problem hiding this comment.
not-related to this change, but I'm not sure bowl is still a thing 😬
Uses the public layout component[1] to add a constrained width and a full width layout template. Dependent on Slimmer having compatibility added [2]. [1]: https://components.publishing.service.gov.uk/component-guide/layout_for_public [2]: alphagov/slimmer#265
alex-ju
approved these changes
Apr 14, 2021
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
Adds
gem_layoutandgem_layout_full_widthas optional templates that can be requested by Slimmer. The plan is to swap the use ofcore_layoutforgem_layoutin each frontend app - and that both templates will be running side by side until this is complete.Don't use this layout until the frontend app you're using has Slimmer v15.5.0 or later.
This can be viewed when running static locally at http://static.dev.gov.uk/templates/gem_layout.html.erb
Why
The current
core_layoutusesgovuk_template, which is deprecated.govuk_templaterelies ongovuk_frontend_toolkitfor styles, which is also deprecated.The
gem_layouttemplate uses the public layout component from the GOV.UK Publishing Components gem, which is maintained and regularly updated. The gem relies on the GOV.UK Design System, which is maintained and regularly updated.Core layout contains styles that can interfere with components, for which hacks have to be written; for example focus link overrides and specific overrides in the cookie banner. These can be removed when the
core_layouttemplate stops being used.Removing the use of
govuk_templatewill mean that the compatibility mode ($govuk-compatibility-govuktemplate) can be turned off.Because the
gem_layouttemplate only uses components which follow the component principles and component conventions there are no side effects - the styles and JavaScript won't affect anything outside of the components used in the template itself.Appearance
Note - both the menu and the search appear at the same time. Inside each app Slimmer takes care of showing and hiding those parts of the header, so only one or none of those will appear.
On desktop / large screens:
and with emergency banner:
On mobile / smaller screens:
and with emergency banner: