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 -->