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.
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.
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.
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.
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.
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.
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.
– 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.
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).
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 email@example.com.
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).
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.
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.
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.
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
* * ABSPATH
Thanks to Langara IT, especially Mac Guy Mike Schmidt, for the workaround.
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.