Skip to content The Open University
  1. Home
  2. Customising OU ICE

Customising OU ICE

Various features of OU ICE can be toggled by adding simple HTML class attributes to the body element. As you move through this example site you'll see reference to body classes. Add these to an OU ICE HTML page to trigger layouts, colour schemes and the correct header and footer.

Here's a few examples:

Colour scheme

for the neutral colour scheme:

  1. <body class="ou-neutral">

Layout

for the panel layout:

  1. <body class="ou-panels">

Header and Footer toggle

for the OU home header and footer:

  1. <body class="ou-ia-home">

Mobile version

To enable switching between the mobile and full desktop version:

  1. <body class="ou-mobile">

Chaining body classes

You can chain the body classes to combine colour, layout and header requirements.

to select the neutral colour scheme, panel layout and OU Home header and footer:

  1. <body class="ou-neutral ou-panels ou-ia-home ou-mobile">

Adding components

The next step is to add any relevant components to your web pages. You can use standard HTML for things like headers, paragraphs, blockquotes, images, tables, forms and more. Combine these with OU ICE specific class attributes to use pre defined design patterns. The remaining pages on this website are dedicated to the available components.

Incorporating OU ICE into your own site design

OU ICE v3 has been designed to be easy to use with your own HTML, Javascript and CSS. All OU ICE styles have been prefixed with "ou". So as long as your custom markup, styles and behaviours don't use the OU prefix there will be no danger of clashing.

Say you wanted to create a style for an Frequently Asked Questions list.

You might be tempted to create something like this:

  1. <ul class="ou-faq">

This would be a bad idea as the ou prefix is reserved for OU ICE styles. We might create an ol.ou-faq sometime in the future and it might clash with what you had created. Far better would be for you to come up with your own prefix for your styles:

  1. <ul class="gdc-faq">

OU ICE tutorial

If you're new to OU ICE you might find this quick step by step tutorial useful.

This page was last updated on Wednesday November 13, 2019