University of Adelaide Style guide

HTML Templates

This is the starting point for HTML template creation. You must include each of the items listed below into your HTML template.

You can also find an example of these elements within the header and footer HTML template.

Once you have your basic template setup, you then need to build in the grid system.

Doctype and <html>

Each of the following CSS classes are required. The no-js CSS class is used by Modernizr. See the University of Adelaide style guide JavaScript section for more information.

<!DOCTYPE html>
<!--[if IE 7 ]><html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="gt-ie9 no-js"> <!--<![endif]-->

Charset and title

Add the following directly below the <head> of your project.

Page title

<meta charset="utf-8">
<title>Page title</title>

Mobile first

To ensure proper rendering and touch zooming, add the following viewport meta tag into the <head> of your project.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Favicons

The following University of Adelaide style guide favicon markup is required within your HTML template. This also needs to be inserted into the <head> section.

<link rel="shortcut icon" href="ua_theme/images/favicons/apple-touch-icon-57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="ua_theme/images/favicons/apple-touch-icon-144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="ua_theme/images/favicons/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="ua_theme/images/favicons/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="ua_theme/images/favicons/apple-touch-icon-57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="ua_theme/images/favicons/apple-touch-icon-57-precomposed.png"/>
<link rel="apple-touch-icon" href="ua_theme/images/favicons/apple-touch-icon-57-precomposed.png" />

HTML5 support < IE9

To support the HTML5 elements in browsers olders than IE9, you must include the following markup into the <head> of your project.

<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

We are not supporting IE older than version 9. Please wrap the main style sheet in the following HTML comment to avoid loading the CSS to older versions of IE. This ensures that the content is accessible as text only. This also needs to be included in the <head> of your project.

<!--[if !lte IE 8]><!-->
<link rel="stylesheet" href="/css/all.css">
<!--<![endif]-->

Body

Below the </head> tag, place the <body> tag followed by its closing tag. Insert the following directly below the opening <body> tag.

<a href="#main-content" class="c-skip-link">Skip to main content</a>

Next steps

From here, you can start setting up the grid system.