Skip to content

Commit

Permalink
Remove fixed layout
Browse files Browse the repository at this point in the history
In a previous accessibility audit we had reports of issues with the sticky and independently scrollable parts of our original design.

We also need to meet the new guidance in WCAG 2.1 which means that the design system reflows well when zoomed: https://www.w3.org/TR/WCAG21/#reflow

This change turns the design system into a static layout with a maximum width, which means there is more vertical space for reading, and reflows better without causing obstructions.

Additionally this change makes the design system less 'special' and more like the services that our users build. It also allows us to present the examples in the design system (For example, a component) at a width which is closer to how they will actually be used in a service.

We have created a new back to top component that will return you to the navigation, since some of our pages are long and no longer have the navigation available as you scroll.
  • Loading branch information
NickColley committed Jan 24, 2019
1 parent d1da30e commit 2e1e031
Show file tree
Hide file tree
Showing 14 changed files with 95 additions and 109 deletions.
15 changes: 15 additions & 0 deletions src/stylesheets/components/_banner.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.app-phase-banner {

@include govuk-media-query($until: tablet) {
margin-right: -(govuk-spacing(3));
margin-left: -(govuk-spacing(3));
padding-right: govuk-spacing(6);
padding-left: govuk-spacing(6);
}

@include govuk-media-query($from: tablet) {
padding-right: 0;
padding-left: 0;
border-bottom: 0;
}
}
6 changes: 0 additions & 6 deletions src/stylesheets/components/_cookie-banner.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,14 @@
width: 100%;

padding-top: govuk-spacing(3);
padding-right: govuk-spacing(3);
padding-bottom: govuk-spacing(3);
padding-left: govuk-spacing(3);
background-color: lighten(desaturate(govuk-colour("light-blue"), 8.46), 42.55);
}

.app-cookie-banner {
display: none;
}

.app-cookie-banner__message {
margin: 0;
}

@include govuk-media-query($media-type: print) {
.app-cookie-banner {
display: none !important;
Expand Down
7 changes: 0 additions & 7 deletions src/stylesheets/components/_footer.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,6 @@
// GOV.UK Frontend footer adapted for full width

@include govuk-exports("app-footer") {
.app-footer {
@include govuk-media-query($from: tablet) {
display: flex;
flex-direction: column;
flex: 1 0 auto;
}
}

.app-width-container--full {
min-width: calc(100% - #{$govuk-gutter * 2});
Expand Down
7 changes: 6 additions & 1 deletion src/stylesheets/components/_header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,16 @@
@include govuk-exports("app-header") {

.app-header {
padding: govuk-spacing(2) govuk-spacing(3);
box-sizing: border-box;
width: 100%;
border-bottom: 10px solid govuk-colour("blue");
color: govuk-colour("white");
background: govuk-colour("black");
@include govuk-clearfix;

@include govuk-media-query($from: desktop) {
padding: govuk-spacing(2) 0;
}
}

.app-header__logotype {
Expand Down
10 changes: 6 additions & 4 deletions src/stylesheets/components/_navigation.scss
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
.app-navigation {
$navigation-height: 53px;
padding-right: govuk-spacing(3);
padding-left: govuk-spacing(3);
background-color: $app-light-grey;
box-sizing: border-box;
@include govuk-font(19, $weight: bold);
width: 100%;

@include govuk-media-query($until: tablet) {
display: none;
}

@include govuk-media-query($from: tablet) {
margin-left: -(govuk-spacing(3));
}

&__list {
margin: 0;
padding: 0;
list-style: none;

Expand Down
37 changes: 7 additions & 30 deletions src/stylesheets/components/_pane.scss
Original file line number Diff line number Diff line change
@@ -1,23 +1,12 @@
@include govuk-exports("app-pane") {
$toc-width: 300px;
$toc-width: 260px;
$toc-width-tablet: 210px;

.app-pane.app-pane--enabled {
$pane-height: 100vh;
overflow: hidden;

@include govuk-media-query($from: tablet) {
display: flex;
flex-direction: column;
}

@include govuk-media-query($from: tablet, $and: "(orientation: portrait)") {
height: $pane-height;
}

@include govuk-media-query($from: desktop) {
height: $pane-height;
}
}

.app-pane__header {
Expand All @@ -35,6 +24,7 @@
.app-pane__nav {
@include govuk-media-query($from: tablet) {
display: flex;
background-color: $app-light-grey;
flex-direction: column;
flex: 1 0 auto;
}
Expand All @@ -45,22 +35,17 @@
display: flex;
position: relative;
min-height: 0;
overflow: hidden;
flex: 1 1 100%;
overflow: inherit;
}

> * {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
@include govuk-media-query(1160px) {
width: 100%;
}
}

.app-pane__subnav {
border-right: 1px solid $govuk-border-colour;
@include govuk-media-query($from: tablet) {
width: $toc-width-tablet;
border-right: 1px solid $govuk-border-colour;
flex: 0 0 auto;
}
@include govuk-media-query($from: desktop) {
Expand All @@ -72,15 +57,8 @@
@include govuk-media-query($from: tablet) {
display: flex;
min-width: 0;
margin-left: auto;
flex: 1 1 auto;
flex: 1 1 100%;
flex-direction: column;

// Stick footer to bottom of screen if content is shorter than viewport
main {
display: block;
flex: 1 0 auto;
}
}
}

Expand All @@ -105,7 +83,6 @@
.app-pane__content {
margin-left: -1px;
overflow-x: hidden;
border-left: 1px solid $govuk-border-colour;
}
}
}
6 changes: 5 additions & 1 deletion src/stylesheets/components/_subnav.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
@include govuk-exports("app-subnav") {

.app-subnav {
padding: govuk-spacing(3);
padding: govuk-spacing(6) govuk-spacing(3) 0 0;
@include govuk-font(16);

@include govuk-media-query($from: tablet) {
margin-left: -(govuk-spacing(3));
}
}

.app-subnav__section {
Expand Down
25 changes: 9 additions & 16 deletions src/stylesheets/main.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
$govuk-page-width: 1100px !default;

@import "govuk-frontend/all";

// App-specific variables
$app-light-grey: #f8f8f8;
$app-code-color: #dd1144;

// App-specific components
@import "components/banner";
@import "components/contact-panel";
@import "components/cookie-banner";
@import "components/example";
Expand Down Expand Up @@ -46,21 +49,6 @@ body {
}
}

// Mirrors Bootstrap 4 - open for discussion
$app-breakpoint-widescreen: 1200px;

// This will be coming to FE later but making it app specific for now
.app-site-width-container {
@media (min-width: $app-breakpoint-widescreen) {
max-width: 1100px;
}
}

// This layout is currently used on error pages like 404
.app-site-width-container--constraint {
max-width: 960px;
}

// This is consistent with Elements - will be changed in FE
[class*="govuk-grid-column"] {
@include govuk-media-query($until: desktop) {
Expand All @@ -79,7 +67,12 @@ $app-breakpoint-widescreen: 1200px;

.app-content {

@include govuk-responsive-padding(6);
padding: govuk-spacing(3) govuk-spacing(0);

@include govuk-media-query($from: tablet) {
padding: govuk-spacing(6);
padding-right: 0;
}

h1 {
max-width: 15em;
Expand Down
4 changes: 2 additions & 2 deletions views/layouts/layout-pane.njk
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{% block appPaneClasses %}app-pane--enabled{% endblock %}

{% block body %}
<div class="app-pane__body">
<div class="app-pane__body govuk-width-container">
<div class="app-pane__subnav app-hide-mobile">
{% include "_subnav.njk" %}
</div>
Expand Down Expand Up @@ -67,7 +67,7 @@
<p class="govuk-body govuk-!-margin-bottom-0"><a class="govuk-link" href="https://github.com/alphagov/govuk-design-system-backlog/issues/{{backlog_issue_id}}">Discuss ‘{{title}}’ on GitHub</a></p>
{% endif %}
</main>
{% include "_footer.njk" %}
</div>
</div>
{% include "_footer.njk" %}
{% endblock %}
21 changes: 11 additions & 10 deletions views/partials/_banner.njk
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% from "phase-banner/macro.njk" import govukPhaseBanner %}

<div class="app-phase-banner__wrapper">
{% if PULL_REQUEST %}
{% set phaseBannerText %}
This is a preview of
Expand All @@ -16,15 +16,16 @@
"text": "preview",
"classes": "app-tag--review"
},
"classes": "govuk-!-padding-left-3 govuk-!-padding-right-3",
"classes": "app-phase-banner govuk-width-container",
"html": phaseBannerText
}) }}
{% else %}
{{ govukPhaseBanner({
"tag": {
"text": "beta"
},
"classes": "govuk-!-padding-left-3 govuk-!-padding-right-3",
"html": "This is a new service – your <a class=\"govuk-link\" href=\"/get-in-touch\">feedback</a> will help us to improve it."
}) }}
{% endif %}
{{ govukPhaseBanner({
"tag": {
"text": "beta"
},
"classes": "app-phase-banner govuk-width-container",
"html": "This is a new service – your <a class=\"govuk-link\" href=\"/get-in-touch\">feedback</a> will help us to improve it."
}) }}
{% endif %}
</div>
2 changes: 1 addition & 1 deletion views/partials/_cookie-banner.njk
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@

<div class="app-cookie-banner js-cookie-banner">
<p class="app-cookie-banner__message">GOV.UK uses cookies to make the site simpler. <a href="/cookies" class="govuk-link">Find out more about cookies</a></p>
<p class="govuk-width-container">GOV.UK uses cookies to make the site simpler. <a href="/cookies" class="govuk-link">Find out more about cookies</a></p>
</div>
4 changes: 2 additions & 2 deletions views/partials/_footer.njk
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{% from "footer/macro.njk" import govukFooter %}

{{ govukFooter({
"classes": "app-footer app-footer--full ",
"containerClasses" : "app-width-container--full",
"classes": "app-footer app-footer--full",
"containerClasses" : "app-site-width-container",
"navigation": [
{
"title": "Related resources",
Expand Down
58 changes: 30 additions & 28 deletions views/partials/_header.njk
Original file line number Diff line number Diff line change
@@ -1,36 +1,38 @@
<header class="app-header" role="banner">
<a href="/" class="govuk-link app-header__link">
<span class="app-header__logotype">
{#
We use an inline SVG for the crown so that we can cascade the
currentColor into the crown whilst continuing to support older browsers
which do not support external SVGs without a Javascript polyfill. This
adds approximately 1kb to every page load.
<div class="govuk-width-container">
<a href="/" class="govuk-link app-header__link">
<span class="app-header__logotype">
{#
We use an inline SVG for the crown so that we can cascade the
currentColor into the crown whilst continuing to support older browsers
which do not support external SVGs without a Javascript polyfill. This
adds approximately 1kb to every page load.
We use currentColour so that we can easily invert it when printing and
when the focus state is applied. This also benefits users who override
colours in their browser as they will still see the crown.
We use currentColour so that we can easily invert it when printing and
when the focus state is applied. This also benefits users who override
colours in their browser as they will still see the crown.
The SVG needs `focusable="false"` so that Internet Explorer does not treat
it as an interactive element - without this it will be 'focusable' when
using the keyboard to navigate. #}
<svg role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" class="app-header__logotype-crown" width="36" height="32" viewBox="0 0 132 97">
<path d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z" fill="currentColor" fill-rule="evenodd"></path>
{#
Fallback PNG image for older browsers.
The SVG needs `focusable="false"` so that Internet Explorer does not treat
it as an interactive element - without this it will be 'focusable' when
using the keyboard to navigate. #}
<svg role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" class="app-header__logotype-crown" width="36" height="32" viewBox="0 0 132 97">
<path d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z" fill="currentColor" fill-rule="evenodd"></path>
{#
Fallback PNG image for older browsers.
The <image> element is a valid SVG element. In SVG, you would specify
the URL of the image file with the xlink:href – as we don't reference an
image it has no effect. It's important to include the empty xlink:href
attribute as this prevents versions of IE which support SVG from
downloading the fallback image when they don't need to.
The <image> element is a valid SVG element. In SVG, you would specify
the URL of the image file with the xlink:href – as we don't reference an
image it has no effect. It's important to include the empty xlink:href
attribute as this prevents versions of IE which support SVG from
downloading the fallback image when they don't need to.
In other browsers <image> is synonymous for the <img> tag and will be
interpreted as such, displaying the fallback image. #}
<image src="/assets/images/govuk-logotype-crown.png" xlink:href="" class="app-header__logotype-crown-fallback-image"></image>
</svg>
<span class="app-header__logotype-text">
GOV.UK
In other browsers <image> is synonymous for the <img> tag and will be
interpreted as such, displaying the fallback image. #}
<image src="/assets/images/govuk-logotype-crown.png" xlink:href="" class="app-header__logotype-crown-fallback-image"></image>
</svg>
<span class="app-header__logotype-text">
GOV.UK
</span>
</span>
</span>
<span class="app-header__title">
Expand Down
2 changes: 1 addition & 1 deletion views/partials/_navigation.njk
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<nav class="app-navigation govuk-clearfix">
<ul class="app-navigation__list">
<ul class="app-navigation__list govuk-width-container">
{% for item in navigation %}
<li{% if path == item.url or item.url and item.url in path %} class="app-navigation--current-page"{% endif %}>
<a class="govuk-link" href="/{{ item.url }}" data-topnav="{{ item.label }}">{{ item.label }}</a>
Expand Down

0 comments on commit 2e1e031

Please sign in to comment.