Standard head element
Sections are marked as Required or Optional.
Note: asset URLs on the develop branch have query-strings added for cache-busting. This is not the case for production.
For more information on the method we're using to load JavaScript, see this article by Jake Archibald.
Comments are added as a guide for developers, they should be removed in production.
<head>
<!-- Required: -->
<meta charset="UTF-8">
<!-- Required: -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Required: Changes the colour of the browser bar in Chrome, Firefox OS and Opera. -->
<meta name="theme-color" content="#e00023">
<!-- Required: Always force latest IE rendering engine or request Chrome Frame. -->
<!-- Must appear before all other elements except for the title element and other meta elements. -->
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<!-- Required: -->
<title>Head Element</title>
<!-- Required: Favicon. -->
<link href="../../images/favicon.ico" rel="icon" type="image/ico" />
<!-- Required: Basic HTML5 support for IE8. -->
<!--[if lte IE 8]>
<script src="../../scripts/vendor/html5.js?1510140825" type="text/javascript"></script>
<![endif]-->
<!-- Required: Base stylesheet. Delivered to all browsers. -->
<link href="../../stylesheets/base.css?1510140790" rel="stylesheet" type="text/css" />
<!-- Optional: Base schemes. Full must also be included (see below) -->
<link href="../../stylesheets/optional/schemes--optional--base.css?1510140801" rel="stylesheet" type="text/css" />
<!-- Optional: Extra icons not included in base.css. -->
<link href="../../stylesheets/optional/icons--optional.css?1510140800" rel="stylesheet" type="text/css" />
<!-- Optional: Adblock detection javascript. Delivered to all browsers. -->
<!-- Loaded synchronously, so we can depend on it loading before any other scripts. -->
<script src="../../scripts/adverts.js?1510140813"></script>
<!-- Required: Base javascript. Delivered to all browsers. -->
<!-- Loaded synchronously, so we can depend on it loading before any other scripts. -->
<script src="../../scripts/base.js?1510140813"></script>
<!-- Required: Cutting the mustard. -->
<script>
if ('visibilityState' in document) {
// First set the state. This is to help fix flashes of unstyled content.
// Do not set this attribute if you do not also remove it after a timeout.
// See the script before the closing body tag.
document.documentElement.setAttribute('data-fulljs', 'loading');
// Modern browser, so load full CSS and JavaScript.
// For more information on this method, see http://www.html5rocks.com/en/tutorials/speed/script-loading/#toc-dom-rescue.
// This is how we load the advanced CSS.
[
"../../stylesheets/full.css?1510140797"
// Optional:
// Full CSS for schemes. Base must also be included (see above).
,"../../stylesheets/optional/schemes--optional--full.css?1510140802"
].forEach(function(src) {
var link = document.createElement('link');
link.href = src;
link.type = 'text/css';
link.rel = 'stylesheet';
document.head.appendChild(link);
});
// This is how we load JavaScript.
// All JavaScript needs to be loaded using this method or the order of
// script execution cannot be guaranteed.
[
// Optional:
// This initialises the ADTECH advert system.
"https://aka-cdn.adtech.de/dt/common/DAC.js",
// Required (unless using full-spa.js):
// vendor.js contains third-party JavaScript, including jQuery.
"../../scripts/vendor.js?1510140822",
// Required (unless using full-spa.js):
// full.js contains all the custom component JavaScript, with a dependency on jQuery.
"../../scripts/full.js?1510140817",
// Optional:
// Loads a third-party's advert placements, in this instance just ADTECH.
"../../scripts/inventory.js?1510140818",
// Optional:
// Other scripts should be added at this point if they depend on the ready event,
// or are UCASDesignFramework plugins that need to be initialised.
//
// They need to be in the order in which they should be executed.
//
// This example.js should not be included in a production build
// as it only contains scripts to mock functionality with dummy data,
// e.g. the search autocomplete widget
"../../scripts/example.js?1510140814",
// Required (unless using full-spa.js):
// The ready.js file should be executed last, as this initialises
// the UCASDesignFramework plugins and fires jQuery's ready event.
"../../scripts/ready.js?1510140818",
// Optional:
// Custom JavaScript that does not depend on jQuery's ready event or is
// not a UCASDesignFramework plugin can also be included here.
// This my-custom-script.js should not be included in a production build.
"../../scripts/example/my-custom-script.js?1510140814"
].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
// Dynamically created, so executed outside of document parsing.
// See http://www.html5rocks.com/en/tutorials/speed/script-loading/
script.async = false;
document.head.appendChild(script);
});
}
</script>
<!-- Optional: Page- or site-specific stylesheet. -->
</head>
Script to help with FOUC
Place this script before the closing body
tag if you have included document.documentElement.setAttribute('data-fulljs', 'loading');
in the head
.
full.js
will set the attribute to loaded
, otherwise it is set to missing
after five seconds.
We use this to hide or show content depending on what has successfully loaded to help avoid flashes of unstyled content.
<!-- START body_scripts component -->
<script>
if ('visibilityState' in document) {
window.setTimeout(function() {
document.documentElement.getAttribute('data-fulljs') === 'loading' ? document.documentElement.setAttribute('data-fulljs', 'missing') : null
}, 5000);
}
</script>
<!-- END body_scripts component -->