Style Guide

Layout

Page Level Layout

5/3 Layout

The 5/3 layout has a 5/8ths column for the main content and a 3/8ths column for side bar content. These two columns become half-half for portrait tablet viewport (< 801px) and stacked for mobile (< 641 px).

This is where the main page content goes.

How to use in squiz

Technique 1

For most pages with simple text and manually added (edited html) components create two Content Containers on the page. For the first content container set "Presentation"to "Article (article) and for the second content container set "Presentation" to "Block (div)" and enter "side-bar" into "Class". See figures below:

Technique 2

If you wish to use multiple Content containers to break up the content within the "article" section and the "side-bar" section - example you may need to use a Nested content container - set up your page like the image below.

Half-half layout

A layout with two 4/8th columns. Useful for pages which need to display large amounts of content where content hierarchy is not important (e.g. staff profile and publication lists).

Main content in this layout is split across columns

This is the second column

How to use in squiz

You can use the same two techniques above for this. For Technique 1 set "Presentation" to "Block (div)" for both Content containers, enter "col-1of2" into "Class" for first Content Container and "col-2of2" into "Class" for second container.

NOTE: this layout should be used sparingly.

Speical Layouts

Special layouts are only for specifically designed pages and should be implemented by design and development specialists.

Special 2 col max layout

The special 2 col max layout is used for profile banks

used for profiles

used for profiles

used for profiles

used for profiles

used for profiles

used for profiles

Special 3 col max layout

The special 3 col max layout is used for landing page preview menu.

Used for level 1 page body menu

Used for level 1 page body menu

Used for level 1 page body menu

Used for level 1 page body menu

Used for level 1 page body menu

Special 4 col max layout

The special 4 col max layout is used for project cards.

used for project cards

used for project cards

used for project cards

used for project cards

used for project cards

used for project cards

Special 9/3 layout

The special layout is used for the events page and Dean's lecture serie page