In order to keep the style of network applications consistent, there is a stylesheet as part of the Dashboard that should be used in other projects as far as possible.
You can include this with the following in the head of your HTML:
You should, at a minimum, also include the following for a consistent mobile experience:
Anatomy of a page
- div id:dashboardContainer
This should be included as a container around all content within a page, and is used to position the header and footer appropriately
- div id:headerDesktopBanner
Everything within this Div will be displayed only on non-mobile devices, and should contain only the University logo, and perhaps a back to dashboard link
- div id:dashboardHeader
This is the actual header, the title of the application/page and will be styled accordingly for a device.
We wrap the new HTML header tags inside a div for backward compatibility.
- div id:dashboardContent
All page content (except header and footer) should be wrapped inside a div with id of dashboardContent
- div class:contentBox
Any content boxes on a page should be within a 'contentBox' styled div.
- h2 will be applied as a header to the content box, and style accordingly
- A two-column layout can be achieved using div class:columnContainer twice inside the contentBox
- div id:dashboardFooter
The footer will be styled according to device, as with the header:
Colouring the page
The page header and footer can have a colour scheme applied, all of which are inline with the University visual identity colour pallette.
These can be specified using a class on the header and footer with the name dashboardColour followed by one of:
If there is no colour class supplied, the default 'slate' (internal websites, by web service standards) will be applied.