Getting started

To use the patterns your pages need the following code.

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8 ie7"><![endif]-->
<!--[if IE 8]><html class="lt-ie9 ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-gb">
<!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,initial-scale=1.0" name="viewport">
    <!-- The above 3 meta tags must come first in the head; any other head content must come after these tags. -->
    <meta content="on" http-equiv="cleartype">
    <title>...</title>
    <link rel="shortcut icon" href="https://ux.jisc.ac.uk/2.0.0/favicon.ico">
    <!--[if IE]><![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="https://ux.jisc.ac.uk/2.0.0/css/ux.jisc-2.0.0.style-oldie.min.css" media="all">
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
    <![endif]-->
    <!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://ux.jisc.ac.uk/2.0.0/css/ux.jisc-2.0.0.style.min.css" media="all">
    <!--<![endif]-->
    <script src="https://ux.jisc.ac.uk/2.0.0/js/ux.jisc-2.0.0.script-head.min.js"></script>
  </head>
  <body>
    <!-- Add your project content here. -->
    <script src="https://ux.jisc.ac.uk/2.0.0/js/ux.jisc-2.0.0.script-foot.min.js"></script>
    <!-- Insert Google Analytics here either using either Google Tag Manager, or by adding the tracking code directly onto every page. We include GA in this location on the page for performance reasons. -->
  </body>
</html>

This prepares them, and pulls through the library’s Cascading Style Sheets (CSS), JavaScript and web fonts (via our content distribution network).

You can now start using adding the patterns, though please take a look at the minimum requirements for any Jisc project first.

Basic HTML Markup Explained

<!DOCTYPE html>

You must use HTML5 to enforce standards mode and more consistent rendering in every browser possible.

<!--[if IE]><![endif]-->
<!--[if lt IE 7]><html class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="lt-ie9 lt-ie8 ie7"><![endif]-->
<!--[if IE 8]><html class="lt-ie9 ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html lang="en-gb">
<!--<![endif]-->

You must include:

  • Internet Explorer ( IE) conditional comments: we use the classes contained in them to serve IE version-specifc styles when required.
  • the document language, to aid speech synthesis tools to determine what pronunciations to use and translation tools to determine what rules to use: en-gb is the language code for British English.
<meta charset="utf-8">

You must declare an explicit character encoding, to quickly and easily ensure proper rendering of content. When doing so, you may avoid using character entities in your HyperText Markup Language ( HTML), provided their encoding matches that of the document (generally UTF-8). The charset declaration:

<meta http-equiv="X-UA-Compatible" content="IE=edge”>

You must include the compatibility mode meta tag to specify what version of IE the page should be rendered as. We instruct IE to use the latest supported mode with edge mode. This needs to be included before all other tags except for the <title> and the other <meta> tags. For more information, read the Stack Overflow article on the X-UA-Compatible meta tag and HTML5 Boilerplate's X-UA-Compatible documentation.

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

The viewport <meta> element controls the width and scale of the viewport on mobile browsers and ensures proper rendering and touch zooming. Since the pattern library follows the approach of Responsive Web Design the width is set to the device’s native width.

<title>… eg Page name | Service name | Jisc</title>

You must include the <title> to define the title of the document.

<link rel="shortcut icon" href="https://ux.jisc.ac.uk/2.0.0/favicon.ico">

You must add the favicon for a Jisc web project.

You must add the links to the Cascading Style Sheets ( CSS) and Java Script ( JS) before your project’s CSS and JS respectively.

<!--[if IE]><![endif]-->

Can be used used to serve IE-specific (minified) styles to IE9 and below.

<!--[if lte IE 8]>
  <link rel="stylesheet" href="https://ux.jisc.ac.uk/2.0.0/css/ux.jisc-2.0.0.style-oldie.min.css" media="all">
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
  <![endif]-->

You must include the IE8 only style sheet. As IE8 does not support media queries we serve it non-responsive, fixed-width layouts. This file contains all of the styles, optimised for IE8, not just additions to the main style sheet that's served to all the other browsers.

<!--[if gt IE 8]><!-->

Can be used used to serve IE-specific styles to IE9 only.

<!--[if lte IE 8]>
  <link rel="stylesheet" href="https://ux.jisc.ac.uk/2.0.0/css/ux.jisc-2.0.0.style.min.css" media="all">
  <!--<![endif]-->

You must include the main (minified) style sheet, used by all browsers except IE8.

<script src="https://ux.jisc.ac.uk/2.0.0/js/ux.jisc-2.0.0.script-head.min.js"></script>

You must include the default (minified) head JavaScript. This is in the document <head> as it includes Modernizr, which we use on page load to detect browser features.

<script src="https://ux.jisc.ac.uk/2.0.0/js/ux.jisc-2.0.0.script-foot.min.js"></script>

You must include the default (minified) foot JavaScript as it contains all bespoke and vendor libraries scripts required to make the behaviours of our pattern library work.

<!-- Insert Google Analytics here either using either Google Tag Manager, or by adding the tracking code directly onto every page. We include GA in this location on the page for performance reasons. -->

You must include Google Analytics, either using Google Tag Manager, or by adding the tracking code directly onto every page. We include GA in this location on the page for performance reasons.

Theming

The library can be used with certain styles changed so that a ‘theme’ can be applied to the site. Typically this will mean changing colours, adding background images etc, to change the look and feel of the site.

To do this, a theme stylesheet should be created, and placed after the library stylesheet in the HTML:

<head>
 ....
<link rel="stylesheet" href="https://ux.jisc.ac.uk/1.0.0/css/ux.jisc-1.0.0.style.min.css" media="all">
<link rel="stylesheet" href="//theme.min.css" media="all">
...
</head>

Keeping the theme styles in a separate stylesheet ensures that library files can be updated as and when required, without the need to change the theme styles.

Within the theme stylesheet, individual style declarations can be overwritten to achieve the desired styling.