We use GOV.UK template in the prototype kit. I'd like to place a message at the top of the page that is visible in the markup when users open the inspector. I could see this being useful to other services too.

Something like this:

To me, the obvious place is immediately after the doctype declaration - I'd like to suggest a new insertion point be added:
{% block after_doctype %}{% endblock %}

Does this seem sensible?

When I share a post from GOV.UK Blogs platform, it always shows the crown image by default even if a post has an image attached.

The open graph image is hardcoded into the template.

Could this be made more flexible so that the open graph tag pull through post's featured image?

I raised this issue on the cross designers email group.

While testing the MoJ service Help with Fees on an iPad we are using for on site testing I noticed that the break point for tablet portrait meant the service name was underneath the Gov.UK logo. The space between the items seems 'tighter' than on mobile and I ended up tapping the incorrect link (see image below).

It made me question why the service name was underneath the logo given there was ample space.

I understand that if the service name is long this might be a better solution but it did make me question whether others have experienced this same problem (accidentally tapped the incorrect link.)

https://github.com/alphagov/govuk_template/blob/master/source/assets/stylesheets/_core-print.scss#L24

a[href^="/"]:after {
  content: " (https://www.gov.uk" attr(href) ")";
  font-size: 90%;
}

This breaks if the site isn't on the www.gov.uk domain. (eg *.service.gov.uk).

Safari now supports a new favicon type for pinned tabs, that uses SVG.

It might be helpful to add a favicon for this, for users who require a government resource on a regular basis and choose to pin the tab.

We're moving https://github.com/alphagov/govuk_prototype_kit to use Nunjucks, which is a JavaScript implementation of Jinja.

It would be very useful to get a version of the template from NPM in the same way we currently do with Mustache.

Services that have search boxes in the header (like the Service Manual) currently have had to create the styles for those boxes from scratch.

How about we add those styles to the template? This is what we've done for the proposition header and navigation styles after all.

Im quite new to this.

I have cloned a copy of this repo using tower and it is tracking the origin/master.

I have opened the project using Aptana Studio 3.

I have not done any changes at all. Just want to run the app

When i run it opens up on firefox and does not display correctly.

Im sure i am missing something. Is there a tutorial or documentation i can follow.

Clicking the search button has no effect.

The GOV.UK Prototype Kit uses the Jinja version of the template.

Ideally, the Jinja version of the template would be published as an npm module, in the same way as the mustache version of the template.

cc. @alphagov/team-patterns-and-tools.

The Performance Platform makes use of govuk_template, but we're hosted on www.gov.uk - so having the footer links available would be really useful for us. We're a special case technically, of course.

For now we've included the HTML and CSS because we need to be consistent across multiple frontend apps while we're transitioning to our own infrastructure, but as @bradleywright notes that doesn't work long-term.

Does anybody have any thoughts on making the GOV.UK footer links available in this project?

npm packages aren't being updated when we release a new version, due to some incorrect config in our CI server (which does the publishing).

The npm credentials were rotated and although they were updated in CI deployment config, this hasn't fully deployed to the CI, so the publish tasks are still using the old auth and failing.

GOVUK Infrastructure are investigating why the crediants aren't updating, but in the mean time no new releases of govuk_template are being pushed to npm, and once it's fixed we may need to do some cleanup to ensure any missed releases are published.

If a user uses custom colours (for accessibility), the GOV.UK logo dissapears. The OGL logo and crown copyright logo also disappear, but these seem less important.

Example:

Spotted in this blog post: https://accessibility.blog.gov.uk/2016/05/26/accessibility-and-me-marian-foley/

For testing, I adjusted the colours using firefox as described in Marian's blog post.

Note: there are other issues throughout GOV.UK relating to this, but this seemed specific to template.

They should be updated to use Transport.

We position the .footer-meta-inner and .copyright columns in the .footer-meta div as inline elements (inline-block in fact) to vertically align them to the base of their parent. We also use the remove whitespace between inline elements hack to ensure that between them the columns fill the space of their container.

If you apply one of the NTA typography mixins to .footer-meta or any element further up the DOM (ie body), this causes the calculation of horizontal space in .footer-meta to break in Chrome:

A simplified example can be seen here:

https://jsbin.com/puzarakubu/1/edit?css,output

I've found resetting font-size-adjust at this level fixes it:

https://jsbin.com/finususote/edit?css,output

Effect of bug

This doesn't effect any apps in the GOVUK stack as none of them set their type at this level but we've seen it on the Digital Marketplace project where we do so on the <body> tag.

See our fix for details: Crown-Commercial-Service/digitalmarketplace-buyer-frontend#338

I've raised it as a bug on Chromium.

I think it's debatable this needs fixing at the template level but figured it was worth raising an issue to have it recorded.

I just used the http://squizlabs.github.io/HTML_CodeSniffer/ Chris Heathcote mentioned in the designers thread. Are we aware of the It doesn't like this in the footer:

<h2><a href="http://www.nationalarchives.gov.uk/doc/open-government-licence/version/2"><img src="<%= asset_path 'open-government-licence_2x.png' %>" alt="OGL"></a></h2>

It doesn't like headings with images only:

Heading tag found with no content. Text that is not intended as a heading should not be marked up with heading tags.

It seems to not comply with guideline 1.1 (http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv.html):

Guideline 1.1: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

The compiled CSS results in selectors like the following:

#footer .footer-meta .footer-meta-inner .open-government-licence .logo {
    ...
}

It doesn't really seem as though any CSS naming convention is being used, which for large, production-ready services, should be the case.

I think an entire re-write of the Sass/CSS using a consistent, sensible convention is required at some point, though the implications on the markup could mean that this would be a very big task.

At the very least, I think the current Sass could be re-worked without having to modify the markup.

/* hide the unnecessary page elements */
body footer,
.visuallyhidden,
#global-cookie-message,
#skiplink-container {
  display: none !important;
}

https://github.com/alphagov/govuk_template/blob/master/source/assets/stylesheets/_core-print.scss#L66

Perhaps body > footer or #footer would be less hardcore?

A bit of an edge-case here, but do we need to add white-space: nowrap to the logo?

JSON3: https://github.com/bestiejs/json3/

Benefits:

• No use of eval or regexps
• Fixes some edge-case issues in IE8 as well

Cons:

• Do we want to bother updating JS for IE7 at all?
• Slightly larger file size after minification
• We’re only including it in ie.js so the other browser edge case fixes wouldn’t get applied

The included version of html5shiv doesn't support the tag. Replacing with the latest version (3.7.3) would fix that.

We supply two inline scripts inside the standard template. Projects (specifically Verify) would like to whitelist these in their CSPs so that they can disable other inline scripts. To do this they’ll need hashes for them.

For the mean time I’ve advised Verify to hardcode the hashes as they rarely change. I’ve also advised them that if we change them in the near future that’d constitute a breaking change and we’d bump the major version number.

Longer term, it’d be good to produce (as part of the package) a list of hashes for the inline scripts in this project. A simple solution would be to drop this into a hardcoded JSON file in the project. A better solution would be to pull the inline scripts out to separate files, which would allow the build process to both generate the hashes and insert them inline (potentially minifying them in the process). Thanks to @NickColley for that idea.

GOV.UK Template hardcodes the skiplink to point at #content (see this line). But GOV.UK Elements adds styles to #content (see this block).

There are cases where we don’t want the thing we identify as #content to have those styles.

Would it be possible to override where the skiplink points to, so we could have <a href="#anything-else" class="skiplink">?

Thanks for all the work in providing the GOV.UK templates as easily consumable packages. 👍

The default EJS layout template is unusable due to a suspected packaging bug. I get the following error:

SyntaxError: Unexpected token else in /Volumes/CODE/jms/projects/mtc/mtc-app-poc/views/layout.ejs while compiling ejs

The first part of line 54 in govuk_template.html has a typo:

<a href="{% if (homepageUrl) { %>

Where I think this should be:

<a href="<% if (homepageUrl) { %>

Hi,

I'm working on Pension Wise and was recently doing some web page performance testing.

I noticed that the site was slow to first paint due downloading the font css file, which is blocking rendering.

Has there been any discussion in getting this changed so the font loading is non-blocking?

From vincent_p_dwp on the cross Government Slack

Question: The cookie JS we all use to determine if we have seen the “blue bar” message, is in client-side JS. Does this persist between services? It looks like it is only persisted on the domain. So for example, If I visit any Gov.UK site it should be fine. But if I visited a service not on a GovUK domain, the user would have to agree again? Do I understand that correctly?

We need to check if the cookie bar persists across services, close if this is the case 😄

Hello,

We're finding that the cachebusting query strings are causing older browsers not to cache the assets. Here's the guilty commit:

68a35d6

Any chance this could be removed, or the version number incorporated into the filenames? If not, can we make the cachebusting configurable when the templates are built? We'd rather have none at all than to have them in querystrings.

Open to other solutions if anyone knows of something that'll cause bad browsers to play ball.

Harry

I am working on a service for which I have been asked to remove the OGL logo and message from the footer. The reason being that some of the information contains personal information such as names and addresses and is not "open". In addition, users are required to purchase the information - it is not freely available.

The way the footer template is structured allows you to override the licence message, but not the OGL logo itself since it is outside the if statement:

<div class="open-government-licence">
  <p class="logo"><a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence</a></p>
  <% if content_for?(:licence_message) %>
    <%= yield :licence_message %>
  <% else %>
    <p>All content is available under the <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated</p>
  <% end %>
</div>

Would it be reasonable to consider moving the logo inside the default message in the else block so that it can be removed / overriden? (Or some other way of disabling it). Or is the OGL logo intentionally baked in like this to discourage people from removing it?

In the other templates, if you don't supply a custom cookie message - it will deliver the default cookie message. This isn't true for the mustache template.

It would be nice to be able to have theme-color set so the browser window matches the site. Robin and I tested this in the verify-frontend by adding <meta name="theme-color" content="#0b0c0c" />

That only works for Android. iOS did not seem to have a similar option and we had not tested Windows Mobile.

Can this be added to govuk_template?

Links don't have good contrast against $focus-colour when they're in focus, it's currently 4.07:1. Keyboard users who have low vision would notice them. Screen magnification and keyboard users whose zoom follow keyboard focus would find it hard if they need high contrast.

We can fix it by setting the link colour on focus to be the same as $text-colour.

Current:

Proposed:

When gov.uk text and crown in the header is "active" (e.g. while holding mouse button down), the following behaviour is observed:

Chrome & Safari

• crown stays white
• "GOV.UK" turns blue
• underline turns blue

Firefox

• crown stays white
• "GOV.UK" turns blue
• underline turns blue
• text background goes yellow
• yellow box appears around crown and text

Conclusion

Firefox looks weird; should it look like Chrome/Safari?

If I preview the GOV.UK template here:
http://alphagov.github.io/govuk_template/

There are default values which appear to be missing.

For this preview version, it would be helpful if these were provided.

1. In the header, the text "GOV.UK" should appear next to the crown.
2. The OGL text should appear next to the OGL logo. "All content is available under the Open Government Licence v3.0, except where otherwise stated."
3. "© Crown copyright" is missing from under the Crown logo in the footer

There may well be other values which are also missing that aren't immediately visible, the cookie message and the text in the "skip to main content" link.

cc. @alphagov/team-patterns-and-tools

.menu button

The .menu button shown in mobile view in example-proposition-menu feels a little buggy.

• Menu button disappears when clicked
• Menu button shows when JavaScript is off

Menu button disappears when clicked

Current

In mobile view with JavaScript on when you click the .menu button it disappears via the .js-hidden helper

Expected

The .menu button shouldn't hide when you click it

Example

Menu button shows when JavaScript is off

Current

In mobile view with JavaScript off the .menu element is still visible

Expected

.menu has no functionality with JavaScript off so it should only be show when JavaScript is on

Example

We're having an issue displaying the å character in the "NTA" font. It seems it is missing and so is falling back to Arial to display the letter, which results in it looking out of place.

I've created a jsfiddle recreating the issue.

The main govuk_template.html file has a dependency on vendor/goog/webfont-debug.js. This dependency is bundled with the included assets.

This file seems to be an old debug version of the Google webfont loader. A search for its usage suggests alphagov and its derivatives are the only users: Search for 'google "webfont-debug.js"'.

While it currently serves it's purpose, there might be issues with using an old, debug version of the file. The Google Web Font Loader project suggests loading loading a production version using a CDN such as googleapis.com, jsDelivr or CDNJS. Alternatively, one of these newere, compressed versions could be downloaded and replace the current bundled version.

Hi,

I'd like to set far-future cache headers on my assets subdomain.

However, the template doesn't look like it's flexible enough to allow me to do this:

<link rel="shortcut icon" href="{{ assetPath }}images/favicon.ico" type="image/x-icon" />

I'm planning to use grunt-digest to generate assets of the form favicon-12820cc3033bdd51838998f4bf538f4c.ico, similar to the way in which the Rails asset pipeline works.

Does anyone have any suggestions, or is this an enhancement that could be made to the template?

Thanks,

Alex

Steps to reproduce

Examine the Crown Copyright section of the packaged Play template

Expected behaviour

The copyright HTML entity is wrapped in a call to Html(), to avoid it being HTML-escaped

<a href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">@crownCopyrightMessage.getOrElse(Html("&copy; Crown copyright"))</a>

Actual behaviour

The copyright HTML entity is not wrapped in an Html() call, resulting in it being HTML-escaped, and thus appearing as © in the browser.

<a href="http://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/copyright-and-re-use/crown-copyright/">@crownCopyrightMessage.getOrElse("&copy; Crown copyright")</a>

Workaround

I’m currently working around the bug by duplicating the Crown copyright message content in my main template:

@crownCopyrightMessage = {
    © Crown copyright
}
...
@govuk_template(... Some(crownCopyrightMessage))(content)

This content isn’t HTML-escaped, so the copyright entity appears correctly when the resulting pages are viewed in a web browser.

Please correct me if I'm wrong but should the global-header-bar not be before the the after_header template for the new alpha and beta banner designs to work?

When attempting to build the tarball in a Windows environment, the following error is produced:

C:\IR\rails_apps\govuk_template>bundle exec rake build:tar
Compiling assets and templates into ./app
rake aborted!
Errno::ENOENT: No such file or directory - cp -r --parents layouts/govuk_template.html.erb C:/IR/rai
ls_apps/govuk_template/app/views
C:/IR/rails_apps/govuk_template/build_tools/compiler/asset_compiler.rb:81:in `block in copy_views'
C:/IR/rails_apps/govuk_template/build_tools/compiler/asset_compiler.rb:71:in `chdir'
C:/IR/rails_apps/govuk_template/build_tools/compiler/asset_compiler.rb:71:in `copy_views'
C:/IR/rails_apps/govuk_template/build_tools/compiler/asset_compiler.rb:29:in `compile'
C:/IR/rails_apps/govuk_template/build_tools/compiler/asset_compiler.rb:13:in `compile'
C:/IR/rails_apps/govuk_template/Rakefile:10:in `block in <top (required)>'
Tasks: TOP => build:tar => compile
(See full trace by running task with --trace)

Any ideas?

WCAG2 1.4.4 says that to hit double-AA text must be able to zoom to 200% of the default size without breaking the site layout. Currently the logo is fixed to 30px which breaks the text when resized:

We should allow the header to grow in size to contain the text, probably by using min-height instead of height. Reported by @selfthinker.

As an independent site ( http://www.TheGovernmentSays.com ),
I want the govuk logo to use a relative img src link,
so that it doesn't show up on external sites (as GDS people have requested), without any modification to your content (so I don't have to modify your served html in any way).

Background

For a decade (next month), TheGovernmentSays.com has cached Government news and publications (1.2 million of them and counting). We keep a copy online, for when things disappear, whatever the reason.

However, that means we keep a copy of the html, and absent a canonical link in your html, search engines may pick it up, and govuk staff are concerned about public confusion. We've added a banner to the top of the page, however, a complete resolution on display of the logo is solely within the GDS remit to fix in a manner that doesn't require modification of your original content.

Besides the banner that's at the top of the cached page, I don't wish to make any intrusive changes to your content, as the point is to keep a copy of exactly what is published.

It's not really designed for code but should we be using the https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/?

Currently this is published with the MIT licence which is very similar so I don't think there's any change in permissions between the two.

The line
background-image: image-url("images/govuk-crest.png");
in govuk_template/source/assets/stylesheets/_header.scss
causes a warning and the image to not to be displayed.

Changing to
background-image: url("images/govuk-crest.png");
works but I haven't tested it across more browsers.

Currently to render a page I first need to render any content I want to place into the content areas (htmlLang, topOfPage, pageTitle, assetPath, head, bodyClasses, headerClass, insideHeader, propositionHeader, afterHeader, cookieMessage, footerTop, footerSupportLinks, bodyEndContent, content).

12 of those allow html to be rendered, using {{{ to render literal raw html. So in the "best worst" case, where we only render our content for each of the 12 raw html variables once then render the template with those html blocks, we end up doing 13 mustache render passes. On top of this the rendering is nested, render these blocks, then render them into the template, so we need to control our render code and have multiple mustache models.

To fix this I'd propose splitting the template into partials around the {{{content}}} block, two partials Header and Footer. This allows us to import the partials above and below our content inside our template. Also we only need one mustache model, so long as we provide content for the different parameters listed above. This only reduces the number of render passes slightly but it makes the render process much simpler.

Thoughts?

The Subresource Integrity specification adds a new integrity attribute to <script> and <link> elements that is a hash of the asset they point to. Browsers that support SRI can then hash the downloaded asset and check that it matches the hash specified in the integrity attribute. We recently implemented this on verify-frontend for the application specific files but we’d like to turn it on for the govuk_template styles and scripts as well.

On verify-frontend it was as simple as using sprockets-rails integrity attribute passed into javascript_include_tag and stylesheet_link_tag but as we compile govuk_template into multiple different template languages we can’t do that here. To implement this we’ll have to hash govuk-template.js and govuk-template.scss post-compilation, and add those hashes manually to an integrity attribute on their respective <script> and <link> tags.

Latest https://github.com/alphagov/govuk_template_play includes the undefined parameter @header_class. which generates the error below
app/assets/govuk_template_play/views/layouts/govuk_template.scala.html:69: not found: value header_class

The vertical position of the service name looks off on the demo site. Unsure if this is the demo site or an issue with template itself. The name is too high.

I note also that links move vertically between this page and this page - which feels like a bug.

When compiled, there are images in 3 places in the /app folder.

• /app/assets/images
• /app/assets/stylesheets
• /app/assets/stylesheets/images

(The external-link images do not appear in the /source/assets/stylesheets folder.)

Should these be tidied up?

The following was recently raised in usability testing.

On a mobile device if there is only one item in the collapsable menu, the user has to click the menu button, to reveal the one menu item. Essentially making the collapsible functionality redundant and forcing the user into additional clicks.

I was going to look at creating a pull request for this, but I'm not sure the best approach, or what the preferred appearance would be. It could just be that anyone using the template needs to be aware and create their own patch, but for consistencies sake it would be good to include it in the repo.