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.



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
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.


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.


The HSL Color Model

When you think about it, hexidecimal and rgb are not particularly easy to work with. Remembering that this much RED when combined with that much BLUE makes HOW much PURPLE isn’t especially intiuitive. Doing it in hexidecimal is even more annoying.

A much more human-friendly color model is HSL. And there is also HSLA, for adding alpha (opacity) values to your color.


Think of H, the H in HSL, as an anchor point. To get comfortable with that idea, consult a color wheel…

rgb color wheel


… remember the following points:

  1. A circle has 360 degrees.
  2. Red, Green, and Blue are spaced equally along the circle, in order.
  3. Therefore, each of the RGB “anchor points” are 120 degrees along the circle.
  4. Red, the starting point, is 0 degrees (and 360, which is the same thing)
  5. Green appears at 120 degrees.
  6. Blue appears at 240 degrees.


Saturation: Richness of Color

The saturation value, which refers to the richness of the color, is specified in percent. This ranges from 100% (full richness) to 0% (fully desaturated). Fully desaturated means that you will have some shade of grey, depending on which HUE and LIGHTNESS value you started with.


Lightness refers to the amount of light in a color. 50% is middle. At 0% lightness, the color will be pure black, regardless of hue. At 100% lightness, the color will be pure white, regardless of hue.


How to Think in HSL

Pick a Hue from 0 to 360 and with saturation at 100 and lighness at 50 and you’ll have the purest form of that color. Reduce the saturation and you move towards gray. Increasing the luminosity moves you towards white, decreasing it moves you towards black.


With a bit of practice, you will find that this color model is very easy to experiment with. 


Complementary Colors

To get the “opposite” (complementary) color, look to the other side of the wheel. In terms of numbers, subtract (or add) 180 degrees.

One way to remember the complementary color relationships is to make up a memorable sentence with words that start with the opposing colors. I use this one:

Buy Your GrandMother a Rum and Coke.

Using that sentence, you can get the opposite colors:

  1. Since Blue is 240, subtracting 180 = 60 (Yellow)
  2. Since Green is 120, adding 180 = 300 (Magenta)
  3. Since Red is 0, adding 180 gives us 180 (Cyan)

Finally, knowing these key points on the color wheel allows us to easily get the analogous colors (the ones beside or between the main colors).

For example, suppose we want to find the HUE value of ORANGE. Orange is made by combing red and yellow.

We know that yellow is the opposite of blue. Since blue is 240 degrees, subtracting 180 give us 60 degrees as the value for yellow.

To get the HUE value of orange, then, we pick a number between 0 (red) and 60 (yellow). The lower the number, the more we are approaching red; the higher the number the more we approach yellow.


CSS Grid “Layouts in Abstract” Exercise

First, download the required  files. 

Using Firefox for your browser will allow you to use its Layout tab in its Inspector. If you’re at Langara, use the Firefox Developers Edition.

The task:

In the files you download is a grid-starter-template.html file. For each layout you are to build, duplicate and rename to reflect the layout you need to build.

There is a stylesheet called common-styles.html which just removes the dots on the list and does some basic formatting.

Put your styles for each exercise in the <style> area at the top of HTML.

Do the exercises in sequence: some build on what’s done in the previous exercise.


Example 1: 

Four rows, five columns.

  • Columns take all available space (i.e. between the BODY margins).
  • Font size determines height of rows
  • 1em space between items.

Example 2

  • Four rows, five columns
  • First column is 300px, other columns vary with browser width

Example 3

  • Seven rows, three columns
  • First and last columns are 300px, other columns vary with browser width.

Example 4

  • Three rows, seven columns. First row 3x the size of other rows.

Example 5

  • Three rows, seven columns. First item in row 1 covers four columns

Example 6

  • Three rows, seven columns. Last item in row 1 covers four columns

Example 7

  • First item in row 1 covers four rows

Example 8

  • First item in row 1 covers four rows and two columns

Example 9

  • Item number 1 appears at the end of row 2.

Example 10

  • Item number 1 takes up two rows and two columns from the right edge of the wrapper.

Example 11

  • Item number 1 takes up three columns in the middle of the entire wrapper.
  • Remember: no changes to the HTML.

Example 12

  • 3 columns, equal width.
  • 7 rows. Row 2 is 1/2 the height of row 1, and 1/3 the height of row 3.
  • That pattern continues with rows 4,5, & 6.
  • But the last row does not continue the pattern: the only thing determining its height will be the content itself.

Example 13

  • Two screenshots (one hanging off the edge)
  • Four columns. Each each an equal width, but each one never gets smaller than 200px. It can get bigger, however.
  • Hint: requires minmax()

Example 14

  • 4 rows, 5 columns.
  • Wrapper takes entire width and height of the page.

Example 15

  • Same layout as example 14, but item number is in top right of box.
  • Add 1rem of padding, too.

Example 16

  • Same layout as example 15, but text is in the horizontal and vertical center of the box



For layouts 20 – 23, use the file poem.html as your starting point.

Example 20

  • Style it like in the screenshot. Don’t worry that the text is different than in the screenshot.
  • Divide the items up such that they cover the entire page.
  • Make the number be in the top left corner and the text be in the bottom left corner.

Example 21

  • Lay it out like in the screenshot.

Example 22

  • Layout it out like in the screenshot
  • Modify the design so that the item number has a light background related to item background.
  • Have the number text centered vertically and horizontally in its box.


Flex Layout Exercise – Redunzl 2018

This exercise primarily focusses on the use of the FLEXBOX css module for layout. It should also reinforce your understanding of the use of multiple backgrounds.

First, download the starter files and screenshots.

Since this is an exercise, I have not sized the images down to the final size I would use them at. In a production site, I would definitely do so. Use the images as supplied. This is commonly done while figuring out how our layout is to behave.

You create all the HTML & CSS. I’ve supplied none.

Use so-called greek text, created with Emmet’s lorem functionality. In the paragraphs under story items, the paragraph lengths vary. To make the task easier, keep the headings short ( one or two words ). For the first image (ie the one in the feature story section), use the file bug-banner.jpg.

Conditions of the Exercise: Layout

You can’t use floats on anything. None. Zero. No br tags, either.

Do not make separate grid classes.

Use flex properties to control as much of your layout as possible, including widths of element boxes.

Notice the flow of alignments in the small menu area underneath the biggest image on the page—presumably, this would be a carousel kind of element. If a user clicked different numbers, they’d get different images and story titles. Don’t worry about adding that functionality, but definitely make sure you get the different responsive alignments of that little menu correct (more detail below).

Conditions of the Exercise: Perfect Vertical Alignment

I’ve included this below in the screenshots, but I wanted to describe what I’m looking for here, too.

When the number menu wraps, make sure that the headline and the menu items are perfectly centered vertically.  Definitely make sure that there does not appear to be more space on the top of this area than on the bottom. You will likely need to use the Developer Tools (right click: Inspect Element) carefully to figure out what’s going on here.

Conditions of the Exercise: Multiple Backgrounds

Header & Feature Area

The header and feature area (combined) uses two background images to create the grid + noise pattern. They are found in the patterns folder: asfalt.png and batthern.png.

Page Bottom

Open the full size screenshot. Make sure you look at it at full size ( in Preview (Mac): View > Actual Size ). Scroll down to the bottom. Notice the subtle background pattern. Now start scrolling up slowly. See how the pattern gradually fades away after a couple story boxes.

Figure out how to create that effect.

The image I used here came also from transparenttextures.com: skulls.png (it’s in the patterns folder, too).



Midterm: WordPress Theme Mockup Exercise 2018

In this exercise, you will build a mockup of the first page of a magazine-style WordPress theme called Midterm.  It will look more or less like this, but consult the screenshots that you will get shortly, because I’ve changed the design a bit.

Midterm-Full Width View

Download the starter files form here.

The Task

Build the layout as close as possible to that illustrated in the screenshot files that are contained in the files you downloaded.

Use FLEXBOX for the layout. 

Do not download any grid systems. 

The screenshots are captured on a Retina 27″ iMac, so there’s lots of detail. Zoom in on the files to get a sense of what I’m looking for.

Notice that the sidebar remains the same width throughout. Only the article area, and the articles themselves (including the photos contained inside) change size. The main differences between the layouts are described below:

  • Small Layout: single column, menu initially hidden
  • Medium Layout: two columns in article area, centered header at full width, menu initially hidden
  • Wide Layout: three columns, menu always visible. Menu button always hidden.

The fonts used are from Google: Lato & Merriweather (sans-serif and serif, respectively).

For the font icons, use Font-Awesome 4. You will notice that the HTML for the post-meta section (the credits and categories in each article) does not have any classes or spans on the links. Use Atom selection techniques to make the task of adding the classes and spans a simple one.

Do all your testing in Chrome. You can ignore other browsers for now.

One small caveat: in a real production site, I would of course not use images at the size I’ve supplied to you. For designing a layout, however, this is perfectly normal. You don’t need to size them down in this exercise.


Apart from blacks and greys, there is one main color used: #cd5c5c. I used the complimentary of that color in some places too. Figure out how to get that color without just using the eyedropper tool in Photoshop.


When the use hovers over the MENU or TOP buttons, the background color changes to the complimentary color.

Menu Component

As the screenshots show, when the layout goes to the largest breakpoint, the menu button will disappear and the entire menu will be shown.

Conversely, at the medium breakpoint and smaller, the menu will be hidden and the menu button will appear.

Clicking on the menu button will cause the menu to appear. Clicking on it again will cause the menu to disappear again.

In a later class, we will do the JavaScript to enable this, with transitions. At this point, just make stuff appear or disappear via CSS.


In the main footer of the site in the screenshots, a Spotify playlist is embedded. That playlist is right here. Figure out how to embed the small version of this playlist. Only do this if you have done the rest of the exercise.

And if the Langara network is causing any issues with Spotify in a local page slowing down loading, just drop this part of the task.

If you don’t do this, you will not lose any marks.


Flex In A Nutshell

The exercise will focus on the essential points of the FLEXBOX CSS module. It won’t have anything design-related—just pure css layout concepts.

To begin, make a folder, set it up as a new Atom project, then make an index.html file with a single unordered list with 15 list items, each holding one single-word link.

  <li><a href="#">Lorem.</a></li>
  <li><a href="#">Libero.</a></li>
  <li><a href="#">Repudiandae!</a></li>
  <li><a href="#">Deserunt.</a></li>
  <li><a href="#">Tenetur.</a></li>
  <li><a href="#">Provident.</a></li>
  <li><a href="#">Ut.</a></li>
  <li><a href="#">Veritatis.</a></li>
  <li><a href="#">Ratione.</a></li>
  <li><a href="#">Ratione?</a></li>
  <li><a href="#">Dolores?</a></li>
  <li><a href="#">Voluptatum!</a></li>
  <li><a href="#">Facilis.</a></li>
  <li><a href="#">Eius?</a></li>
  <li><a href="#">Est?</a></li>

Now remove the list’s dots, and zero out its margin and padding.

Give the LIs a border, and set the LINKS to display: block with generous padding.

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
    li {
      border:1px solid black;
      box-sizing: border-box;
    a {
      text-decoration: none;
      display: block;
      padding: 1rem;

Test your page in a browser. It should look like a bunch of boxes taking the full width of the page, in the default UL layout of a single column.

Now, set the UL to display:flex. Your list should now look something like this:

List With Default Flex Flow

We see, then, that the LIs are now arranged in a single row. Each box is a different width. In other words, its content size (single word + padding) is determining the box size.


In addition, notice that the LIs are running off the page. This is because the default FLEX-FLOW value on the UL is ROW NOWRAP. ( Flex-flow is a shorthand property combining Flex-Direction and Flex-Wrap ).

Let’s change that. In your UL style add FLEX-FLOW: ROW WRAP. Your page should now look like this:


What we observe here is that the list items are filling as much of each row as will fit, then wrapping. In a sense, they’re behaving similarly to inline-block elements.

One way FLEX gets its name, however, is from how easily we can adjust the distribution of the items. For example, if we add justify-content: center to our UL style, the elements will line up in the center of each row, and the remaining space will appear at the sides:

Centered Flex Rows

Additional values for JUSTIFY-CONTENT include

  • Space-Around: additional space is distributed on each side of each flex-child (first screenshot below)
  • Space-Between: additional space is distributed on each side of each flex-child, except not on the beginning or end of the row (second screenshot below)
  • Flex-Start: the items line up at the front of the row, and additional space is put at the end of the row (third screenshot below)
  • Flex-End: the items line up at the front of the row, and additional space is put at the end of the row (fourth screenshot below)





Flex-Grow, Flex-Shrink, Flex-Basis: FLEX

So far, all the Flex properties have been applied to the Flex Parent.

Three very useful properties that get applied to flex-children are Flex-Grow, Flex-Shrink, and Flex-Basis. All three are quite typically applied as the Flex shorthand property. I think that its actually easier to understand each if you use the shorthand method.

All three properties concern how the browser will assign space in each flex row or column.

With just FLEX-FLOW:Row Wrap set on our UL, our list lines up like this:


Now, add flex:1 0 100px; to the LI style. Resize the browser window (bigger and smaller).


In the FLEX shorthand property, order matters. The first is the FLEX-GROW value, then FLEX-SHRINK, then FLEX-BASIS.

FLEX-BASIS represents the starting size of the element. So in the above code, each LI’s initial width is 100px. The browser will place as many of the 100px LIs in the ROW (in this case). Then it will calculate how much additional space is left. That additional space will be distributed by referring to the FLEX-GROW property. Since all our LIs have a FLEX-GROW value of 1, they will all get an equal share of the remaining space.

To understand how Flex-Grow really works, let’s comment out all but four of the list items. Add the following style:

      flex: 10 0 100px;

We see here that the FLEX-GROW property on the first LIST ITEM is set to 10. Test the page in a browser (resizing big and small).


This whole shorthand, then, means that the first item will get 10 times as much of the remaining space as the other items.

Now add the following style:

    li:nth-of-type(4) {
      flex: 5 0 100px;

This means that the fourth list item will get 5 times as much of the leftover space as the “ordinary” LIs (which have flex-grow values of 1), but only half as much of the additional space as the first LI (which has a flex grow value of 10). In the screenshot below, we see this reflected.


So, in a nutshell, our FLEX shorthand sets the “starting” size of the element, and the FLEX-GROW propertiy determines how much “leftover space” in the parent is distributed to each of the flex children.

The FLEX-SHRINK property will determine how items are allowed to shrink. It’s not as commonly used as FLEX-GROW. That is why I’ve set the FLEX-SHRINK to zero: a value of zero means the element won’t shrink (and a value of zero for FLEX-GROW means it won’t grow).

Hopefully, this simple example gives you a sense of what we can do with FLEX. There are a lot of additional things we can manipulate with flex, but you can build a lot of layouts with what we’ve covered here.

In later exercises, we’ll examine those properties.