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
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.
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.
-
Coversheet Applications
To be completed in full .
-
Coversheet Applications
To be completed in full .
-
Coversheet Applications
To be completed in full .
-
Coversheet Applications
To be completed in full .
View Code
list first level links
View Code
list of links
View Code
list ordered
- Ordered list first item
- A second ordered list item
- This one has a sub list
- First sub list item
- Second sub list item
- 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 |