CUE template: Conformance—Presentation

The elements specified below must appear in the order below. Elements to be nested are indicated by nested list items.

Chrome

1. The favicon must be specified using the favicon packaged with the CUE template.

Skip links

2. Text size must be the same as that chosen for utilities on the site.
3. Must use high contrast colour combinations (i.e. stand out from the site)
4. When visible, this element (the 'access bar') is a full page width bar with all links and content in a horizontal line (floated).

Page layout

5. Max-width of 80em for all content elements, for comfortable reading length (design elements may extend beyond). Note: Applications that require more space may extend beyond (e.g: Large mapping applications, or fullscreen video).
6. Once max-width is reached, the layout must appeared centred in the viewport.
7. Consistent column widths (at 'standard desktop resolution')
   1. Section navigation column should span 25% of the available width (gutters can be added within that space, i.e: padding/margin) and sits far left of screen
   2. Content (.article) should span 50% of the available width when there is an aside column (or 75% when there is no aside column) and sits in the centre of screen (i.e: directly to the right of the section navigation column).
   3. Aside column should span 25% of the available width and sits far right.
8. Applications that don't have 'section navigation' should use the content column positioning above (i.e: centred). If extra horizontal space is required by the application (e.g: a full page mapping application) then up to 100% of the browser viewport width can be used.

Header

9. The Queensland Government logo image (QG logo) (selected from choices packaged with the template) are 240px wide by 42px tall. The logo must be positioned 12px from the top and .7em+5px from the left of the top left corner of the viewport (when the viewport width is less than the layout max-width specified above).
10. Site name must be left aligned in the header directly below the QG logo (with a 7px gap between QG logo and site name).
11. The site name text must be the same height for all sites (28px for the image height and 17px for the text height within).
12. Header has height of 105px (applies when viewed at 'standard desktop resolution' and 'default font size'). The header must be able to expand taller at lower resolutions (as the contents of the header wrap).
13. The default size of the #search-query input must be based on the size attribute and utilities font-size and must not be overridden using other CSS.

Navigation

14. Menu items must have a distinct visual state on keyboard focus
15. Menu items must have a distinct visual state on mouse hover
16. A menu item must have a distinct visual state when it represents the current page

Site navigation

17. Site navigation must appear as a horizontal bar directly below the header
18. Site navigation bar must have a height of 2.2em when all menu items fit on one row. Must increase in intervals of 2.2em when menu items wrap onto second and third rows.
19. If drop-down menus are used:
    1. only one level of drop-downs must be used.
    2. open parent menu items must have a distinct visual state.

Section navigation

20. Section navigation must appear as a list of links, or as a nested list of links if more than one level of IA is available. If JavaScript is also available, section navigation must appear as an expandable/collapsible tree of menu items.
21. The plus/minus icons distributed with the template must be used for the UI button ( toggle ) next to menu items with child items.
22. The dimensions (clickable area) of each toggle must be 16px by 16px. (size based on icon).
23. Child menu items should be indented based on inherited styles.
24. Child menu items that don't themselves have children should appear as bulleted list items.

Content

21. Breadcrumbs
    1. Must use separator icon between breadcrumb items (packaged with template).

Footer

22. Fat footer
    1. Must be visually distinct from the main content area (e.g: separator and/or background colour change).

Print

23. Print styles must optimise the page output for print by hiding the following elements:
    1. Access links
    2. Utilities
    3. Site navigation
    4. Section navigation
    5. Page options
    6. Fat footer
24. Content must expand to use 100% of the available width.
25. Asides must be linearised to display after main content.
26. Conditionally hidden content must be expanded with appropriate headings (e.g: tabbed content, progressively disclosed form sections).