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:
for the neutral colour scheme:
for the panel layout:
for the OU home header and footer:
To enable switching between the mobile and full desktop version:
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:
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.
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:
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:
If you're new to OU ICE you might find this quick step by step tutorial useful.
If you're new to OU ICE you might find this quick step by step tutorial useful.