- Added on: v3.0.0 (15/09/17)
- Updated on: v5.0.0 (05/10/20)
Base template
Use the following code as a basis for any page / template built using the Framework.
Further guidance on specific items are provided below
HTML
<!DOCTYPE html>
<html lang="en-GB" class="no-js">
<head>
<title>...</title>
<meta name="description" content="..." /> <!-- Viewport for responsive -->
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <!-- DNS prefetch -->
<link rel="dns-prefetch" href="./" /> <!-- Standard favicon -->
<link rel="icon" type="image/ico" href="./v.2023.01/shared/assets/favicon/favicon.ico" /> <!-- Apple touch icon (also used by other devices eg Android) -->
<link rel="apple-touch-icon" href="./v.2023.01/shared/assets/favicon/apple-touch-icon.png" /> <!-- MS tile image and colour -->
<meta name="msapplication-TileImage" content="./v.2023.01/shared/assets/favicon/abeille-windows-logo.png" />
<meta name="msapplication-TileColor" content="#ffd900" />
<meta name="theme-color" content="#ffd900" /> <!-- Canonical tag for SEO -->
<link rel="canonical" href="[ Page URL ]" /> <meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@[ Twitter username ]" />
<meta name="twitter:url" property="og:url" content="[ Page URL ]" />
<meta name="twitter:title" property="og:title" content="[ Page title ]" />
<meta name="twitter:description" property="og:description" content="[ Page description ]" />
<meta name="twitter:image" property="og:image" content="[ Social card image ]" /> <script>
document.documentElement.classList.remove( 'no-js' );
document.documentElement.classList.add( 'js' );
</script> <link media="all" href="./v.2023.01/shared/assets/themes-managed/[ release version ]/shared/css/vendor/normalize/normalize.css" rel="stylesheet" />
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/core.css" rel="stylesheet" />
<!-- [ Insert extension and custom css for all browsers here ]--> <link media="print" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/print.css" rel="stylesheet" />
<!-- [ Insert custom print styles here ]-->
</head>
<body itemscope itemtype="https://schema.org/WebSite">
<meta itemprop="name" content="[ Website name ]" />
<meta itemprop="url" content="[ Root website URL ]" />
<div class="l-whole-page">
[ Insert modules / elements here ]
</div>
<script async id="js-init" src="./v.2023.01/shared/assets/themes-managed/[ release version ]/shared/js/init.js" integrity="[ init integrity digest ]" crossorigin="anonymous"></script>
</body>
</html>DNS prefetch
To improve page performance the different domains that appear on every page of the site (ie. for analytics, media etc) should be included in dns prefetch tags. The minimum that should be included is static.aviva.io
For Aviva.co.uk the list of prefetch domains would be:
<!-- DNS prefetch -->
<link rel="dns-prefetch" href="./" />
<link rel="dns-prefetch" href="https://cdn.tt.omtrdc.net/" />
<link rel="dns-prefetch" href="https://avivauk.tt.omtrdc.net/" />
<link rel="dns-prefetch" href="https://aviva.demdex.net/" />
<link rel="dns-prefetch" href="https://www.googleadservices.com/" />
<link rel="dns-prefetch" href="https://www.google.com/" />
<link rel="dns-prefetch" href="https://www.google.co.uk/" />CORS
To ensure proper CORS handling, the crossorigin attribute should be set to 'anonymous' on the script HTML that requestes the init.js file.
<script async id="js-init" src="./v.2023.01/shared/assets/themes-managed/[ release version ]/shared/js/init.js" crossorigin="anonymous"></script>It is also possbile to enable cross-origin on files included using RequireJS. To enable cross-origin on non-framework script files and modules loaded in via RequireJS, follow the guide on CORS on RequireJS modules.
Component releases
- Added on: v3.0.0 (15/09/17)
- Updated on: v5.0.0 (05/10/20)
Latest update:
- updated: With the release of v5 the browser support provided has been updated to not include support for IE10 and below. This has resulted in changes to the base template to remove the additional styles, polyfills etc used to maintain their support. Modernizr has also been removed from use to aid in page performance.
- updated: The favicon images used have been moved from "[ CDN Folder Path ]/images/favicon/..." to "/assets/favicon/" so that the icons remain cached between versions of framework.
- updated: Adding the
crossoriginattribute to the script tags to allow CORS is now compulsory. - updated: The
charsetandhttp-equivmeta tags have been removed from the template in favour of the web server, serving the HTML document with the appropriate Content-Type header "text/html; charset=UTF-8" in order to improve page performance.