MSE Club Website theme

A website inspired from two different ideas: the paper-like Google material design (like all new sites are popping up with) and the vibrant tiled Smallpdf

I used materialize as a framework for this website. It was a nice structure to work with but I had trouble with coloring certain things. Also the card feature (which is 99% of why I picked material design) is a real pain to work with. Nevertheless, the website turned out very nice and is currently deployed for the UofT MSE Club. Take a look.

Managing the website

This website was built with Jekyll. Jekyll is a static site builder that uses the Liquid Templating System and Markdown Post Rendering (with extra bits like Sass compilers and pagination).

For an example, let's look at index.html. It starts out with:

---
layout: default
---

As you might tell this is not what you see when you visit mse.skule.ca, but instead a generated file found in _site/index.html
The layout line tells Jekyll to create a page starting with a layout template found in _layouts/default.html.
When Jekyll encounters an {% include %} tag it looks in the include folder for that name. (e.g. _includes/head.html will replace {% include head.html %})
_includes/head.html has several liquid tags mainly divided into variables and functions. Most are variables that pull information from the website (_config.yml), the page (index.html), or somewhere else.
When a {{ content }} tag is found, all the information in the index.html after the dashed header replaces the {{ content }} tag.
Other html files on the root of the directory as well as files in _posts work the same way, but the generated html file will be located in other places within _site

Setting up the repository

Installation

Install Notepad++. Do not use Windows Notepad becuase it does not support Unix line endings
Install Jekyll.

Standard Installation: Ruby, RubyDevKit, and Jekyll
Windows, Easy: download Portable Jekyll and run setpath.cmd. (Use 7zip if you have trouble)
Android, Easy: install Mr. Hyde and get a GitHub account
Mac, Extra: Xcode command line tools are a preresquite to install Jekyll

(OPTIONAL) Using Git and GitHub really helps with managing the website.

Basic Operations

DOWNLOADING: If you have Git installed, clone or fork the repo. Otherwise, download the zip file.
CHECKING WORK: Go to command line and run "jekyll serve" inside the mse.skule.ca folder.
UPDATING SKULE: Copy the contents of the _site folder to public_html, ensuring ~/public_html/index.html exists.

Editing information

Adding new members

They are found in _data/members.yml. Please mimic all the spaces/quotes/dashes perfectly, as even one extra character can cause unexpected results. Or you can read up on YML to understand what is going on.
Images for members are found in img/member.

Adding a new event/article/sport/shop item

Look in the _posts folder for the respective category and follow the template provided. It should be quite intuitive. All posts must have a YYYY-MM-DD-[name].md format to actually show up on the website. They appear in reverse chronological order (newest first).
Images are found in the img folder.

picture/guide

Follow the format presented in _data/pics.yml and _data/guide.yml

Background/color changes

The background image and the little favicon are in the img folder.
Colors for the tiled menu items are in _data/apps.yml. View this color reference for the acceptable inputs.
To edit the two colors (making up the navigation, footer, and buttons) look for it at the bottom of _config.yml

Materialize

I used materialize for the css. Changes in the materialize files can be found at _sass\components\CHANGES.txt. README can be found at README_materialize.md.

Voila! Thanks for reading ~ Nanosmasher

NanoSmasher / mse.skule.ca