Colour swatches

Colours

These are the main colour variables that are used throughout the site. There are also variations of these base colours which are created using sass functions. E.g. background: darken($swinburnered, 10%);

Typography

You can view a full list of typographical styles on the typography page.

buttons

Use the base .btn class to create the default button and then extend with -- modifiers. E.g for a primary button you would have <a href="#" class="btn btn--primary">A primary button</a>

You can add other button types by adding the type to sass map in the _buttons.scss partial.

Buttons can also be paired with Font Awesome icons as demonstrated below. Form more information on this see the Font Awesome examples here: Font Awesome buttons

Default Button Primary Button Secondary Button Inverted Red button Blue button Green button Teal button Gold button Purple button
View Code

forms

Forms have basic styles as well as some options to create more complex layouts. However only a couple of form types have been created and existing Swinburne form styles may be used.

All form information is in the _forms.scss module.

View Code

headings

Headings H1 to H6 have been defined.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
View Code

icons

Icons use Font Awesome, a fully featured icon font which you can find good resources on here: Font Awesome. Icons use the following mark-up, which differs slightly from the FA examples which use the <i> tag. An 'i' is not semantically correct so a span has been used which has no semantics and is essentially meaningless.

<span class="fa fa-icon-name"></span>

To use Font Awesome it requires the .fa class then the .fa-[icon-name]. You can also use modifier classes like .fa-fw to make it fixed width or .fa-lg to make it large.

A link

Delete

View Code

list downloadable documents

The downloadable documents list provides similar functionality to the first level menu with a left-aligned icon. This list is useful for linking to lists of documents, with the document type displayed in the icon field.

View Code
View Code
View Code

list ordered

  1. Ordered list first item
  2. A second ordered list item
  3. This one has a sub list
    1. First sub list item
    2. Second sub list item
  4. Back to the future.
View Code

list unordered

Unordered lists are used throughout this site, a lot of the time not in the bullet form. Margins, padding and bullets can be removed from both, ul and ol elements by adding the HTML class: .no-bullets. This can also be achieved in sass using an extend placeholder. E.g .my-list { @extend %reset-list; }

Other variations of the list include a striped list: .striped-list to make alternative rows striped.

  • List item numero uno
  • Another list item
  • This one has a sub list
    • This is the first sub item
    • This is the second
  • Back to our top level
  • List item numero uno
  • Another list item
  • This one is a zebra
  • This one wants to be a zebra
View Code

paragraphs

Paragraphs can also have the .lede class to make the text larger. Used for an introductory paragraph.

Normal paragraph

A lede paragraph

View Code

tables

Tables require a class of .table to provide formatting as this enables the table element to still be used in other circumstances.

There are five formatting options, Standard: .table, Bordered: .table.table-bordered, Striped: .table.table-striped, Condensed: .table.table-condensed and Blocked th: .table.table--blocked-th.

Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 3 Table Heading 4
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 3 Table Footer 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 3 Table Heading 4
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 3 Table Footer 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 3 Table Heading 4
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 3 Table Footer 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 3 Table Heading 4
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 3 Table Footer 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Heading 1 Table Heading 2 Table Heading 3 Table Heading 3 Table Heading 4
Table Footer 1 Table Footer 2 Table Footer 3 Table Footer 3 Table Footer 4
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
Table Cell 1 Table Cell 2 Table Cell 3 Table Cell 4 Table Cell 5
View Code