SASS Essentials 2018: Variables


You will notice the above pattern repeated if you look into the VARIABLES folder. The _variables.scss file imports the following partials:


Then, if you look in the main style.scss file, you will see the _variables.scss file being imported next.


Variables allow us to store information in one place and then use it elsewhere in our code.

If you look in _colors.scss, for example, you’ll see a number of color variables (chosen at random, in case you’re wondering).

$color__header-footer-bg: #fadd23;
$color__header-footer-links: #889cad;
$color__header-footer-links-hover: pink;
$color__header-footer-links-visited: orange;

$color__header-footer-headings: yellow;
$color__header-footer-text: papayawhip;

$color__form-labels-text: red;
$color__form-labels-bg: blue;

$color__text-headings: black;
$color__text-body-copy: #333;

$color__accent_dark: hsl(240, 30%, 40%);
$color__accent_light: hsl(240, 30%, 80%);

$color__rich-black: hsl(240, 50%, 15%);

In later partials, we can use those variable names to specify colors.

.site-header, .site-footer {
background-color: $color__header-footer-bg;

If you look in _typography.scss in the variables folder, you will see font stacks defined as $font__sans and $font__body-copy. In later partials, we can then use the variable name instead of repeating the actual font names.

The advantage of this and other variables is that if we change the value of the variable, we change all of the instances of its usage. So instead of having to find every color specification in a single CSS file, we can set it in one place.

SYNTAX: Variable names must start with a dollar sign.

Because they’re so useful, variables are used a lot in sass, so it is very good idea to adopt a consistent naming scheme for them.

Returning our attention to _typography.scss in the variables folder, CONTINUE FROM HERE… TBA…

As an aside, it might make more sense to you to import the variables file before normalize. That’s fine. The main thing here is to make sure that you import your variables partial before you import any partials that refer to any of the variables. SASS will throw an error if you use a variable before declaring it.


SASS Essentials 2018: Partials

To begin, please download these files and open the whole folder up in Atom or another editor of your choice.

The files are a sample SASS-based project. There’s only 1 HTML file, but there are a bunch of SASS files. The aim of this is to demonstrate a few of the most common, useful, and easily learnable SASS concepts.

Sass Partials

This SASS setup in this sample is modelled on some common practices. The WordPress underscores starter theme, for example, uses a fairly similar partials and variables setup.

If you look in the SASS folder here, you’ll see one main file called style.scss, and a bunch of folders:

If you look into that style.scss file, you will see a number of @import statements:

/*  1. RESET ======================================= */
@import 'reset/normalize';

// VARIABLES ========================================
@import 'variables/variables';
@import 'mixins/mixins';

/*  2. TYPOGRAPHY ==================================== */
@import 'typography/typography';

/*  3. NAVIGATION ==================================== */
@import 'navigation/navigation';

/*  4. MEDIA ======================================= */
@import 'media/media';

/*  5. LAYOUT ======================================= */
@import 'layout/layout';

/*  6. FORMS ======================================= */
@import 'forms/forms';

/*  7. MODULES ======================================= */
@import 'modules/modules';

An @import statement will import into a sass file another type of sass file: a partial.

SYNTAX: Partials are named with an underscore at the front, but when they are imported, the underscore and the extension are both omitted. If the partials are in folders, as in the example files, the folder must be part of the @import path.

The name illustrates the purpose of this type of file: it is a part of your overall styling strategy. Partials allow us to break our styling efforts down into modules. We write the partials as separate files but then SASS compiles them into one file.

“Regular CSS” does in fact have an @import directive. They used to be quite popular.

However, there are many advantages to the sass @import over the traditional css @import statement.

The most important is that having a single sass-compiled stylesheet delivered to the browser gives significant performance advantages.

Another is that it’s easier to edit our code if our css tasks are divided into numerous scss files rather than authored in one css file: it’s easier to find, say, video-related code in a partial named _video.scss than it is to find the video-related css in a file containing all the css for the site. ( The styles in a complex site can often into thousands of lines. )


Let’s turn our attention back to the style.scss file in the sample files you downloaded.

The first partial I’m importing here is a long and famous stylesheet called normalize. Normalize is what’s known as a reset stylesheet. These kinds of stylesheets are designed to neutralize (or, normalize) the differences between browsers so that your design can hopefully render as closely as possible in different browsers.

You can get normalize at https://necolas.github.io/normalize.css/

Normalize, for example, is used in common developer frameworks like Twitter Bootstrap, HTML5 Boilerplate, etc.

For more about normalize: http://nicolasgallagher.com/about-normalize-css/
(It’s an interesting read, actually.)

Since normalize “resets” browser styles, it should be the first imported partial (so it doesn’t overrule styles you write).


Organization of Partials

As noted above, you will see a number of subfolders in the SASS folder. For example, in the MEDIA folder I have a partial for images, one for videos, and another for galleries.

I also have in the MEDIA folder a _media.scss partial. If you look in all the other folders, you will see a partial file with the same name as the parent folder (not including the file extension, of course).

This scheme, which is used in underscores, is for organizational purposes.

Typically, each of these special partials will have import statements for all the other partials in its folder.

Then the main SCSS file (in our case style.scss) will import only the “special” partials.

So _media.scss will import _images.scss, _galleries.scss, and _video.scss.

In turn, _media.scss will be imported into style.scss.

This pattern, then, will repeat for all or most of the sass subfolders in our project.

This is a mandatory pattern by any means, but it is definitely a useful and common way to organize your styles, as it sets up an easily-understood modular import chain.


Langara Outlines

How to Find My Langara Office

If you’re a WMDD student, my office, A248, might be a bit hard to find.

To get here, go to the A247 Mac Lab. Walk through the lab. Even if a class is going on, it is ok to do that.

In the back corner of the lab is a door to room A247a. My office, A248, is just inside that door, on the right.

Of course, if you’re a Publishing student, the office is easy to find, since you have classes in A247.


Borp Magazine: Grid & Flex and More

First of All…

Please download the files for the exercise.

In the downloaded archive, there is one HTML file, a folder of images, and a folder of screenshots.

For this exercise, you are making a front page of a magazine-style site. There are two designs: one for regular marks and one for bonus marks.

The bonus marks design continues from the end of the regular marks design, so do the regular one first, and then decide if you want to do the bonus marks design.

You may not use floats. 


Regular vs Bonus…

If you compare the regular full-size and the bonus full-size screen shots, you will see the following differences:

  • The Site Header Text Treatment
  • The Site Header First Letter Treatment
  • The Triangular “Cutting” of Each Feature Image

The differences in the designs are also present in phone view.

In order that you do not take unnecessary risks in a test situation, please do the “bonus” exercise work on an additional stylesheet. That way, if it doesn’t work, you can just delete the link to the bonus styles, and be content with regular marks. Remember, also, that you do not have to do the bonus part.


I have given you a lot, but not all, of the HTML required. You will need to write the FORM, for example. Feel free to add to or modify the HTML in any way, but try to get as close to the screenshot designs as possible.

The Form

Firefox has an amazingly full-featured screenshot ability, but it cuts off screenshots above a certain size. For that reason, I have included screenshots of the FORM at Desktop and Phone widths. The form is at the bottom of the page. It has two different layouts (like the rest of the exercise).

Fonts & Colors

Any sans-serif text is the Google font Fira Sans Condensed. You decide which weights from looking at the screenshots.

Any serif text is the georgia font stack.

Try to get the colors and spacing as close to those in the screenshots as possible.


Marking Details

Phone Layout 2
Desktop Layout 8
Form Layouts 6
Header (including NAV) 4
Possible Bonus Marks 5
Langara Outlines

WMDD4840 Outline (2018)


WMADD 4835 Content Management Systems
Credits: 3 Room: B014
Contact Info:
Kevin McMillan
Office A248
Days & Times:
Spring 2018
Fridays: 1230-520
(Spring term runs Jan 02-April 09)
Office Hours:
Monday 10:00-12:00

SKIP to Class Content

This class will cover Content Management Systems, specifically WordPress.

Like anything in life, this outline is subject to occasional changes.

Throughout the term, I will add links to additional supporting content.

I want to make as much of your learning task-based, so nearly every week there will be problem-solving exercises to be completed in class or in the lab.

Learning Outcomes

Upon successful completion of this course, students will be able to

  • install a Content Management System (CMS) framework on a production web server
  • configure a local testing environment with the same CMS
  • evaluate, install and configure appropriate CMS themes, modules, widgets, and plugins
  • create content, media, menu structures & content types
  • create and restore data and system backups
  • identify and implement appropriate security and anti-spam measures (user accounts, permissions, patches, etc.)
  • customize themes
  • write basic themes

Textbook / Reference Material

There is no textbook for this course: we will use primarily online sources:

Lynda.com Videos
Installing and Running WordPress: MAMP  (chapters 1 & 2 )
WordPress: Essential Training
WordPress: Building Themes From Scratch Using Underscores
WordPress: Developing Secure Sites

WordPress References
The WordPress Codex
WordPress Developer Resource
Codex: Stepping into Template Tags
Codex: Template Tags List
Codex: Conditional Tags

WordPress Cheat Sheets
WP Mega Cheat Sheet
WP Developer Super Cheat Sheet

Course Structure

The class schedule is detailed below.

Techniques learned in one assignment or exercise will always be the starting point for subsequent ones. Be assured, therefore, that no lectures that can be easily missed.

It is your responsibility to make sure that you do not miss any announcements or course materials given in any class. Any additional announcements will be made via email to your mylangara accounts.

Main Assignment: Theme Project 30%
Quizzes 15%
Lab Exercises 15%
Midterm 20%
Final 20%

Final Assignment Description

Note, also, that dates listed can change in response to class progress. 

Week 1: Jan 05 ( Intro to Content Management )

  • CMS vs Static Sites / WordPress.com vs WordPress.org models
  • Setup of Local Testing Environment: MAMP
  • WP Dashboard
  • WP Editing Area
  • Media / Galleries
  • Embeds
  • Posts
  • Permalinks

Weekly Videos


Lab Exercise

Week 2: Jan 12 ( Basic Content Types )

  • Posts vs Pages
  • Categories & Tags
  • Excerpts
  • Settings / Customizer
  • Menus
  • Site Backup

Lab Exercise

Weekly Videos

Week 3: Jan 19 ( Themes & Plugins)

  • A range of themes for business, portfolios, etc
  • JetPack
  • Common plugins

Lab Exercise

Weekly Videos

Week 4: Jan 26 ( Users / Comments / Security )

  • Test Number 1
  • User roles
  • Comments / Anti-Spam Measures
  • Other comment systems
  • Security pt 1

Lab Exercises

Weekly Videos

Week 5: Feb 02 ( Backup / Restoration / Duplication)

  • A Range of Backup Options
  • Backup Automation
  • Site Transfer
  • Site Restoration
  • Security pt 2
  • Recovering from a hack


Weekly Videos

Week 6: Feb 09 (Midterm )


Class / Lab Exercises

Week 7: Feb 16 ( Reading Week )

  • No classes this week.

Week 8: Feb 23  ( WP Theme Development 1 )

  • The Loop
  • Basic Template Tags
  • Leveraging WordPress CSS
  • Introduction to _s (also known as Underscores)


Week 9: Mar 02 ( WP Theme Development 2: _s )

  • Underscores
  • functions.php
  • theme support
  • menus
  • get_template_part()
  • enqueuing: css, fonts, etc
  • enqueuing scripts
  • underscores sass: variables, partials

Weekly Videos


Week 10: Mar 09 ( WP Theme Development 3: Code Reuse )

  • get_template_part()
  • wp conditions
  • more WP CSS & underscores SASS


  • JazzIcons 2018 Exercise

Week 11: Mar 16 ( WP Theme Development 4 )

Week 12: Mar 23 ( Work Day )



The following six-part exercise will help you prepare for the exam and the final assignment.

Week 13: Mar 30: Good Friday

  • College closed

Week 14: April 06: Final Exam

  • Exam will involve theme writing using _s.



Langara Outlines

Hand-In Procedures for my Langara Classes

On some assignments, I will ask you to submit your work in one or two places: mylinux and/or studentshare.

mylinux instructions

This is a live web server that you can access off-campus. To upload to it, we use SFTP.

If you need a review of SFTP, consult this document. The connections details you need are:

  • Host: mylinux.langara.bc.ca
  • Protocol: SFTP
  • User: your computer lab id
  • Password: your computer lab id password
  • Port: this should be left blank

Make sure that you use SFTP rather than FTP, or it will not work.

When you have uploaded your exercise, make sure that you test the URL in a browser. If I can’t see it, I can’t mark it.

Assuming that you have an index.html file in your folder, the URL will be


Test all links: remember that the web server is case-sensitive and has more restricted file naming conventions than Mac or Windows.

Make sure, in other words, that the URL you are testing is the URL the assignment is asking for.

studentshare instructions

Another place you might be asked to handin your assignment is our course handins folder on studentshare.

If you are in our lab, you can access studentshare by going to the Go menu in the Finder, and choosing Connect to Server.

If you are off-campus, you can hand in assignments to studentshare using myfiles.langara.ca. Instructions for using myfiles are available on the main Langara site.

CSS, HTML, JavaScript

“The Walrus” Layout Reconstruction Exercise

This exercise is meant to get you thinking about transitions, menus, responsive states, layouts, and as always web typography.

First, please download the files you will need.

In it, you will build a layout that was used to great effect by the Canadian literary magazine The Walrus.

I’ve put in some of the HTML, but not much. You’ll need to add more. Feel free to modify any I have put in.

There are two big editorial images. The first acts like a feature image. I’ve already put these two, and two ads, into the HTML, but notice the spacing of the images and the text at the various breakpoints.

For the three links in the header, use HTML button elements, and Font-Awesome—the new version that loads SVG instead of icon fonts.

The fonts used are two from Google — Source Sans Pro and Playfair Display — and the Georgia, Times, etc font-stack.

Make all your layouts as close as possible to the ones shown in the screenshots.

I will add mobile menu screenshots at a later date, but this should be enough to work with for now.

All menu states have transitions (from off-screen to on-screen) that take place over .5s.

You can use grid, flexbox, etc. Do not worry too much about backward compatibility.

You will definitely need JavaScript for:

– the classList method, to add classes to elements such as the body

– at least one condition to test how many menus are active

WORK in groups of two or three. When you are done, make a TEXT FILE name “group-members” and include the names of each group member. Only one person per group needs to hand in the project: you will be marked for your group work.


WordPress Theme and Plugin Configuration Exercise #8324

In this exercise, you will download and configure a free WordPress theme, and some plugins. You are welcome to use the Internet or your notes.


First, please download this sample duplicator package and install it in your MAMP testing environment. Make sure to add yourself as a new ADMIN user in this process. Also, please download the screenshots package.

The content is approximately 12 posts, with feature images and summaries. Each post has a youtube video right at the beginning.

Finally, download, install, and activate the following:

  • the Ryan theme
  • the Ninja Forms plugin
  • the Yop Poll plugin

If you are at Langara College, don’t forget that we have to install themes and plugins manually, owing to network restrictions.

You may not install any other plugins.

You job is to make the site look like the one in the screenshots.

A lot, but not all, of what you will do will take place in the theme customizer.

Front Page ( 5 marks )

The front page is NOT a static page.

Use the theme customizer to enable the slider. The images are included in the Duplicator package you have already installed: reuse feature images from three articles. Make sure that no heads get cut off.

For the text that appears on those images, use the names and the quotes listed below:

  • Billie Holiday: “When you sing, always tell the truth.”
  • Miles Davis: “Don’t play what’s there, play what’s not there.”
  • Sonny Sharrock: “When I walk out on stage, my intention is to make the first four rows bleed from their ears.”

Because the images are black and white, make the necessary CSS changes to make the text in the slider more legible. Try to match the effects below as closely as possible. Click any image if you need to see a bigger version.

Use the theme customizer to set up the three featured content areas that are underneath the slider. Use the same icons and text as below.

Do not link the featured content to anything (we don’t have any pages to link them to at this point).

Featured Content Design

If the front page is not showing article summaries instead of the long articles, make sure that it does.

Menus (2 marks )

Make the menus in the header area like they in the screenshot below. Click for bigger image. The screenshot top menu has the HOME link in a dumb place: in your menu, make HOME the first link.

For the social page links, just link to the Langara Facebook, Twitter, and LinkedIn pages.

Posts Data ( 1 mark )

Change the publication date of all posts to be within the last year. Remove any tags that are not explicitly music-related.

Another User ( 2 marks )

Make another user with Editor access level. Give that author the name Walter White and the email walterwhite@kevinmc.ca.

Assign all posts to this user.

At the end of every post (in single view), make sure that the author bio and gravatar is displayed: “Walter White is a very enthusiastic jazz fan and small businessman.”  It will look similar to the one below:

The Favicon ( 1 mark )

Included in the Media Library of the site you have installed is a PNG file. Make it work as the favicon on the site (visible in in the browser tab in Chrome, for example).

Working Favicon


Body Text  ( 1 mark )

Change all paragraph type to the typical georgia font stack.

The Sidebar in Posts Full Views (2 marks )

When we see a post in full (single) view, make sure there is a sidebar with only Search, Recent Posts, Categories, and Archives, in that order. 

Single View

Contact Form ( 1 mark )

Using the Ninja Forms plugin, make a Contact page. Make sure you that the CONTACT link in the header goes to that page.

BONUS MARKS ( 5 marks )

For 1 bonus mark, figure out how to make the videos not show related posts when they finish playing. Make that solution happen on the Anita O’Day post.  Remember that you may NOT install any other plugins than the two used in the exercise.

For another 4 bonus marks, use the Yop-Poll plugin to make three polls. Use the text below. Put them at the bottom of every page in the site (arranged and styled as they are in the screenshot below). Configure the polls so that anyone can vote: they do not have to be logged in.

Weekly Reader Poll 1

What is the best ever jazz record?

  • Miles Davis: Kind of Blue
  • John Coltrane: A Love Supreme
  • Sonny Sharrock: Ask The Ages
  • Ella Fitzgerald: Cole Porter Songbook
  • Charles Mingus: Mingus Mingus Mingus
  • Eric Dolphy: Out to Lunch!
  • Theolonious Monk: Monk’s Dream
  • Ornette Coleman: The Shape of Jazz to Come

Weekly Reader Poll 2

Who is the best ever jazz vocalist?

Weekly Reader Poll 3

What is the best ever jazz album cover?

  • Dave Brubeck: Time Out
  • Miles Davis: Tutu
  • Lee Morgan: The Sidewinder
  •  Verve: Jazz At the Philharmonic
  • Freddie Hubbard: Hub-Tones
  • Eric Dolphy: Out to Lunch
  • Duke Ellington: Anatomy of a Murder
  • Billie Holiday: Billie Holiday


Your work must include the color treatment of any poll results, as below:



Hand It In

When you are done, make a Duplicator package of your site. Put the installer and the zip archive in a folder with your name + midterm in the name, then hand it into studentshare (PUBL 1232, if you are a PUBLISHING student).

Make sure that you are in CHROME when you are making the DUPLICATOR package: Safari (and maybe other browsers) will automatically unpack a ZIP when you download it, thereby making it unusable by Duplicator.







WordPress: Langara Network Proxy Settings Fix

We now have a workaround for the Langara network-related issues with respect to MAMP and WordPress.

Specifically, we have normally had to download themes or plugins manually—and then install them by copying them to the wp-content/themes or wp-content/plugins folders.

Now, however, with a small edit to a configuration file in each site we’re working on in the lab, we can now use the normal WordPress interface for themes and plugin installs, as well as updates.

The file is in the root level of any WordPress installation: wp-config.php is where the details of your database name, password, host, etc are stored when you set up WordPress for the first time.

Open it up in a text editor.

The information you will put in can go anywhere. Here I will put it after the MySQL Settings section, before the Authentication Keys and Salts section.

/* Langara Network Proxy Settings for use in labs with MAMP. 
   If you move the site to another server, remove these three lines.
define('WP_PROXY_HOST', 'proxy.langara.bc.ca');
define('WP_PROXY_PORT', '8080');
define('WP_PROXY_BYPASS_HOSTS', 'localhost');

I would also suggest editing the Table of Contents section around line 9, just to include a reference to the new section you’ve created:

 * This file contains the following configurations:
 * * MySQL settings
 * * Langara Proxy Settings For WP Use with MAMP
 * * Secret keys
 * * Database table prefix

Thanks to Langara IT, especially Mac Guy Mike Schmidt, for the workaround.


CSS Grid: Windows 8 Desktop Mockup

For this exercise, please download the screenshot.

You will need to use the following:

  • CSS Grid(s) to lay out the page and components
  • Typekit.com to serve a font that as closely as possible matches the Segoe Windows system font (which is not available anywhere except in Windows itself). You will need an Adobe membership to use this service.
  • CoolPHPTools.com to extract a color palette from the screenshot.
  • IcoMoon to create a font of as many similar icons as possible.

Make a mockup of the desktop shown in the screenshot. You do not need to exactly match all of the images in the screenshot. Try to get the icons as close as possible, however.


You can work in groups of two for this. When done, show it to me. Make your stylesheet and HTML as neat and tidy as possible.