Welcome to the Design Guide

This is a call-out box (styled as class: ".callout"). To change the elements of this web design, see the _design_elements.sass file within /css/. Ensure that you have a program capable of translating SASS into CSS installed.

Design Guide (Heading 2)

Lists (Also Tables of Contents)

  • This is a numbered list.
  • Apples
  • Bananas
  • Cucumber
  1. Callout & Hero Image
  2. Typography
  3. Buttons!
  4. Slider
  5. Content Accordion
  6. Quiz & Checklist
  7. Contact Profiles

Heading 3

Paragraph text looks like this. Regular links look like this.

External links will automatically open in new tabs to ensure that the user's experience of the website remains continuous.

Heading 4

There is even a quote class! Useful for excerpts, etc.

- Abraham Lincoln

Notice: Warning Text & Special Info Box

The .warning class is useful for small bits of very urgent text for students to be aware of.

This textbox, class .text-content-alt, is a round-cornered info-box/caption that can be inserted into the .text-content box for another level of information hierarchy.

A Note on Accessibility in Web Design

The current design elements and colour palette were designed for maximum visibility, even in users who are visually impaired. In addition, all links and images have alt-text attached so that users using screen-readers can understand what is on the webpage.

For future websites based on this design, please ensure that links and images have alt-text.


Buttons have been designed to be highly distinguishable, easily readable, and colour-coded for ease of access and understanding. These colours are also labelled in _design_elements.sass.

The .important class button differs slightly in design to make it stand out even more compared to the other buttons.

The .interact class button is yellow with a flag to signify an important checkpoint.

The .download class button is always shown with a .button-cap caption that lists the file type and size. It opens in a new tab. All files for download are located in /files/

If the .readmore button leads to an external website, the icon becomes the external-link icon.

Unslider Plugin

  • Unslider is a Third-Party jQuery Plugin

    Unslider is a third-party open-source jQuery slider plugin. It is simple to install and easy to customize.

  • How to Change This Image

    To change this image, upload a new image (at least 400px by 960px) to /img/ named "evaluation.jpg".

  • Background Images Coded in SASS

    The background images have been coded in the _fonts_andd_colours.sass file; you can change the names of the image files listed here.

Content Accordion

Accordion Title

Accordion Subtitle

Accordion Toggle

Heading 3

Text and stuff.

Another Header 4!

More text

Accordion Toggle

Heading 3

Text and stuff.

Another Header 4!

More text

Accordion Toggle

Heading 3

Text and stuff.

Another Header 4!

More text

Quiz & Checklist

Updating Confirmation Codes

Ensure that the confirmation codes for these are changed annually. To do so, please speak to Ivan Kalmar or, if there is an issue, please contact the developer: [email protected].

Contact Profiles

How to Edit Photos

To change the contact's profile picture, simply put their image (at least 80px by 80px) into the /img/profiles/ folder and title it "lastname.jpg". Then, add their last name to the $TAlist or $proflist in the _design_elements.sass file.

Shawn Lehman
Course Coordinator (Fall)
Evolutionary Anthropology
Office: AP 404A | Website

Max Friesen
Office: AP 400 | Website

Ivan Kalmar
Course Coordinator (Spring)
Linguistic & Sociocultural Anthropology
Office: NF 228 | Website